ImgColorPicker

CSS design tools

Build the visual details of an interface without fiddling with numbers in a code editor. Design a gradient or a layered shadow with live previews, check that text is readable against WCAG 2.2 and APCA, and turn a brand color into a full Tailwind scale.

CSS Gradient Generator Design beautiful gradients visually and copy production-ready CSS. Box Shadow Generator Design soft, realistic shadows with multiple layers and copy the CSS. Contrast Checker Make sure your text is readable for everyone. Check any color pair against WCAG 2.2. Tailwind Palette Generator Turn one brand color into a complete 50–950 scale and export it for Tailwind or plain CSS.

Every tool outputs clean, copy-ready code: plain CSS, CSS variables, SCSS or Tailwind, so what you see is exactly what ships.

What you can do with these tools

  • CSS Gradient Generator: Create linear, radial and conic CSS gradients with multiple color stops. Live preview, copy the CSS or Tailwind code, and download the gradient as a PNG.
  • Box Shadow Generator: Create CSS box shadows visually: offset, blur, spread, color, inset and multiple layers. Live preview and one-click copy of the CSS code.
  • Contrast Checker: Check text and background contrast against WCAG 2.2 AA and AAA, plus APCA. Get suggested accessible colors, a live preview and saved color pairs.
  • Tailwind Palette Generator: Generate a full Tailwind CSS color scale (50 to 950) from one color. Export for tailwind.config.js, Tailwind v4 @theme, CSS variables or SCSS.

Design details that make an interface feel polished

Soft, layered shadows give depth without clutter. Gradients interpolated in OKLab or OKLCH avoid the dull gray band that default sRGB gradients can produce. A consistent color scale, such as Tailwind's 50 to 950 steps, keeps backgrounds, borders and text in harmony. These tools give you each of those details with a live preview.

Accessibility built in

The Contrast Checker tests text and background pairs against WCAG 2.2 levels AA and AAA and the newer APCA method, and suggests the closest colors that pass. The Tailwind palette generator marks which text color passes on every swatch, so accessible combinations are easy to find from the start.

Free, private and made for the browser

Every tool on ImgColorPicker is free and needs no account. Images are opened by your own browser and processed on your device, so they are never uploaded to a server. Settings, saved colors and palettes are remembered in your browser for your next visit, and you can clear them at any time from the footer.