Color converters
Color converter Any format, every direction
Paste a color in any notation the converters read, and see it in all of them. Every value has a copy button, the list below converts many colors at once, and every pair has a converter page of its own.
Try
The converter needs JavaScript. The values shown are for #D3AF37, and the worked examples below read without it.
Result
Inside sRGB
Showing the last color that converted.
- HEX
#D3AF37- RGB
rgb(211 175 55)- HSL
hsl(46.2 63.9% 52.2%)- OKLCH
oklch(76.55% 0.13847 91.55)- Display P3
color(display-p3 0.80472 0.69157 0.30739)
Color converters
Every format at once
The same color in every notation the converters know. Each name opens its own converter.
| Format | Value | Copy |
|---|---|---|
| Web and CSS | ||
| HEX CSS | #D3AF37 | |
| RGB CSS | rgb(211 175 55) | |
| sRGB (0 to 1) CSS | color(srgb 0.8275 0.6863 0.2157) | |
| Linear sRGB CSS | color(srgb-linear 0.65141 0.42869 0.0382) | |
| HSL CSS | hsl(46.2 63.9% 52.2%) | |
| HSV (HSB) Notation | hsv(46.2 73.9% 82.7%) | |
| HWB CSS | hwb(46.2 21.6% 17.3%) | |
| CSS color name CSS | goldenrodNearest ΔE00 5.00 | |
| Perceptual and CIE | ||
| OKLCH CSS | oklch(76.55% 0.13847 91.55) | |
| OKLab CSS | oklab(76.55% -0.00375 0.13842) | |
| CIELAB CSS | lab(73.19 4.7 62.68) | |
| CIE LCH CSS | lch(73.19 62.86 85.71) | |
| CIE XYZ (D65) CSS | color(xyz-d65 0.42882 0.44786 0.1) | |
| CIE XYZ (D50) CSS | color(xyz-d50 0.45463 0.45457 0.07797) | |
| CIE xyY Notation | xyY(0.43906 0.45855 0.44786) | |
| CIELUV Notation | luv(72.75 30.75 69) | |
| Wide gamut | ||
| Display P3 CSS | color(display-p3 0.80472 0.69157 0.30739) | |
| Rec. 2020 CSS | color(rec2020 0.74174 0.66017 0.25864) | |
| Adobe RGB (1998) CSS | color(a98-rgb 0.78545 0.68035 0.26584) | |
| ProPhoto RGB CSS | color(prophoto-rgb 0.67408 0.63343 0.26964) | |
| Print and paint | ||
| CMYK Notation | cmyk(0% 17.1% 73.9% 17.3%) | |
| RAL Classic Notation | RAL 1032 Broom yellowNearest ΔE00 3.02 | |
| Video | ||
| YCbCr (JPEG, BT.601) Notation | ycbcr(172.08 61.93 155.76) | |
| YCbCr (HD video, BT.709) Notation | ycbcr709(165.43 71.67 148.64) | |
| Code and platforms | ||
| Decimal integer Notation | 13872951 | |
| Android and Flutter ARGB Notation | 0xFFD3AF37 | |
| Android color int Notation | -2904265 | |
| SwiftUI and UIKit Notation | Color(red: 0.8275, green: 0.6863, blue: 0.2157) | |
| GLSL vec3 / vec4 Notation | vec3(0.8275, 0.6863, 0.2157) | |
| Embedded and terminal | ||
| RGB565 Notation | 0xD567Lossy | |
| ANSI 256 (xterm) Notation | 38;5;178Nearest ΔE00 3.11 | |
Color converters
Convert a whole list
Paste one color per line, in any notation, and pick the format to write them in. Up to 500 lines at a time; blank lines are skipped.
8 converted 1 not read
| Line | Input | Read as | Output |
|---|---|---|---|
| 1 | #D3AF37 | HEX | oklch(76.55% 0.13847 91.55) |
| 2 | rebeccapurple | CSS color name | oklch(44.03% 0.1603 303.37) |
| 3 | rgb(29 78 216 / 50%) | RGB | oklch(48.82% 0.21717 264.38 / 50%) |
| 4 | hsl(140 60% 40%) | HSL | oklch(63.18% 0.15894 149.73) |
| 5 | oklch(70% 0.25 145) | OKLCH | oklch(70% 0.25 145) |
| 6 | color(display-p3 1 0 0) | Display P3 | oklch(64.86% 0.29949 28.96) |
| 7 | cmyk(0% 60% 90% 10%) | CMYK | oklch(64.42% 0.18561 41.93) |
| 8 | 0xFF14532D | Android and Flutter ARGB | oklch(39.25% 0.08962 152.54) |
| 9 | not a color | Not read | |
Color converters
Every converter
A page for each pair, with a two-way converter, every step of the maths and worked examples.
Web and CSS
- HEX and RGBHex codes, rgb() and alpha
- HEX and sRGBcolor(srgb), channels from 0 to 1
- HEX and Linear sRGBLight before gamma encoding
- HEX and HSLHue, saturation and lightness
- HEX and HSVHue, saturation and value, also called HSB
- HEX and HWBHue, whiteness and blackness
- HEX and Color NameThe 148 CSS color keywords
- RGB and HSLHue, saturation and lightness
- RGB and HSVHue, saturation and value, also called HSB
- HSL and HSVHue, saturation and value, also called HSB
Perceptual and CIE
- HEX and OKLCHPerceptual color and gamut
- HEX and OKLabPerceptual lightness and two opponent axes
- HEX and LabCIELAB in D50, as CSS lab()
- HEX and LCHCIELAB as lightness, chroma and hue
- HEX and XYZCIE XYZ, D65, as color(xyz-d65)
- HEX and XYZ D50CIE XYZ adapted to D50
- HEX and xyYChromaticity and luminance
- HEX and LuvThe CIE's other 1976 uniform space
- RGB and LabCIELAB in D50, as CSS lab()
- Lab and LCHCIELAB as lightness, chroma and hue
- XYZ and LabCIELAB in D50, as CSS lab()
- OKLab and OKLCHPerceptual color and gamut
Wide gamut
Print and paint
Code and platforms
Embedded and terminal
Method
Which format do I need?
- For a web page, hex or rgb() for colors inside sRGB, and oklch() or color(display-p3) for wider ones, with a hex fallback.
- For a design system, OKLCH, because equal steps of its lightness look equal.
- For print, CMYK from your printer's profile; the CMYK here is a starting point.
- For apps, the literal your platform reads: ARGB for Android, Compose and Flutter, Color(red:green:blue:) for Swift.
- For color science, CIELAB or XYZ, and CIEDE2000 for differences.
Next
Where to go from here
Method
Sources and testing
- CSS Color Module Level 4, 5.2: the RGB hexadecimal notations w3.org
- CSS Color Module Level 4, 5.1: the rgb() and rgba() functions w3.org
- CSS Color Module Level 4, 9.1: the lab() function w3.org
- CIE 15:2018, Colorimetry cie.co.at
- CSS Color Module Level 4, 9.4: the oklab() and oklch() functions w3.org
- Björn Ottosson, A perceptual color space for image processing (2020) bottosson.github.io
- CSS Color Module Level 4, 10.4: the predefined Display P3 color space w3.org
- CSS Color Module Level 5: the device-cmyk() function w3.org
- Conversions run in your browser with the site's shared color code; nothing you type is sent anywhere.
- An automated test recomputes every value on this page and reads every format back.
- Checked with a keyboard, the axe engine and Playwright in Chromium, in light and dark themes at phone and desktop widths. It has not yet been checked with a screen reader.
Found a mistake? Tell us and we will correct it.