CSS & colour
Color Converter: HEX, RGB, HSL, HSV and CMYK
Type a colour in any common format, such as #2563eb, rgb(37, 99, 235), hsl(221, 83%, 53%), hsv(...), cmyk(...) or a name like “rebeccapurple”, or choose one with the colour picker. All the other formats appear at once, ready to copy.
Loading tool…
Accepts HEX (#2563eb, #26e, #2563eb80), rgb(), hsl(), hsv(), cmyk(), CSS names such as tomato, and plain numbers like 37 99 235.
Converted values
How to use the Color Converter
- Type or paste a colour, or click the colour square to pick one.
- Read the HEX, RGB, HSL, HSV and CMYK values and the nearest CSS colour name.
- Click any value to copy it. Add transparency with an 8-digit HEX or rgba() value if you need it.
Tips for better results
- HEX and RGB describe the same thing in different notation. HSL (hue, saturation, lightness) is easier for making lighter, darker or less saturated versions of a colour.
- To make a colour lighter or darker, change only the L value in HSL and keep H and S.
- Test text and background pairs with the Color Contrast Checker before you use them in a design.
Limitations you should know about
- CMYK here is the simple mathematical conversion used by most online converters. Print shops use colour profiles, and a printed CMYK colour can look different from the screen. Ask your printer for exact values.
- All colours are standard sRGB, the colour space of the web. Wide-gamut colours (Display P3, OKLCH) are not converted.
- Rounding to whole numbers means that converting there and back can change a value by 1.
Frequently asked questions
How do I convert HEX to RGB?
Split the HEX code into three pairs and read each pair as a number from 0 to 255. For example #2563eb is 25, 63 and eb, which is rgb(37, 99, 235). The tool does this for you.
What does the alpha value mean?
Alpha is transparency, from 0 (invisible) to 1 (solid). It appears as the last two digits of an 8-digit HEX code or as the fourth number in rgba().
Why does CMYK look different when printed?
Screens mix light and printers mix ink, and the range of colours they can show differs. A profile-based conversion from your printer is needed for accurate print colour.
Guides that use this tool
Related tools
- Color Palette Generator Build harmonious palettes from one colour, or extract the dominant colours from an image.
- Color Contrast Checker Check text and background colours against WCAG 2.x AA and AAA contrast requirements.
- CSS Gradient Generator Build linear, radial and conic gradients with multiple colour stops and copy the CSS.