How to use the color converter
- Type a colour in any format: #2563eb, rgb(37, 99, 235), hsl(221 83% 53%) or a name like tomato. Or use the picker.
- Read off the HEX, RGB, HSL, HSV and CMYK values and copy the one you need.
- Click a tint, shade or saturation swatch to load that variant and keep exploring.
Features
- Accepts 3, 4, 6 and 8 digit HEX, legacy comma and modern space syntax for rgb() and hsl()
- Alpha is preserved in HEX8, rgba() and hsla() output
- Exact CSS named colour detection, including aliases such as aqua / cyan
- Five tints, five shades and five saturation steps as clickable swatches
- Native colour picker for quick visual selection
What the formats mean
All of these describe the same sRGB colour, just with different coordinates:
- HEX: two hex digits each for red, green and blue (00–ff), optionally two more for alpha. #rgb is shorthand for #rrggbb.
- RGB: the same three channels as decimals 0–255 (or percentages). rgba() adds opacity 0–1.
- HSL: hue on the colour wheel (0–360°), saturation and lightness as percentages. Easy to tweak by hand: lower L to darken, lower S to grey out.
- HSV / HSB: like HSL but with value/brightness instead of lightness; used by many design app pickers.
- CMYK: subtractive ink percentages. This is the naive conversion without a print profile, so treat it as a starting point for print, not a colour-managed value.
Tints, shades and saturation
Tints mix the colour with white and shades mix it with black, in equal steps. Saturation variants keep hue and lightness and move the HSL saturation up or down. These are quick ways to build a palette from a single brand colour, for example hover states, borders and backgrounds.