Color Converter
Convert colors between HEX, RGB, HSL, HWB, OKLCH and OKLab, with a color picker and WCAG contrast check.
Supports HEX, rgb(), hsl(), hwb(), oklch(), oklab() and CSS color names.
Formats
#3366cc
Input format: HEX
- HEX
- RGB
- HSL
- HWB
- OKLCH
- OKLab
Contrast (WCAG 2)
On white
5.36:1
✓ Passes AA
On black
3.91:1
✗ AA for large text only
How to use
- Type any CSS color into “Color”, such as #3366cc, rgb(51 102 204), hsl(220 60% 50%), oklch(52% 0.16 262) or tomato, or pick one with the color picker.
- HEX, RGB, HSL, HWB, OKLCH and OKLab appear instantly as CSS values. Click “Copy” to paste one into your stylesheet.
- The “Contrast” section shows the WCAG contrast ratio against white and black, and whether it meets AA or AAA.
- Click “Example” to cycle through colors in different formats, including translucent and out-of-gamut ones.
FAQ
What is OKLCH and why use it?
OKLCH is a perceptual color space: L is lightness, C is chroma and H is hue. Changing lightness does not shift the hue, which makes it easier than HSL for building color scales and dark themes. All modern browsers support oklch() in CSS.
What does “outside the sRGB gamut” mean?
OKLCH and OKLab can describe colors more vivid than a typical (sRGB) screen can show. For those, the tool follows CSS Color 4: it lowers chroma while keeping lightness and hue to find the closest displayable color, then converts that to HEX, RGB and the rest.
How do I read the contrast ratio?
WCAG 2 requires at least 4.5:1 between normal text and its background for AA and 7:1 for AAA. Large text (18 pt, or 14 pt bold) needs only 3:1. Ratios are truncated, never rounded up, so a color that just misses is not shown as passing.
How is transparency handled?
Alpha is kept in every format: HEX becomes 8 digits (#rrggbbaa) and the other formats get “/ 0.5”. The color picker and the contrast check use the opaque color.
Why do values change slightly after a round trip?
HEX and RGB have only 256 steps per channel, so converting from a continuous space such as OKLCH rounds the result. The difference is too small to see.
Is my data uploaded?
No. All conversions happen in your browser, with no network connection needed.
Related tools
Contrast Checker
Check the WCAG contrast ratio of text and background colors for AA and AAA, with alpha support and the closest passing color suggestions.Palette Generator
Generate complementary, analogous, triadic and other palettes plus a 50–950 scale from one color, and export CSS variables or Tailwind config.Gradient Generator
Design linear, radial or conic CSS gradients with color stops, angle and center, preview them live and copy the CSS, with optional OKLCH interpolation.CSS Unit Converter
Convert between px, rem, em, pt, vw, vh, cm and other CSS units, with your own root font size and viewport size.