Colour Converter — HEX, RGB, HSL, HWB & OKLCH
Convert between every CSS colour notation, with WCAG contrast ratios against white and black shown for each result.
Color Code Converter
Convert colors between HEX, RGB, HSL, HSV, and CMYK with live preview.
#3B82F6rgb(59, 130, 246)rgba(59, 130, 246, 1)hsl(217, 91%, 60%)hsla(217, 91%, 60%, 1)hsv(217, 76%, 96%)cmyk(76%, 47%, 0%, 4%)--color: #3B82F6;[#3B82F6]The notations, and what each is for
| Format | Example | Good for | Limitation |
|---|---|---|---|
| HEX | #3b82f6 | Compact, universal, what design tools export | Unreadable — you cannot tell from the digits whether it is light or saturated |
| RGB | rgb(59 130 246) | Direct mapping to how a display emits light | Same readability problem; adjusting brightness means changing all three channels |
| HSL | hsl(217 91% 60%) | Human-adjustable — hue, saturation and lightness are separate dials | "Lightness" is not perceptual. HSL 50% yellow looks far brighter than HSL 50% blue |
| HWB | hwb(217 23% 4%) | Mixing a hue with white and black, which matches how paint behaves | Less widely used; same perceptual non-uniformity as HSL |
| OKLCH | oklch(62% 0.19 254) | Perceptually uniform — equal numeric steps look like equal visual steps | Can express colours outside sRGB, which then clip on standard displays |
Why OKLCH is worth switching to
HSL has a flaw that shows up the moment you try to build a systematic palette: its lightness channel does not correspond to perceived brightness. hsl(60 100% 50%) is yellow and hsl(240 100% 50%) is blue — identical lightness values, wildly different apparent brightness. Any palette built by holding L constant across hues will look uneven, and no amount of adjustment fixes it because the model itself is wrong about brightness.
OKLCH is built on the Oklab perceptual colour space, where the lightness channel does track human perception. Generate a set of hues at oklch(62% 0.19 h) and they genuinely read as the same brightness. That is what makes it possible to define a design system where "the 500 step" means the same thing for every hue, and where a dark-mode variant can be derived by shifting lightness rather than hand-picking every colour again.
The lightness channel is also directly useful for accessibility: because it is perceptual, OKLCH lightness correlates far better with contrast ratio than HSL lightness does, so you can reason about whether text will pass before measuring.
The trade-off is gamut. OKLCH can describe colours more saturated than an sRGB display can show, and those clip — sometimes with a visible hue shift. Browsers handle this reasonably, but if a colour looks duller than the numbers suggest, out-of-gamut clipping is why. Chroma values above roughly 0.37 are outside sRGB for most hues.
WCAG contrast thresholds
Contrast ratios run from 1:1 (identical) to 21:1 (black on white). The thresholds that matter:
| Requirement | Ratio | Applies to |
|---|---|---|
| AA — normal text | 4.5:1 | Body text under 18pt (24px), or under 14pt (18.66px) bold |
| AA — large text | 3:1 | Text at 18pt/24px or larger, or 14pt/18.66px bold and larger |
| AA — UI components | 3:1 | Borders and icons that convey meaning, focus indicators |
| AAA — normal text | 7:1 | Enhanced level; required for some public-sector content |
| AAA — large text | 4.5:1 | Enhanced level for large text |
Contrast is computed from relative luminance and is independent of hue, so two colours can be far apart perceptually and still fail. Placeholder text and disabled controls are the most common failures in practice.
About
The Color Code Converter translates any color between the formats used in web development, graphic design, and print production. Pick a color using the visual color picker or type a HEX code directly, and instantly see the equivalent values in HEX, RGB, RGBA, HSL, HSLA, HSV, and CMYK. Each format card has a one-click copy button so you can paste the value directly into CSS, Sass, Tailwind config, Figma, or Photoshop. The live color swatch updates as you type.
How to use
- 1 Click the color swatch to open the browser color picker and choose any color visually.
- 2 Or type a HEX code directly into the text input (3-digit shorthand like #F00 is also supported).
- 3 All color format cards (RGB, HSL, HSV, CMYK, etc.) update instantly.
- 4 Click the copy icon on any card to copy that format's value to your clipboard.
- What is the difference between HSL and HSV?
- Both HSL and HSV represent colors using Hue (0–360°), Saturation, and a third component. In HSL (Hue, Saturation, Lightness), a Lightness of 50% is a "pure" color, 0% is black, and 100% is white. In HSV (Hue, Saturation, Value/Brightness), a Value of 100% is the brightest shade of the hue, and 0% is black. HSL is common in CSS; HSV is often used in color pickers and image editors like Photoshop.
- What is CMYK and when do I use it?
- CMYK (Cyan, Magenta, Yellow, Key/Black) is a subtractive color model used in color printing. Unlike RGB which adds light, CMYK subtracts light by layering ink. When sending designs to a professional printer, you typically need CMYK values rather than RGB or HEX. Note that the RGB–CMYK conversion here assumes sRGB; for print-accurate conversion, use professional design software like Adobe Illustrator.
- Why does my 3-digit HEX expand to 6 digits?
- CSS allows 3-digit HEX shorthand where each digit is doubled — #F60 is shorthand for #FF6600. The converter automatically expands 3-digit codes to their full 6-digit equivalents so all color format calculations are accurate.
- Is this tool useful for Tailwind CSS?
- Yes. Tailwind's JIT mode accepts arbitrary color values like bg-[#3B82F6]. The converter shows a ready-to-use Tailwind arbitrary-value hint alongside the HEX code. For adding a color to your tailwind.config, use the HEX value directly in your theme.colors object.
More in Generators & Utilities
See all generators & utilities.