How to Convert Between HEX, RGB, HSL, HSV, and CMYK Colors
Every color on a screen can be written in several equivalent formats. This color picker converts between all of them in real time, but understanding what each format means helps you choose the right one for CSS, design software, or print work.
HEX color codes
A HEX code like #4f8ef7 is a hexadecimal (base-16) shorthand for RGB. Each pair of characters represents red, green, and blue on a 0–255 scale: 4f = 79 red, 8e = 142 green, f7 = 247 blue. An optional fourth pair adds alpha (transparency), so #4f8ef780 is the same blue at 50% opacity. HEX is the most compact format and the most common in CSS and design handoffs.
RGB and RGBA
RGB describes a color as the intensity of red, green, and blue light, each from 0 to 255 — the same numbers as HEX, just written in decimal: rgb(79, 142, 247). RGBA adds an alpha channel from 0 (transparent) to 1 (opaque): rgba(79, 142, 247, 0.5). Because screens physically emit red, green, and blue light, RGB is the native model for all digital display work.
HSL: hue, saturation, lightness
HSL rewrites the same color in more human terms. Hue is a position on the color wheel from 0° to 360° (0° red, 120° green, 240° blue), saturation is intensity from gray (0%) to fully vivid (100%), and lightness runs from black (0%) through the pure color (50%) to white (100%). HSL is ideal for building color systems in CSS: to make a hover state, keep hue and saturation and nudge lightness — hsl(217, 91%, 64%) becomes hsl(217, 91%, 54%).
HSV: hue, saturation, value
HSV (also called HSB for brightness) is the model behind the square picker area in this tool and in apps like Photoshop. Hue works the same as HSL, but value measures brightness from black (0%) to the full-strength color (100%), and saturation mixes toward white. The difference from HSL: in HSV the pure vivid color sits at 100% value, while in HSL it sits at 50% lightness. HSV maps more naturally to how painters think — start with a pigment, add white or black.
CMYK for print
CMYK (cyan, magenta, yellow, key/black) is a subtractive model: instead of emitting light, ink absorbs it. Values are percentages of ink coverage, so cmyk(68%, 43%, 0%, 3%) means heavy cyan, moderate magenta, no yellow, a touch of black. Screens can display colors that CMYK inks cannot reproduce (bright greens and oranges especially), so the conversion here is an approximation — always proof print colors in your print workflow before committing.
Quick comparison
| Format | Example | Best for |
|---|---|---|
| HEX | #4f8ef7 | CSS, design handoff, compact notation |
| RGB / RGBA | rgb(79, 142, 247) | Digital display, transparency, JavaScript |
| HSL / HSLA | hsl(217, 91%, 64%) | CSS color systems, programmatic variants |
| HSV / HSB | hsv(217, 68%, 97%) | Design tools, intuitive picking |
| CMYK | cmyk(68%, 43%, 0%, 3%) | Print production (approximate on screen) |
What Makes a Color Accessible?
The WCAG 2.1 contrast checker built into this tool measures the luminance ratio between text and background. For normal-size text, aim for at least 4.5:1 (AA) or 7:1 (AAA). Large text — 18pt and up, or 14pt bold — passes AA at 3:1 and AAA at 4.5:1. Contrast is calculated from relative luminance, not hue, which is why a mid-gray on white can fail while a dark navy passes easily.
Using Color Harmonies
The harmony palettes are generated by rotating the hue around the color wheel while keeping saturation and lightness fixed. Complementary colors sit 180° apart and create maximum contrast; analogous colors sit within 30° and feel cohesive; triadic (120° apart) and tetradic (90° apart) schemes give balanced multi-color palettes; split-complementary softens a complement by using the two hues adjacent to it. Click any swatch to load it into the picker.
Frequently Asked Questions
How do I convert HEX to RGB?
Split the HEX code into pairs and convert each pair from base-16 to decimal. For #4f8ef7: 4f = 79, 8e = 142, f7 = 247, giving rgb(79, 142, 247). Or paste the HEX code into the picker above and read the RGB field.
What is the difference between HSL and HSV?
Both use the same 360° hue wheel, but they scale brightness differently. In HSV, the fully saturated pure color sits at 100% value; in HSL it sits at 50% lightness, with white at 100%. HSV matches how design-tool pickers work, while HSL is easier for creating lighter and darker CSS variants of one hue.
Why does my CMYK color look different in print?
Screens use additive RGB light and can show colors outside the CMYK ink gamut. The CMYK values here are a standard mathematical conversion, useful as a starting point, but final print colors depend on the ink, paper, and color profile, so always check a physical proof.
What contrast ratio do I need for accessible text?
WCAG 2.1 requires 4.5:1 for normal text and 3:1 for large text at Level AA. Level AAA raises these to 7:1 and 4.5:1. The contrast checker in this tool shows all four thresholds against any background color you enter.
Does an 8-digit HEX code include transparency?
Yes. The last two characters are the alpha channel from 00 (fully transparent) to ff (fully opaque). #4f8ef780 is 50% opacity, since hexadecimal 80 is 128 out of 255. All modern browsers support 8-digit HEX in CSS.