Pick a color once, get HEX, RGB, HSL, an accessibility contrast score, and a matching palette out the other end.
Free design tool
Color Converter & Palette
HEX, RGB, HSL — all three stay in sync. With a live preview, WCAG contrast check, and a matching palette.
Click any swatch to load it back into the converter.
What each format is best for
HEX is the compact hexadecimal notation used in most CSS and design tools. RGB spells out the same values as red/green/blue channels (0–255) and is what you'll use when adjusting opacity via rgba(). HSL represents the color as hue, saturation, and lightness — much easier to reason about when you need "the same color, a shade lighter" or want to generate a palette.
Color converter FAQ
How do I convert HEX to RGB?
Type or paste any HEX color (with or without the #) into the box above and the RGB and HSL values update immediately. All three formats stay in sync — edit any one of them and the others follow.
What is the difference between HEX, RGB and HSL?
HEX and RGB describe the same color in different notation: HEX #0048ad and rgb(0, 72, 173) are identical. HSL splits the color into hue (position on the color wheel), saturation (how vivid) and lightness, which makes it easier to reason about adjustments like "the same color, a bit lighter."
How does the contrast checker work?
It calculates the WCAG 2.1 contrast ratio between your color and both pure white and pure black, then flags whether each combination passes AA (4.5:1 for normal text) or AAA (7:1). This is what web accessibility audits check against.
What is a complementary color?
The color sitting directly opposite yours on the color wheel — 180° away in HSL. Complementary pairs create high visual contrast, which makes them useful for accent colors, call-to-action buttons, and anywhere you want an element to stand out.
Is this color converter free and private?
Yes. It runs entirely in your browser, no color values are uploaded, and there is no sign-up. Safe to use on client work, brand colors and anything else you would rather not paste into a random online tool.
Free color converter by ANUPRESS
Why “matches WCAG AA” matters more than it sounds
A color that looks fine on your designer’s calibrated monitor can fail on a phone in daylight. WCAG AA is the accessibility floor most audits check against, meaning a 4.5:1 contrast ratio for normal body text against its background. The converter above shows your color’s ratio against both pure white and pure black, so you can tell at a glance whether that new brand accent is safe for buttons and links, or only good for large headlines.
HSL is the format worth learning
Designers usually reach for HEX because it’s what CSS files are full of, but HSL is easier to reason about the moment you need a variation. Hue tells you where the color sits on the color wheel, saturation how vivid it is, and lightness how close to white or black. Want a slightly darker version of your brand purple? Drop the lightness by 10%. Want a matching hover state? Same hue, different lightness. That’s why the palette below the tool works in HSL under the hood.
Complementary, analogous, triadic: what the palette gives you
Rotating around the color wheel from your starting color generates the classic color harmonies designers use for palettes. Complementary (180°) creates high-contrast pairs, useful for accent colors on top of a base. Triadic (±120°) gives you three well-spaced colors that work together. Analogous (±30°) gives softer, closer-related shades for backgrounds and secondary elements. All five swatches in the strip below the converter are clickable, tap one to load it into the tool and see its own conversions and palette.
Where this fits in a real workflow
Two common cases: sanity-checking a brand palette before handing it to developers, and picking chart or dashboard colors that stay readable when someone reduces the browser zoom. If you’re building a data dashboard (say, using the Advanced Charts for Grist widget on this site), running each series color through the contrast checker against your chart background prevents the “beautiful pastel palette nobody can read” problem.