Color Formats Explained
Different industries and workflows rely on different color models. Understanding when to use each format helps you move accurately between design tools, browsers, and print production.
HEX — Web and UI Design
HEX codes are the standard in web development. A six-character hexadecimal string like #ff5733 encodes red, green, and blue channels in base-16. Every CSS color, SVG fill, and HTML attribute accepts HEX directly. It is compact, easy to copy, and universally supported in browsers.
RGB — Screens and Digital Media
RGB (Red, Green, Blue) is the additive color model used by every digital display. Values range from 0 to 255 per channel, so rgb(255, 87, 51) represents the same color as #ff5733. RGB is used natively in CSS, canvas drawing APIs, and image editors. It is the best model to work with when targeting screens.
HSL — Human-Friendly Editing
HSL (Hue, Saturation, Lightness) organises color in a way that matches human intuition. Hue is a 0–360° angle on the color wheel; saturation controls how vivid the color appears; lightness controls how light or dark it is. CSS fully supports hsl() syntax, making HSL ideal for theming systems where you want to adjust brightness or create color variations programmatically.
HSB vs. HSL
HSB (Hue, Saturation, Brightness — also called HSV) is closely related to HSL but calculates the saturation and value channels differently. HSB is the native model in Adobe Photoshop, Figma, and most design tools. A color at 100% brightness in HSB is not necessarily the same as 100% lightness in HSL — the two share the same hue but diverge at the extremes. Use HSB when working with design apps, and HSL when writing CSS.
CMYK — Print Production
CMYK (Cyan, Magenta, Yellow, Key/Black) is the subtractive color model used in professional printing. Ink absorbs light rather than emitting it, so mixing all channels at 100% produces near-black rather than white. The K (Key) channel is black ink added separately for sharper text and shadows. When preparing artwork for offset or inkjet printing, always convert to CMYK and verify the values with your print provider, as the CMYK gamut is significantly smaller than the RGB gamut and some vivid screen colors cannot be reproduced in print.
Choosing the Right Format
Use HEX or RGB for web and app development. Use HSL when writing CSS variables or building design tokens. Use HSB when working in Figma, Photoshop, or Illustrator. Use CMYK when preparing files for a print shop. This converter lets you copy any format in one click so you can paste the right value into whichever tool you are using.
Walk-through: turning #4F46E5 into RGB and HSL
Take the indigo brand color #4F46E5. Split it into three hex pairs — 4F, 46, E5 — and convert each from base-16 to base-10: 4F = 79, 46 = 70, E5 = 229. That gives rgb(79, 70, 229). To reach HSL, scale each channel to 0–1 (0.310, 0.275, 0.898), find the max (0.898, blue) and min (0.275, green), and work the angle: the dominant blue channel lands the hue at 243°, the spread of max-minus-min gives a saturation of 75%, and the midpoint of max and min gives a lightness of 59% — so hsl(243, 75%, 59%). The same indigo, three notations.
Where color conversion gets fuzzy
Conversions between models are exact arithmetic, but the models themselves do not all describe the same set of colors. The biggest gap is RGB-to-CMYK: the printable CMYK gamut is smaller than the screen RGB gamut, so a punchy on-screen blue or neon green can have no faithful ink equivalent and will print duller. Treat any CMYK value here as a starting approximation for screen preview, not a press-ready spec — your printer's ICC profile and paper stock shift the result. Two more caveats: HSL and HSB round to whole degrees and percentages, so a round-trip (HEX → HSL → HEX) can drift by one in the last hex digit; and this tool assumes the standard sRGB color space, so wide-gamut Display-P3 values are not represented. For color-critical print work, soft-proof in your design app against the exact output profile.
Color format questions
What is a HEX color code?
A HEX color code is a six-digit hexadecimal number prefixed with # (e.g. #ff5733) used to represent colors in web design. The six digits are split into three pairs representing the red, green, and blue (RGB) channels, each ranging from 00 (0) to ff (255).
How do I convert HEX to RGB?
To convert a HEX color to RGB, split the six hex digits into three two-digit pairs, then convert each pair from base-16 to base-10. For example, #ff5733 splits into ff (255), 57 (87), and 33 (51), giving rgb(255, 87, 51). Our tool does this automatically for all five formats at once.
What is HSL color?
HSL stands for Hue, Saturation, and Lightness. Hue is the color angle on a 360-degree wheel (0° = red, 120° = green, 240° = blue). Saturation is how vivid the color is (0% = grey, 100% = full color). Lightness controls brightness (0% = black, 50% = normal, 100% = white). HSL is widely used in CSS and is more intuitive for designers than RGB.
What is the difference between RGB and CMYK?
RGB (Red, Green, Blue) is an additive color model used for screens — mixing all three channels at full intensity produces white. CMYK (Cyan, Magenta, Yellow, Key/Black) is a subtractive model used in print — mixing all four inks at full produces near-black. Colors that look vivid on screen in RGB may appear duller when printed in CMYK because the CMYK gamut is smaller.