How do I convert a color code?
Paste the value into the box above in any common notation: a hex code (#FF5733, FF5733, #F53 or 8-digit #FF573380), rgb() or rgba(), hsl(), hsv(), cmyk(), oklch() or a CSS color name. Every other format updates at once and each value has its own copy button. The same color in all formats:
| Format | #FF5733 | Used for |
|---|---|---|
| HEX | #FF5733 | CSS, HTML, design tools |
| RGB | rgb(255, 87, 51) | CSS, screens, image editors |
| HSL | hsl(11, 100%, 60%) | CSS, adjusting lightness and saturation |
| HSV / HSB | hsv(11, 80%, 100%) | Color pickers in Photoshop and Figma |
| CMYK | cmyk(0%, 66%, 80%, 0%) | Print, as a starting point |
| OKLCH | oklch(68% 0.21 33.7) | Modern CSS, even-looking palettes |
What do HEX, RGB, HSL, HSV, CMYK and OKLCH mean?
RGB mixes red, green and blue light, each from 0 to 255. HEX is the same three numbers written in base 16. HSL describes hue (0 to 360°), saturation and lightness; HSV (also called HSB) uses value or brightness instead of lightness and is what most color pickers show. CMYK is the cyan, magenta, yellow and black ink used in print. OKLCH gives perceptual lightness, chroma and hue, so equal steps look equally different to the eye; it is defined in W3C, CSS Color Module Level 4 and based on the Oklab space from Björn Ottosson, “A perceptual color space for image processing” (2020).
How do I convert HEX to RGB?
Split the hex code into three pairs and convert each from base 16 to base 10. #FF5733 gives FF = 255, 57 = 87 and 33 = 51, so rgb(255, 87, 51). See the step-by-step HEX to RGB converter or the reverse RGB to HEX converter.
How do I convert RGB or HEX to CMYK?
Divide R, G and B by 255, take K = 1 − the largest, then C = (1 − R − K) ÷ (1 − K) and likewise for M and Y. #FF5733 becomes cmyk(0%, 66%, 80%, 0%). Details on the RGB to CMYK and CMYK to RGB pages.
Why do CMYK values from converters differ?
This converter uses the plain arithmetic formula, which treats CMYK as a simple inversion of RGB. It does not use an ICC color profile, so the numbers are a starting point rather than press-ready values. Programs such as Photoshop and Illustrator convert through the profile set in your color settings (for example a coated or uncoated press profile), take ink limits into account and usually add some black to dark tones, so their CMYK values for the same color will differ. For print work, ask your printer for their profile and convert in your design software.
How is color contrast calculated?
WCAG 2.2 compares the relative luminance of two colors. Each sRGB channel is divided by 255, linearized (values up to 0.04045 are divided by 12.92, larger values become ((v + 0.055) / 1.055)2.4), then L = 0.2126 R + 0.7152 G + 0.0722 B. The contrast ratio is (L1 + 0.05) / (L2 + 0.05) with the lighter color as L1, so it runs from 1:1 to 21:1.
Normal text needs at least 4.5:1 for level AA and 7:1 for AAA. Large text (at least 18 point, or 14 point bold) needs 3:1 for AA and 4.5:1 for AAA. #FF5733 has a ratio of 3.15:1 against white and 6.66:1 against black. Source: W3C, Web Content Accessibility Guidelines (WCAG) 2.2, Recommendation of 12 December 2024.
How do I find a color code from an image?
Use the image color picker: upload a photo or logo, click any pixel or extract the main colors, then paste the hex code here to convert it.
Formulas checked October 2026 against W3C, CSS Color Module Level 4, W3C, Web Content Accessibility Guidelines (WCAG) 2.2, Recommendation of 12 December 2024 and Björn Ottosson, “A perceptual color space for image processing” (2020).