Color Code Converter

A color tool that converts between HEX / RGB / HSL / HSV. Just pick a color and the CSS code is generated for every format. Contrast ratio is calculated automatically.

100% Free No signup Browser-only 5 languages Dark mode

HEX

RGB

HSL

HSV

CSS format

Contrast ratio

White background (#FFF)

Black background (#000)

WCAG AA: 4.5+ for normal text, 3.0+ for large text / AAA: 7.0+ for normal text

Tone variations

If something is broken or not displaying correctly, let us know via the contact form.

📖 Where people get stuck

Converts between HEX, RGB, HSL, HSV and CMYK, and alongside that gives you the WCAG contrast ratio, tonal variations and the nearest Tailwind colour. Everything runs in the browser. The contrast ratio is the WCAG 2.x formula applied literally, not a measure of readability — the formula ignores hue, ignores saturation and ignores font weight, so combinations that pass and still cannot be read are easy to produce.

Case	What happens	What to do
It clears the contrast ratio and is still hard to read	The WCAG 2.x contrast ratio is computed from relative luminance alone. A hairline typeface and a heavy one therefore produce exactly the same number. Fourteen-pixel text at `font-weight: 300` and at `font-weight: 700` differ enormously in practice, and the formula does not distinguish them. The other trap is highly saturated colour: vivid blue or magenta text can have an ample ratio and still be hard for the eye to focus on, thanks to chromatic aberration, and tiring over long passages. Passing the threshold and actually being read through are different questions.	Treat 4.5 as the floor, not the target. Aim for 7 or above (AAA) in body text — in particular, grey body copy around `#666` only reaches about 5.7 on white, and older readers or an outdoor screen genuinely cannot read it. If you use a light weight, compensate by going one step higher on the ratio. When you need something closer to perception, look at APCA, the candidate for WCAG 3: it reflects the fact that dark and light backgrounds need different amounts of contrast, which WCAG 2.x treats symmetrically — the reason its numbers feel most wrong when you are designing dark mode.
The colour in the design tool does not match the screen	The same `#4A90D9` emits a different colour depending on which colour space interprets it. If Figma or Photoshop is working in Display P3 or Adobe RGB, the identical number looks more vivid there than it does in a browser working in sRGB — that is almost always the story behind a brilliant blue on the designer screen turning slightly muted once implemented. And since recent devices ship P3-capable displays, we are now at the point where the same browser and the same CSS look different from one device to the next.	Set sRGB as the working space for anything destined for the web; design tools let you state it explicitly. When choosing brand colours, always compare real devices side by side in an actual browser. If you deliberately want a wider gamut, `color(display-p3 0.2 0.6 0.9)` exists and renders vividly on capable displays while falling back to a near sRGB equivalent elsewhere — but branch on `@supports`, or write the sRGB version first and override it. CMYK values here are indicative only: the real colour depends on paper and ink, so decide print colours from a physical swatch.
Equal HSL lightness does not look equally bright	The L in HSL is not perceptual lightness. It is simply the average of the maximum and minimum RGB channels, and it takes no account of the eye being sensitive to green and insensitive to blue. Concretely, `hsl(60 100% 50%)` (yellow) and `hsl(240 100% 50%)` (blue) share an L of 50 percent while their relative luminance differs by roughly nine times — put them side by side and only the yellow leaps out. That is why a design-system palette generated mechanically in HSL comes out with uneven weight across hues.	If you are building a palette systematically, use OKLCH: write `oklch(70% 0.15 250)` and changing only the hue, the last value, keeps the lightness matched. That is precisely what OKLCH was designed for, and CSS supports it in every major browser from 2023 onward. Fixing an existing HSL palette means adjusting L per hue by hand — lower it for yellows and cyans, raise it for blues and purples. The most reliable way to check your work is to view the palette in greyscale: if the lightness really matches, every swatch reads as the same grey.

Never convey information by colour alone (WCAG 1.4.1). An interface that says error in red and success in green is indistinguishable to roughly five percent of Japanese men, one in twenty — about eight percent of men worldwide. Always pair it with an icon, a symbol or a word, as in a cross for error and a tick for done. Avoid distinguishing chart series by colour alone for the same reason; use line styles or place labels directly on the lines. Second: when inverting colours for dark mode, keeping the saturation makes them glare — the same saturation reads as stronger contrast against a dark ground, so the usual move is to drop accent saturation by ten to twenty percent and raise the lightness. Pure white (#FFF) text on pure black (#000) is tiring and best avoided too; something nearer #E8E8E8 on #121212 reads much more comfortably.

📖 How to Use

1

Pick a color

Use the color picker or type HEX / RGB / HSL directly.
2

See all formats

HEX / RGB / RGBA / HSL / HSV / CMYK update instantly.
3

Check contrast ratio

WCAG contrast ratio (AA/AAA) against background is shown — essential for a11y.

❓ Frequently Asked Questions

What are the WCAG contrast ratio requirements?

Normal text: AA 4.5:1, AAA 7:1. Large text (18pt+): AA 3:1, AAA 4.5:1.

Difference between HEX and RGB?

HEX (#FF5733) is hex representation of 3 bytes. RGB shows the same info in decimal. HEX is shortest for CSS/HTML; RGB is easier for alpha.

When to use HSL vs HSV?

HSL (hue/sat/lightness) is great for design-system tone ramps. HSV (hue/sat/value) is intuitive for color picker UIs.

Does it support Tailwind color palette?

We suggest the nearest Tailwind color (e.g., gray-500, blue-600) for the picked color.

🐛 Found a bug or issue with this tool?

Free to use, no signup. Even just the steps to reproduce are helpful. Reports go directly to the operator and help us fix issues.