Colour Picker and Converter
Pick or paste any CSS colour and convert it without loss.
OKLCH sliders
OKLCH can reach colours outside sRGB; they are flagged below.
Any CSS colour: #3366cc, rgb(51 102 204), hsl(220 60% 50%), oklch(53% 0.17 262), rebeccapurple…
Nearest named colour: royalblue
Checking which colours this display can show…
Formats
| HEX | #3366cc | |
|---|---|---|
| RGB | rgb(51 102 204) | |
| HSL | hsl(220 60% 50%) | |
| HWB | hwb(220 20% 20%) | |
| OKLCH | oklch(53.248% 0.16787 262.29) | |
| OKLab | oklab(53.248% -0.02251 -0.16635) | |
| Lab | lab(44.121% 10.954 -59.086) | |
| LCH | lch(44.121% 60.093 280.5) | |
| Display P3 | color(display-p3 0.24985 0.39524 0.77356) |
Contrast
This colour as text on a background of your choice.
Contrast ratio5.36:1
| Check | Needs | Result |
|---|---|---|
| AA, normal text | 4.5:1 | Pass |
| AA, large text | 3:1 | Pass |
| AAA, normal text | 7:1 | Fail |
| AAA, large text | 4.5:1 | Pass |
| User interface components and graphics | 3:1 | Pass |
Large text is at least 24 px, or at least 18.66 px and bold.
Suggest a passing colour
Already passes (4.5:1 needed).
Think a result is wrong? Report it on GitHub
About converting colours
Pick a colour or paste any CSS color and convert it to HEX, RGB, HSL, OKLCH, LAB and Display P3 without rounding errors, with contrast checks. Free.
Type or paste any CSS colour, or pick one, and see it in every CSS format at once: HEX, rgb(), hsl(), hwb(), oklch(), oklab(), lab(), lch() and color(display-p3). Conversions use the formulas published in CSS Color Level 4, and values are rounded only when they are shown.
What is OKLCH?
OKLCH describes a colour by lightness, chroma (how vivid it is) and hue. Unlike HSL, equal steps look equally different to the eye, so it is popular for design systems, and all current browsers support it in CSS.
Round-trip safe or Compact
Short values look tidy but can change the colour. #44cb63 written as oklch(74.6% 0.186 147.7) converts back to #43cb63. Round-trip safe output uses just enough digits that every one of the 16.7 million hex colours converts back unchanged: oklch(74.583% 0.18566 147.66).
Wide-gamut colours
Colours such as color(display-p3 0 1 0) are outside sRGB, the range most screens and HEX can show. Their HEX and rgb() values are mapped into sRGB with the CSS gamut-mapping method, which reduces saturation rather than shifting the hue, and are labelled as mapped. Copy with sRGB fallback gives a two-line declaration that older screens can use. Everything happens in your browser; Copy link puts the colour after the # in the address, which browsers never send to a server.