OnlineDevTool
Back to All Tools

Color Converter

Convert any CSS color between HEX, RGB, HSL, OKLCH, HSV and CMYK — with a live preview swatch, per-channel editor, and WCAG contrast checker.

Examples:
#3B82F6
HEX
#3B82F6

With alpha: #3B82F6FF

RGB
rgb(59 130 246)

59

130

246

HSL
hsl(217.22 91.22% 59.8%)
OKLCH
oklch(0.6231 0.188 259.8)

L: 0.6231   C: 0.188   H: 259.8°

All CSS values

HEX#3B82F6
RGBrgb(59 130 246)
HSLhsl(217.22 91.22% 59.8%)
OKLCHoklch(0.6231 0.188 259.8)
CMYKcmyk(76.02% 47.15% 0% 3.53%)

WCAG Contrast

vs White

3.68:1

vs Black

5.71:1

vs White✗ AA Normal✓ AA Large✗ AAA Normal✗ AAA Large
vs Black✓ AA Normal✓ AA Large✗ AAA Normal✓ AAA Large

Quick Swatches

Color Format Reference

HEX (#rrggbb)

The most common web format. Each pair of hex digits represents the red, green, and blue channel value (00–ff). Shorthand #rgb expands to #rrggbb. An optional alpha channel can be appended as #rrggbbaa.

RGB

Red, Green, Blue channels as integers 0–255. CSS syntax: rgb(r g b) (modern space-separated) or the legacy rgb(r, g, b) with commas. Each channel linearly maps to screen phosphor intensity.

HSL

Hue (0–360°), Saturation (0–100%), Lightness (0–100%). More human-intuitive than RGB — you can rotate the hue to shift the color family or reduce saturation to grey it out. Dark mode palettes often manipulate the lightness channel only.

OKLCH

OKLCH is a perceptually uniform color space defined by Lightness (0–1), Chroma (roughly 0–0.4), and Hue (0–360°). It is the recommended space for modern design systems because equal steps in L produce equal perceived brightness differences, and color-mix operations stay vibrant. CSS Color Level 4 natively supports oklch().

HSV / HSB

Hue, Saturation, Value (or Brightness). Differs from HSL in that maximum saturation always produces the “pure” hue, whereas HSL at maximum saturation still varies from black to white as lightness changes. Widely used in colour-wheel UIs (Photoshop, Figma).

CMYK

Cyan, Magenta, Yellow, Key (Black) — the subtractive color model used in print. Not natively supported in CSS but shows the theoretical ink mix for printing a given RGB color on paper (sRGB → CMYK conversion is approximate without a color profile).

WCAG Contrast

The Web Content Accessibility Guidelines (WCAG 2.1) define minimum contrast ratios to ensure text is legible for users with low vision:

  • AA Normal text — ratio ≥ 4.5:1
  • AA Large text (≥ 18pt or 14pt bold) — ratio ≥ 3:1
  • AAA Normal text — ratio ≥ 7:1
  • AAA Large text — ratio ≥ 4.5:1

This tool computes contrast against both pure white and pure black so you can quickly decide which text color to use on a colored background.