Color Tools
Pick colors, convert between HEX, RGB, HSL, CMYK, build palettes and gradients, check WCAG contrast — every tool runs entirely in your browser. Open DevTools → Network and watch: nothing leaves your tab.
Built for designer and frontend workflows
Six color utilities that cover the daily flow: from picking a base color to generating a harmonious palette, building the CSS gradient, and validating accessibility against WCAG 2.1. Pages target Lighthouse 100 and load in under 100ms TTI.
Start with Color Picker if you need a single color, or jump to Contrast Checker when you have a pair to validate.
Color Picker
Pick any color visually or enter HEX, RGB, HSL. Copy color codes instantly.
Color Converter
Convert colors between HEX, RGB, HSL, HWB and CMYK with live preview.
Palette Generator
Generate harmonious palettes. Export to CSS variables, Tailwind config or SCSS.
WCAG Contrast Checker
Check WCAG 2.1 AA/AAA contrast ratios for normal and large text. Accessible by default.
CSS Gradient Generator
Build linear, radial, or conic CSS gradients visually. Copy the CSS in one click.
Color Blender
Blend two colors and generate intermediate stops. Great for hover states and gradients.
Frequently Asked Questions
Why so many color formats (HEX, RGB, HSL, HWB, CMYK)?
Each format has its context: HEX and RGB are universal on the web, HSL is best for hue and saturation tweaks, HWB is more intuitive for designers picking a base hue, CMYK targets print. The converter translates between all of them locally — no roundtrip.
Does the contrast checker comply with WCAG 2.1?
Yes — the ratio uses the WCAG 2.1 relative luminance formula, with AA and AAA badges for both normal and large text thresholds (4.5:1 / 3:1 for AA, 7:1 / 4.5:1 for AAA).
Can I export palettes to Tailwind, SCSS or CSS variables?
Yes, the palette generator exports to CSS custom properties, Tailwind config and SCSS. Pick the output format and copy.
Why no "extract palette from image" feature?
That would require uploading and processing an image. We're 100% client-side — no upload — so it's out of scope for now. We'll reconsider if demand grows enough to justify a pure in-browser implementation.
Does the conic gradient generator work in older browsers?
Conic gradients are supported in recent Chrome, Edge, Firefox and Safari. On older browsers the generated CSS is still copyable but won't render as expected — fall back to a linear or radial gradient.