Color Tools
The handful of color utilities every designer and frontend dev reaches for, in one place. Convert between hex and RGB, check WCAG contrast, or pull a palette out of any image — all client-side.
All color converters
Which format should I use?
Hex (#3b82f6) is the dominant CSS notation — compact and the format every design tool exports. RGB (rgb(59, 130, 246)) is what Canvas and image-processing APIs speak natively, and is required when you need an alpha channel via rgba(). HSL (hsl(217, 91%, 60%)) makes hue/saturation/lightness adjustments intuitive — bumping a brand color one step lighter or shifting hue without breaking saturation. WCAG contrast ratios decide whether text is readable: 4.5:1 is the minimum for AA normal text, 3:1 for AA large, 7:1 for AAA. And palette extraction — pulling the dominant colors from a hero image or moodboard — is how most brand systems get their starting point.
Frequently asked questions
Are my images uploaded for the palette tool?
No. The palette extractor runs k-means clustering on pixel data inside your browser — your image never leaves your device. The same is true for every tool here: hex/RGB conversion, contrast checking, all of it is pure client-side JavaScript.
Which contrast standard does the checker follow?
WCAG 2.1 — the relative-luminance formula from §1.4.3 (Contrast Minimum) and §1.4.6 (Contrast Enhanced). We report the ratio plus pass/fail for AA and AAA at both normal and large text sizes.
Does hex → RGB support shorthand like #fff?
Yes — three-digit hex (#fff, #abc) is expanded to six-digit form (#ffffff, #aabbcc) automatically. The leading # is optional too.
How many colors does the palette tool extract?
Six by default, ranked by how dominant each cluster is in the image. Click any swatch to copy its hex value — useful for grabbing brand colors from a logo or moodboard.
What about HSL and named colors?
HSL is shown alongside hex and RGB in the conversion tools. CSS named colors (e.g. tomato, rebeccapurple) aren't in the converter yet, but it's on the list — drop a request if you need it.