Color Converter — Online HEX, RGB, HSL Converter _

What is color conversion?

Every colour your browser renders is ultimately an sRGB triple — three numbers between 0 and 255 for the red, green, and blue channels, plus an optional alpha. The CSS Color Level 4 specification defines several text formats that round-trip to the same triple, plus the perceptually-uniform OKLCH space. This tool reads any of them, converts to all of them, and reports the WCAG 2.1 contrast ratio against a second colour so you can ship accessible interfaces with confidence.

How does color conversion work?

Conversion is a series of well-defined linear and non-linear transforms. Every step runs in your browser — no input ever reaches our servers:

1. Your input is parsed. The tool auto-detects 3, 4, 6, or 8-digit HEX, the functional forms rgb()/rgba()/hsl()/hsla()/hsv()/hwb() in either legacy comma syntax or modern slash-alpha syntax, or any of the 150 named CSS colours (rebeccapurple included).
2. The parsed colour is normalised to canonical sRGB — four floats {r, g, b, a} each in the range 0–1. This is the single source of truth that every output format is derived from.
3. HEX comes from rounding each channel to its 0–255 byte value and joining the hex digits. RGB / RGBA print the same bytes. HSL and HSV apply the standard W3C cylindrical-coordinate algorithms; HWB derives hue from HSV, whiteness from min(r, g, b), and blackness from 1 - max(r, g, b).
4. CMYK is a naive approximation — k = 1 - max(r, g, b), then c, m, y from the residual channels. It is suitable for screen preview but not for print: real CMYK output requires an ICC profile that this tool intentionally does not embed.
5. OKLCH follows the css-color-4 forward path: sRGB is linearised, multiplied through the LMS matrix, cube-rooted, multiplied through the LMS-to-OKLab matrix, and finally converted from rectangular OKLab to polar OKLCH. OKLCH is perceptually uniform, which makes it the right space for designing palettes that look balanced to the human eye.

Why use this color converter?

• Privacy: every conversion runs in your browser using plain JavaScript. The colour you paste never leaves your device, which matters for unreleased brand work, internal design systems, and client mocks under NDA.
• Designer-to-developer handoff: paste the HEX from Figma and read back the rgb() string for a Tailwind config, the hsl() string for a CSS custom property, or the oklch() string for a modern palette — every format in one place, no copy-pasting between tabs.
• WCAG accuracy: the contrast checker uses the exact WCAG 2.1 relative-luminance formula and the published AA (4.5 / 3.0) and AAA (7.0 / 4.5) thresholds for normal and large text. The reported ratio matches manual calculators to within 0.01.
• Dark-mode and palette derivation: HSL and OKLCH expose lightness as a single channel, so it is straightforward to shift a brand colour up or down the lightness axis to derive matched dark-mode tokens or to generate a 10-step palette ramp from a single seed.

What are common applications of color conversion?

Colour conversion shows up across web development, design, and accessibility work:

• Design systems: converting a brand HEX into the matched HSL and OKLCH tokens for a CSS custom-property scale, then verifying that every token combination passes WCAG AA against the page background.
• Accessibility audits: pasting a foreground and background pair from a real product screen and reading off the contrast ratio plus AA/AAA verdicts for both normal-weight and large-weight text in a single glance.
• Cross-tool round-trips: pulling a colour from a screenshot picker (HEX), pasting it here, and copying the hsl() or oklch() string straight into Tailwind, Figma tokens, or a CSS-in-JS theme.

What does a color conversion example look like?

Take the famous rebeccapurple. The named-colour lookup resolves it to #663399. RGB conversion gives rgb(102, 51, 153). HSL conversion gives hsl(270, 50%, 40%) — a violet hue, half-saturated, four-tenths bright. Checking that colour against pure white with the contrast tool returns a ratio near 7.39, which clears AAA (7.0) for normal text and AAA (4.5) for large text — a strong, accessible foreground choice. Round-tripping #663399 through RGB → HSL → RGB → HEX returns the original string exactly, byte for byte.

Use this converter as a quick reference for any colour you encounter — in code, in design files, or in a screenshot — and the contrast checker as a sanity check before shipping. Everything runs locally, nothing is logged, and the conversion math follows the published W3C and WCAG specifications so the numbers match what your audit tool or browser devtools would report.