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.