Color Converter
Convert any color between HEX, RGB, HSL, HSV, and CMYK. Check contrast. Generate shades, tints, and harmonies.
Convert any color between HEX, RGB, HSL, HSV, and CMYK. Check WCAG contrast, generate shades, tints, and harmonies. Free, offline, runs in your browser. Read more Show less
What is a color converter?
A color converter translates a color from one notation to another. Designers and developers switch between HEX (used in CSS and design tools), RGB (used by screens and Canvas), HSL (used when picking colors by hand), HSV (used in color pickers and Photoshop), and CMYK (used for print).
This tool accepts any of those formats, converts to all of them at once, checks contrast for accessibility, and generates related colors so you can build a palette quickly.
The formats
| Format | Example | Used for |
|---|---|---|
| HEX | #ff6b35 | CSS, HTML, design tools, Figma, Sketch |
| RGB | rgb(255, 107, 53) | Canvas, SVG, screens, anywhere light is composed |
| HSL | hsl(16, 100%, 60%) | Hand-picking colors, dark/light themes, tint scales |
| HSV / HSB | hsv(16, 79%, 100%) | Color pickers, Photoshop, illustrator tools |
| CMYK | cmyk(0, 58, 79, 0) | Print, ink mixing, PDF, prepress |
| Named | tomato, rebeccapurple | Quick CSS references, all 148 CSS named colors |
How to use
Type any color into the input field - the tool auto-detects the format. Or tap the large swatch to open your device's native color picker. Every format updates live, and each row has a copy button.
All processing happens in your browser. Nothing is sent anywhere.
Contrast checking
The tool computes the WCAG contrast ratio of your color against white and against black. This is the same formula that audit tools like Lighthouse and axe use.
WCAG AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold).
WCAG AAA requires 7:1 for normal text and 4.5:1 for large text.
If the ratio is below 3:1, the text fails every level and should not be used.
Color harmonies
Complementary - the color opposite on the color wheel. High contrast, good for call-to-action buttons.
Analogous - the two neighbors on either side. Low contrast, calm, good for backgrounds and gradients.
Triadic - three colors evenly spaced around the wheel. Balanced and vibrant.
Split-complementary - the two colors adjacent to the complement. Less tension than pure complementary.
Tetradic - four colors evenly spaced. Rich but easy to unbalance.
FAQ
What is the difference between HSV and HSL?
Both describe hue and saturation, but the third component differs. In HSL, lightness 100% is always white and 0% is always black, regardless of hue. In HSV, value 100% is the brightest version of that hue and 0% is always black. HSV is what most color pickers use because the slider stays consistent as you change hue; HSL is more intuitive for programmers.
Can I paste an rgba() or hsla() value?
Yes. The tool accepts the modern comma-separated and space-separated forms, with or without alpha. Alpha is preserved through conversion.
What are the 8-digit hex values?
Format #RRGGBBAA - the last two digits are alpha (transparency). #ff6b3580 is the same color at 50% opacity.
Why does my print color look different from my screen color?
CMYK cannot represent every color that RGB can. Saturated greens, bright oranges, and pure blues are often out of gamut in print. The CMYK value shown here is a naive conversion - for print work, use the color profile from your actual press.
How are shades and tints computed?
Shades mix the color toward black; tints mix toward white. This tool uses a simple linear blend at 10% intervals. That matches what most design systems do (Tailwind, Material) and gives you a natural scale.
What counts as a "large text" for WCAG?
18pt (24px) or 14pt (18.66px) bold. Below that, the 4.5:1 threshold applies.
Is the color picker available on mobile?
Yes. Tapping the large swatch opens the device's built-in color picker on iOS, Android, and any modern browser. It falls back to a text field on older systems.
Command line equivalent
# Node with color-convert
npm i color-convert
node -e 'const c = require("color-convert"); console.log(c.hex.rgb("ff6b35"), c.rgb.hsl([255,107,53]))'
# Python with colour
pip install colour
python3 -c 'from colour import Color; c = Color("#ff6b35"); print(c.rgb, c.hsl, c.hex_l)'
# ImageMagick
magick convert xc:"#ff6b35" -format "%[pixel:p{0,0}]" info:
# Sass / CSS
color: color-mix(in srgb, #ff6b35 50%, white);