Color Converter

Runs in browser Utilities

Parse any CSS color string and get every representation, WCAG contrast against white and black, and lighter/darker variants.

Privacy: This tool runs entirely in your browser. Your input never leaves your device.

What is the difference between hex, RGB and HSL colours?

They are three notations for sRGB colours: #1e90ff writes the red, green and blue channels as two hex digits each; rgb(30 144 255) writes the same channels as decimals from 0 to 255; hsl(210 100% 56%) describes the hue on a 360° wheel, its saturation and lightness, which makes "a lighter shade of the same blue" a change of one number. CSS Color Level 4 defines all three plus alpha, and its conversion formulas are exact, but HSL is usually written with rounded numbers: hsl(210 100% 56%) is #1f8fff, not exactly #1e90ff, whose precise HSL is about hsl(209.6 100% 55.9%).

How to use Color Converter

  1. Enter a colour in any notation.
  2. Optionally set a background to test contrast against.
  3. Copy the representation you need from the table.

Color Converter features

  • Parses HEX, rgb(a), hsl(a), hsv/hsb, hwb, cmyk and 148 named colours
  • Every representation including modern space-separated CSS syntax
  • WCAG contrast ratios and AA/AAA verdicts on white, black and a custom background
  • Lighter/darker steps, tints, shades, inversion and colour harmonies
  • Live swatch with alpha checkerboard and sample text
  • Exact or nearest CSS colour name

Color Converter example

Convert a brand colour

Input:

#1266f0

Output:

rgb(18, 102, 240) · hsl(217, 88%, 51%) · cmyk(93%, 57%, 0%, 6%) · contrast on white 5.02:1 (AA)

Frequently asked questions about Color Converter

Which color formats can I enter?

HEX (3, 4, 6 or 8 digits, with or without #), rgb()/rgba() in comma or space syntax, hsl()/hsla(), hsv()/hsb(), hwb(), cmyk() and all 148 CSS named colors.

How is WCAG contrast calculated?

Using the WCAG 2.x relative luminance formula. AA requires 4.5:1 for normal text (3:1 for large text); AAA requires 7:1 (4.5:1 for large). Translucent colors are composited on the chosen background first.

Is CMYK accurate for print?

It uses the standard naive RGB → CMYK conversion, which is fine for previews. Print workflows need an ICC profile for exact results.

What are the harmony rows?

Colors at fixed hue offsets — complementary (180°), analogous (±30°), triadic (120°), split-complementary (150°/210°) and tetradic (90°) — useful as starting points for palettes.

Technical notes

Channels stay floating point throughout — hsl(217 86% 51%) parses to r 22.593, g 104.977, b 237.507 — and are rounded only when each notation is formatted, so hex, rgb(), hsl(), hwb() and cmyk() derive from the same unrounded value. Parsing follows CSS Color 4: comma or space separators, '/' alpha, hue in deg, grad, rad or turn, 'none' as 0 for channels, and out-of-range channels clamped (rgb(300,-5,12) → 255,0,12), not rejected.

Only sRGB is supported: lab(), lch(), oklch() and color() are rejected, with no gamut mapping. Relative luminance uses the WCAG 2.0 linearisation threshold 0.03928, not sRGB's 0.04045 (identical for integer channels); CMYK is the naive k = 1 − max(r,g,b). Lighter/darker add absolute points to HSL lightness, tints and shades mix in sRGB at 20/40/60/80% (not linear light), harmonies rotate HSL hue, and the nearest name uses Euclidean RGB distance, not perceptual ΔE.

References

  • CSS Color Module Level 4W3CThe colour syntaxes browsers accept — hex, rgb(), hsl(), hwb(), lab() and more — and how they convert between each other.