Color Converter & Picker
Convert colors between HEX, RGB, HSL, HSV, CMYK and CSS names. Check WCAG contrast and generate tints and shades in one place.
Runs in your browser — your data never leaves your deviceAccepts HEX (3/4/6/8 digits), rgb(a), hsl(a), hsv, cmyk and 148 CSS colour names.
#149EB6
All formats
HEX
#149EB6
HEX + alpha
#149EB6FF
RGB
rgb(20, 158, 182)
RGBA
rgba(20, 158, 182, 1)
HSL
hsl(189, 80.2%, 39.6%)
HSLA
hsla(189, 80.2%, 39.6%, 1)
HSV / HSB
hsv(189, 89%, 71.4%)
CMYK
cmyk(89%, 13.2%, 0%, 28.6%)
CSS (modern)
rgb(20 158 182)
WCAG contrast
Tints & shades
Click a swatch to copy its HEXTints (mixed with white)
Shades (mixed with black)
How to use Color Converter & Picker
- 1
Enter a color
Type HEX, rgb(), hsl(), hsv(), cmyk() or a CSS name — or use the color picker.
- 2
Copy any format
Every equivalent format is shown with its own copy button.
- 3
Check & expand
Review WCAG contrast badges and click any tint or shade to copy its HEX.
Frequently asked questions
What is the difference between HSL and HSV?
Both describe colour by hue and saturation, but HSL uses lightness (100% is always white) while HSV/HSB uses value or brightness (100% is the purest, brightest version of the hue). Design tools like Photoshop and Figma pickers typically use HSV.
What contrast ratio do I need for accessible text?
WCAG 2.1 level AA requires at least 4.5:1 for normal text and 3:1 for large text (18pt, or 14pt bold). Level AAA raises that to 7:1 and 4.5:1. The badges show which levels this colour passes against white and black.
Is the CMYK value exact for printing?
The CMYK shown is a mathematical conversion from RGB without a colour profile. Commercial printing uses ICC profiles for specific inks and paper, so treat it as a starting point and confirm with your printer.
How are the tints and shades generated?
Tints mix your colour with white and shades mix it with black in 10% steps. They are handy for building hover states, backgrounds and a consistent UI palette — click any swatch to copy its HEX code.