Color Converter
Type or pick a color in any common format and get its HEX, RGB, HSL, HSV and CMYK values side by side.
🔒 Runs entirely in your browser. Nothing you enter is sent to a server.
Designers and developers move between color formats all the time: HEX from a style guide, RGB for code, HSL for tweaking shades and CMYK for print. This converter takes a color in any of these formats and shows all the others, with a live swatch and one-click copying.
How to use the color converter
- Type or paste a color into the box, for example
#3B82F6,rgb(59, 130, 246)orhsl(217, 91%, 60%). - Or click the picker and choose a color visually.
- Read the HEX, RGB, HSL, HSV and CMYK values, and click Copy next to the one you need.
The swatch shows the color with black or white sample text, whichever is easier to read on it.
How the conversions work
Every format is converted through RGB, with red, green and blue each from 0 to 255.
HEX is just RGB written in base 16, two digits per channel:
#3B82F6 → 3B = 59, 82 = 130, F6 = 246HSL first scales each channel to 0–1 and finds the largest (max) and smallest (min):
Lightness L = (max + min) ÷ 2
Saturation S = (max − min) ÷ (1 − |2L − 1|)
Hue H = angle 0–360° depending on which channel is largestHSV uses the same hue, with V = max and S = (max − min) ÷ max.
CMYK subtracts from white:
K = 1 − max
C = (1 − R − K) ÷ (1 − K), and the same for M with G and Y with BWorked example
Convert #3B82F6, a bright blue.
- RGB: 3B = 59, 82 = 130, F6 = 246, so rgb(59, 130, 246)
- As fractions: R = 0.231, G = 0.510, B = 0.965, so max = 0.965 and min = 0.231
- Lightness = (0.965 + 0.231) ÷ 2 ≈ 59.8%
- Saturation = 0.733 ÷ (1 − |2 × 0.598 − 1|) ≈ 91.2%
- Blue is largest, so hue = 60 × ((R − G) ÷ (max − min) + 4) ≈ 217°
- Result: hsl(217, 91.2%, 59.8%), hsv(217, 76%, 96.5%) and cmyk(76%, 47%, 0%, 4%)
On this blue, white text has a contrast ratio of about 3.7:1 and black text about 5.7:1, so the swatch uses black, the more readable option.
When to use each format
| Format | Typical use |
|---|---|
| HEX | CSS, design tokens, brand guidelines |
| RGB / RGBA | CSS and code, especially with transparency |
| HSL | Creating lighter or darker shades by changing one number |
| HSV / HSB | Color pickers in design apps |
| CMYK | Print design, as a starting point for your printer |
Tips
- Make shades with HSL. Keep the hue and saturation and change only the lightness to build a consistent palette: 90% for backgrounds, 50% for buttons, 30% for text.
- Short HEX codes double up.
#FA0is the same as#FFAA00. - Check contrast for text. For readable body text, aim for a contrast ratio of at least 4.5:1 against the background.
- Screens and paper differ. Bright RGB colors such as pure blue can’t be reproduced in standard CMYK inks, so expect printed versions to look duller.
Frequently asked questions
Which color formats can I enter?
HEX with 3, 4, 6 or 8 digits (with or without
Why does converting back and forth sometimes change the last digit?
HSL, HSV and CMYK values are rounded for display, and RGB channels must be whole numbers from 0 to 255. Converting a rounded value back can land one step away, for example 130 becoming 131. The difference is invisible to the eye.
Will the CMYK values match my printer?
Only roughly. This is a simple mathematical conversion from screen RGB. Real print colors depend on the ink, paper and color profile, so for professional printing use your design software's color management or ask your printer for a proof.
What is the difference between HSL and HSV?
Both describe color by hue and saturation. HSL uses lightness, where 50% is the pure color, 100% is white and 0% is black. HSV (also called HSB) uses value or brightness, where 100% is the pure color at full brightness. Design tools such as Photoshop and Figma's picker use HSV/HSB, while CSS uses HSL.
What does the alpha value mean?
Alpha is opacity, from 0 (fully transparent) to 1 (fully opaque). It appears as the last two digits of an 8-digit HEX code, or as the fourth value in rgba() and hsla().