Type or paste a color in any common format — #1e90ff, rgb(30, 144, 255), hsl(210, 100%, 56%), HSV or CMYK — or choose one with the color picker, and every other format updates immediately. Each value has its own copy button and is written as ready-to-use CSS where that applies.
The converter also calculates the WCAG contrast ratio of your color against white and black text, with AA and AAA pass or fail badges, so you can tell straight away whether a button or background color is readable. A strip of tints and shades helps you build hover states and palettes from one base color.
How to use the Color Converter tool
- Enter a color code in the text box, or click the color picker to choose one.
- Read the HEX, RGB, HSL, HSV and CMYK values in the table.
- Click Copy next to the format you need.
- Check the contrast ratios and badges to choose white or black text.
- Click a tint or shade to make it the new base color.
Why use ToolOrca Color Converter
- HEX, RGB, RGBA, HSL, HSV and CMYK
- Accepts short HEX and 8-digit HEX with alpha
- WCAG AA and AAA contrast check
- Tints and shades strip
- Native color picker
- Live preview with white and black text
Which color format should I use?
HEX and RGB describe the same thing — amounts of red, green and blue from 0 to 255 — and are the most common in CSS and design tools. HSL (hue, saturation, lightness) is easier to adjust by hand: keep the hue and change the lightness to get lighter or darker versions. HSV/HSB is what most color pickers in Photoshop and Figma use.
CMYK (cyan, magenta, yellow, black) is used for print. The values here are a simple mathematical conversion; a professional print shop uses color profiles, so treat CMYK as a starting point, not an exact match.
Contrast ratio and WCAG
The Web Content Accessibility Guidelines ask for a contrast ratio of at least 4.5:1 for normal text (level AA) and 3:1 for large text of 24 px, or 18.7 px bold. Level AAA raises this to 7:1 and 4.5:1. Ratios range from 1:1 (no contrast) to 21:1 (black on white).
Frequently asked questions
How do I convert HEX to RGB?
Split the six HEX digits into three pairs and convert each pair from base 16 to decimal. For #3366CC: 33 = 51, 66 = 102, CC = 204, so the color is rgb(51, 102, 204). This tool does it as you type.
What is the difference between HSL and HSV?
Both use hue and saturation, but HSL uses lightness (100% is always white) while HSV uses value or brightness (100% is the pure, brightest color). The same color has different S numbers in each model.
Can I enter a color with transparency?
Yes. An 8-digit HEX such as #3366CC80 is read with its alpha channel and shown as RGBA. Contrast is calculated for the solid color.
Should I use white or black text on my color?
Use the one with the higher contrast ratio. If it shows a green AA badge, it is readable for normal body text.