Neatbo.

Color and CSS guide: contrast, gradients and responsive styles

Convert colors, check contrast and color-vision previews, and generate gradients, shadows, grids and fluid type. Review styles in their intended page context.

Updated 7 min read

Choose an operation for your task

Convert colors, check contrast and color-vision previews, and generate gradients, shadows, grids and fluid type. Review styles in their intended page context.

Which operation fits?
Your taskWhere to start
Check text readabilityCheck the actual foreground/background contrast pair
Check whether chart colors stay distinctPaste 2–12 palette HEX values into the color-vision preview; compare numbered swatches across three simulations and grayscale
Style a componentPreview gradients, shadows and radii on the intended background
Make a repeating page backgroundChoose dots, grid or diagonal; download one SVG tile and repeat it at its intrinsic pixel size
Adapt to different screensEnter the start/end font sizes and viewport widths; set the root-size assumption, then copy the rem/vw clamp
Build a card grid for an unknown container widthChoose a minimum card width and gap; compare 280px and available-width previews, then test real cards
Tune multiple image filters togetherMove brightness, contrast, saturation, grayscale and blur sliders; compare before and after on a sample or local image

Work in order and retain the original

Compare foreground/background text pairs, then check the design in light and dark contexts. For chart or UI palettes, enter the colors together and compare their order in the color-vision preview. This approximates palette differences; it does not test a finished chart, certify accessibility, or replace labels, shapes and user testing. For fluid type, set both size/width endpoints and the assumed root font size; inspect the midpoint, narrow wraps and 200% browser zoom on the target page.

For a patterned background, inspect the repeated SVG preview, download the single tile, and use background-repeat at its intrinsic pixel size. Percentage or fractional background scaling may create seams; verify the result and text contrast in the final page.

For card grids, auto-fit changes the number of equal columns with container width, while min(100%, the chosen width) lets one column shrink inside a narrow container. Preview cards are samples only; rows and content wrapping must be verified in the target component.

For CSS filters, compare the same image before and after, then copy the full filter chain. The optional local photo is a preview source only; the exported CSS does not alter image bytes. Filters also affect child content when applied to a parent element. This manual builder does not solve for a target HEX color.

Representative workflow and expected result
Black on white has a 21:1 contrast ratio. Real components also need visible focus, non-color cues and adequate text sizing.

Separate processing success from acceptance

Preview exported CSS or SVG in the target component. Check focus, hover and disabled states; a static swatch cannot represent all interactions.

Before you finish

Expand a tool below for its steps, options and limits. Choose the tools needed for your task; you do not need to use every one.

  • Preview exported CSS or SVG in the target component. Check focus, hover and disabled states; a static swatch cannot represent all interactions.
  • Reopen the download and compare it with the example and the meaning of the input.
  • When an input exceeds the stated boundaries, retain it and split the task or use a suitable processor; renaming an extension does not make it compatible.

References

Tools in this category

Expand a tool to see its steps, options and supported formats, then open its workspace.

Color converterSame color. A different format.

Paste one HEX, RGB(A) or HSL(A) color and copy its equivalent HEX, RGB(A) or HSL(A) value. HEX shorthand and alpha are supported; decimal display values are rounded.

Steps

  1. Paste content into “HEX / RGB / HSL”, or load the example to try it.
  2. Check your input, then select “Convert color”.
  3. Copy the format you need from its result row, or download the complete JSON.

Capabilities and limits

  • Pasted text is limited to 1 MiB; review the result before using it.
Open Color converter →
Contrast checkerCheck the contrast between text and background colors.

Compute the WCAG sRGB contrast ratio after alpha-compositing onto an explicit opaque background. Thresholds apply to this color pair only, not to whole-site accessibility compliance.

Steps

  1. Enter a text color and a background color, or load the example to try them.
  2. Review Opaque compositing background before selecting “Check contrast”.
  3. Review the ratio, effective colors and AA/AAA text thresholds; copy a color or download the JSON result.

Available options

Opaque compositing background
#ffffff

Capabilities and limits

  • Pasted text is limited to 1 MiB; review the result before using it.
Open Contrast checker →
Gradient makerFind a blend you love. Copy the CSS.

Build a linear or radial CSS gradient from validated color stops and positions. Stops are sorted by position, and preview and copied CSS use the same generated value.

Steps

  1. Adjust at least two color stops and their positions; add more if needed. The JSON editor is available for precise edits.
  2. Choose linear or radial. For a linear gradient, set its angle before selecting “Generate gradient CSS”.
  3. Inspect the preview, then copy or download the CSS.

Available options

Gradient type
Linear · Radial
Angle (degrees)
90

Capabilities and limits

  • Pasted text is limited to 1 MiB; review the result before using it.
Open Gradient maker →
Palette and color mixingGenerate rule-based palettes or compare weighted RGB color mixtures.

Create a repeatable palette from one HEX, RGB(A) or HSL(A) seed using a color rule, or mix two six-digit HEX colors by weighted sRGB channels. Copy individual colors after checking them in your design.

Steps

  1. Choose palette generation or RGB mixing in Settings; only controls for that task are shown.
  2. Enter a base color; for mixing set the second color and ratio, or choose a palette rule.
  3. Review the swatches and copy individual HEX values, or download the complete result.

Available options

Task
Generate palette · RGB mixing
Color rule
Analogous · Complementary · Triadic · Monochromatic
Number of colors
5
Second color
#ffffff
Second color percentage
50

Capabilities and limits

  • Pasted text is limited to 1 MiB; review the result before using it.
  • Palette accepts HEX, RGB(A) or HSL(A); mixing requires two six-digit HEX colors. Check results in the target design.
  • Very low-saturation seeds vary lightness because rotating their hue would not produce distinct visible colors.
  • Files and input are processed in this browser. No account needed.
Open Palette and color mixing →
CSS shadow and radiusCompose layered shadows with optional individual border-radius values.

Compose layered shadows with optional individual border-radius values. Generate up to five validated box-shadow layers from x, y, blur, spread, color and inset fields. The preview uses the same safe CSS as the copied result.

Steps

  1. Set the existing layer's color, offsets, blur and spread. Add more shadows as needed, up to five layers.
  2. Enable border radius if needed, then set linked or individual corners before generating CSS. The JSON editor below the layer controls is optional.
  3. Review the CSS result, then use the available copy or download controls.

Available options

Include border radius
Off by default
Link all corners
On by default
Unit
Pixels · Percent
Top left
16
Top right
16
Bottom right
16
Bottom left
16

Capabilities and limits

  • Pasted text is limited to 1 MiB; review the result before using it.
Open CSS shadow and radius →
Color vision previewCompare a chart or UI palette under three color-vision simulations and grayscale.

Paste 2–12 HEX colors from a chart, legend, map, or interface. Compare the same palette under protanopia, deuteranopia, and tritanopia simulations, then save the color table.

Steps

  1. Enter 2–12 six-digit HEX colors from the same design, one per line or separated by spaces or commas.
  2. Preview all three simulations and the grayscale reference side by side in the same numbered order.
  3. Look for colors that become difficult to tell apart. Revise the design with non-color cues and check text contrast separately. Copy or download the CSV if needed.

Capabilities and limits

  • Simulations use Machado et al. (2009) severity-1 matrices on linear-light sRGB; displays and individual vision vary.
  • A palette preview does not simulate a finished image, certify accessibility, or replace tests with people. Use labels, shapes, or patterns as well as color.
  • Input stays in this browser. The downloadable CSV contains the original and simulated HEX values.
Open Color vision preview →
Fluid type clamp generatorCalculate CSS clamp() for a font size that grows between two viewport widths, with rem bounds and an adjustable root-size assumption.

Enter the font sizes and viewport widths where scaling should start and end. Copy the CSS and check the computed sizes at both breakpoints. The rem conversion uses the root font size you provide.

Steps

  1. Enter the small and large font sizes and their viewport widths. Adjust the assumed root font size if your design uses a value other than 16px.
  2. Generate CSS and compare the displayed sizes at the two endpoints and midpoint.
  3. Copy or download the CSS, then test it in your layout at narrow and wide widths and with browser zoom.

Available options

Small font size, px
16
Large font size, px
32
Start viewport, px
375
End viewport, px
1440
Assumed root font size, px
16

Capabilities and limits

  • Uses a fixed root-font-size assumption to convert input pixels to rem; a changing site root size moves the effective breakpoints.
  • A rem/vw clamp does not by itself establish accessibility. Test browser zoom, text enlargement and reflow in your actual page.
  • Input stays in this browser. No account is needed.
Open Fluid type clamp generator →
SVG pattern generatorDownload a seamless single-tile SVG for dot, grid or diagonal web backgrounds.

Choose a motif, size and colors, then preview a repeated field. Download the exact one-tile SVG and use it at its intrinsic pixel size as a CSS background.

Steps

  1. Choose dots, grid or diagonal lines and set the tile size, dot radius or line width, foreground and background colors.
  2. Generate the pattern and inspect the larger repeated preview for density and tile alignment.
  3. Download result.svg, or copy the SVG and CSS example. Keep the file path and intrinsic tile size when applying the CSS.

Available options

Pattern
dots · grid · diagonal
Tile size, px
24
Dot radius / line width, px
2
Foreground HEX
#0b876f
Background HEX
#f3f7f5

Capabilities and limits

  • Dot, grid and diagonal motifs only; 4–200px whole-pixel tiles, dot radius or line width 0.5px to half the tile size, and six-digit HEX colors.
  • Keep the tile at its intrinsic size for aligned repetition. Percentage background sizing or fractional scaling can show browser seams; check contrast in the final design.
Open SVG pattern generator →
CSS grid generatorGenerate a card grid that adapts to container width, with a narrow preview and copyable CSS.

Choose a minimum card width and gap. Preview content in a narrow container and in the available page width, then copy CSS that fits equal columns automatically.

Steps

  1. Enter the minimum card width, gap and preview card count.
  2. Compare the 280px sample with the available-width sample using actual content-sized cards.
  3. Generate the CSS, copy or download it, then test it inside the target container.

Available options

Minimum card width, px
220
Gap, px
16
Preview cards
4

Capabilities and limits

  • Minimum card width 120–600px; gap 0–64px. Preview card count 1–12 changes only the sample, not the CSS.
  • auto-fit expands remaining cards and creates rows from content. Test long unbroken content and the final container.
  • CSS is generated in this browser. No account needed.
Open CSS grid generator →
CSS filter generatorCombine CSS image filters with live before/after previews, then copy the generated rule.

Move sliders to tune brightness, contrast, saturation, grayscale, sepia and blur together. Compare the original with the filtered view on a sample or your own local image before copying the CSS.

Steps

  1. Choose a quick look or tune each filter with sliders and numeric inputs.
  2. Compare before/after on the sample or choose your own local image for the preview.
  3. Generate, copy or download the CSS rule and test it on the final element.

Available options

Brightness, %
100
Contrast, %
100
Saturation, %
100
Grayscale, %
0
Sepia, %
0
Blur, px
0

Capabilities and limits

  • Brightness and contrast 0–200%, saturation 0–300%, grayscale 0–100% (whole percentages); blur 0–20px with one decimal place. Sepia accepts whole percentages from 0–100%. Order is fixed: brightness, contrast, saturation, grayscale, sepia, blur.
  • Optional local PNG, JPG or WebP image up to 10 MB is used for preview only. The output is CSS, not an edited image.
  • Filter order and target content affect rendering. This tool does not calculate a filter to match a target HEX color.
Open CSS filter generator →

Tools used in this article

Color converter →Same color. A different format.Contrast checker →Check the contrast between text and background colors.Gradient maker →Find a blend you love. Copy the CSS.Palette and color mixing →Generate rule-based palettes or compare weighted RGB color mixtures.CSS shadow and radius →Compose layered shadows with optional individual border-radius values.Color vision preview →Compare a chart or UI palette under three color-vision simulations and grayscale.Fluid type clamp generator →Calculate CSS clamp() for a font size that grows between two viewport widths, with rem bounds and an adjustable root-size assumption.SVG pattern generator →Download a seamless single-tile SVG for dot, grid or diagonal web backgrounds.CSS grid generator →Generate a card grid that adapts to container width, with a narrow preview and copyable CSS.CSS filter generator →Combine CSS image filters with live before/after previews, then copy the generated rule.