English
Convert between HEX, RGB, HSL, and OKLCH with a live preview.
Last updated
#B18CFFrgb(177, 140, 255)hsl(259, 100%, 77%)oklch(72.2% 0.165 296.9)A color converter takes a color in any common format — HEX, RGB, HSL, OKLCH — and shows you every other format that represents the same color. It's the everyday tool for designers and developers when matching brand colors, debugging CSS variables, comparing dark- and light-mode palettes, or checking accessibility contrast.
CSS supports several color models, and each one has strengths. HEX and RGB describe colors in terms of red, green, and blue light. HSL is more intuitive (hue, saturation, lightness). OKLCH is a perceptual model where equal numerical changes look like equal perceptual changes — which makes it especially useful for generating tints, shades, and accessible palettes.
Accessibility comes from contrast, not just color. WCAG defines a contrast ratio between text and background — at least 4.5:1 for normal body text, 3:1 for large headings. A good color tool reports both numbers next to your color so you don't ship inaccessible UI by accident.
#ff8800 is the same as rgb(255, 136, 0).L by 10% in OKLCH looks like roughly the same lightness change for any hue. HSL doesn't behave that way.Paste any HEX, RGB, HSL, or OKLCH value, or pick a color from the eyedropper / native picker.
The converter shows the same color expressed in every supported format. Click any value to copy it to your clipboard.
Drag the lightness slider for tints (lighter) and shades (darker). Use OKLCH lightness for visually consistent steps.
The contrast panel shows the WCAG ratio against both white and black. Aim for ≥ 4.5 for body text and ≥ 3 for large headings.
Use the format that matches your codebase — HEX for design tokens, OKLCH for modern palettes, HSL when you want to tweak with calc().
The five formats you'll meet day-to-day, with examples for the same color. Full color-syntax reference on MDN's <color> page.
| Format | Syntax | Example (orange) |
|---|---|---|
| HEX | #RRGGBB or #RGB | #ff8800 |
| HEX with alpha | #RRGGBBAA | #ff880080 (50% transparent) |
rgb() | Red, green, blue 0–255 | rgb(255 136 0) |
rgb() with alpha | Modern slash syntax | rgb(255 136 0 / 0.5) |
hsl() | Hue 0–360°, sat 0–100%, light 0–100% | hsl(32 100% 50%) |
oklch() | Lightness 0–100%, chroma, hue | oklch(74% 0.18 50) |
| Named | CSS named color (147 of them) | darkorange |
color: #6c8cff;color: rgb(108 140 255);color: hsl(228 100% 71%);color: oklch(67% 0.16 268);All four declarations produce the exact same blue. Picking one for your design tokens is mostly a matter of how you want to tweak them later.
--brand: oklch(67% 0.16 268);--brand-light: oklch(78% 0.12 268);--brand-lighter:oklch(88% 0.08 268);--brand-dark: oklch(55% 0.18 268);--brand-darker: oklch(40% 0.16 268);Holding hue (268) and chroma fixed and stepping lightness produces a consistent palette where every step *looks* like the same delta — which HSL doesn't guarantee.
background: rgb(108 140 255 / 0.5);background: #6c8cff80;/ 0.5 is the modern CSS way to add alpha. The HEX form appends a two-digit alpha byte (80 ≈ 50%).
hsl(60 100% 50%) (yellow) and hsl(240 100% 50%) (blue) have the same L but very different perceived brightness — use OKLCH for visual comparisons.#abc) is shorthand for the 6-digit form (#aabbcc).rgba(...) instead of the modern rgb(... / alpha) syntax — both work, but the slash form is the current spec and easier to read in tooling.#RR, GG, BB) and convert each pair from hexadecimal to decimal. Or paste the value into a color converter and read the RGB result instantly.L doesn't always look equally bright. OKLCH is perceptually uniform, so it's better for generating consistent tints, shades, and accessible palettes.