What is the difference between HEX, RGB, and HSL?

HEX is a compact hexadecimal representation of RGB values (e.g., #FF6600). RGB specifies red, green, and blue intensities (0–255 each). HSL uses hue (0–360°), saturation (0–100%), and lightness (0–100%), which is often more intuitive for design work.

How do I convert HEX to RGB?

Split the HEX into three 2-character pairs and convert each from base-16 to base-10. #FF6600 → R:255, G:102, B:0. This tool does it instantly for you.

What is CMYK and when do I use it?

CMYK (Cyan, Magenta, Yellow, Key/Black) is a subtractive colour model used in print design. RGB and HEX are for screens (additive light); CMYK is for physical printing. Use CMYK values when preparing artwork for professional print.

Free Online Color Converter — HEX, RGB, HSL & CMYK

Convert any colour between HEX, RGB, HSL, and CMYK formats instantly. Enter a hex code, pick from the colour wheel, or type RGB values to get all formats at once.

Color Formats Explained: HEX, RGB, and HSL in Web Design

Color is one of the most powerful elements in design, capable of conveying emotion, establishing brand identity, and guiding user attention across a page or interface. In web development, colors are expressed using several different notations — HEX, RGB, and HSL being the most common — and each format has its own strengths, use cases, and mental model. A color converter bridges these formats instantly, but understanding when and why to use each one is what separates thoughtful design from guess-and-check color work.

HEX: The Web Standard

Hexadecimal color notation has been the dominant format on the web since the earliest days of HTML. A HEX color like #3B82F6 encodes red, green, and blue channel values as two-digit hexadecimal numbers, each ranging from 00 to FF (0 to 255 in decimal). The hash symbol is followed by six characters: the first two represent red intensity, the middle two represent green, and the last two represent blue. Some colors can be shortened to three characters when each pair is a repeated digit — #FFCC00 becomes #FC0, for instance.

HEX colors are compact, copy-paste friendly, and universally supported across every browser and CSS environment. Designers typically encounter HEX values in style guides, design tools like Figma or Sketch, and marketing materials where exact brand colors are specified. However, HEX notation is not intuitive — it's difficult to look at #3B82F6 and immediately know whether that's a warm or cool color, or how it will look against a dark background. That's where other formats offer advantages.

RGB: Channel-Level Control

RGB (Red, Green, Blue) notation expresses each color channel as a decimal number from 0 to 255. The CSS function rgb(59, 130, 246) produces the same blue as #3B82F6. RGB is more readable for developers who think in decimal and is especially useful when you need to programmatically manipulate color values — for example, darkening a color by reducing all three channels proportionally, or creating a gradient by interpolating between two RGB values in JavaScript.

CSS also supports rgba(), which adds a fourth parameter for alpha transparency ranging from 0 (fully transparent) to 1 (fully opaque). This makes RGB the natural choice when building dynamic UI effects like overlays, shadows, and hover states that involve semi-transparent colors. Many CSS frameworks and design systems internally store colors as RGB values precisely because alpha transparency is easy to layer on top of an existing RGB color without requiring a format conversion.

HSL: The Designer's Color Model

HSL (Hue, Saturation, Lightness) is the most human-intuitive color format and has become increasingly popular in modern design systems. Hue is expressed as a degree on the color wheel from 0 to 360 — 0 and 360 are red, 120 is green, 240 is blue. Saturation describes how vivid or gray the color is, from 0% (completely gray) to 100% (fully saturated). Lightness controls how light or dark the color is, from 0% (black) to 100% (white), with 50% being the pure hue.

The power of HSL becomes apparent when building color palettes programmatically. To create ten shades of the same blue — from nearly white to nearly black — you keep the hue and saturation constant and step the lightness from 95% down to 10%. This is exactly how utility CSS frameworks like Tailwind CSS define their color scales. Adjusting saturation lets you create muted, professional variants of a vivid color. Rotating the hue by 30 degrees gives you analogous colors for harmonious palettes. These operations are natural in HSL but require complex math in RGB or HEX.

When to Use Each Format

The choice of color format should match your workflow and context. Use HEX when copying colors from design specs, style guides, or brand documentation — it's the most widely used format for communicating specific colors between designers and developers. Use RGB or rgba() in CSS when you need precise control over individual channels or when transparency is required. Use HSL when building design systems, generating dynamic color palettes in JavaScript, or when you want to maintain perceptual consistency across a set of related colors.

Modern CSS supports all three formats natively, and CSS custom properties (variables) make it easy to define your palette once and reference it throughout your stylesheet. A common pattern is to define a base hue as a custom property — --brand-hue: 217 — and then derive the full color scale using HSL calculations: --brand-500: hsl(var(--brand-hue), 91%, 60%). This approach makes it trivial to rebrand an entire application by changing a single hue value.

Color Accessibility Considerations

Beyond aesthetics, color choice has direct implications for accessibility. The Web Content Accessibility Guidelines (WCAG) specify minimum contrast ratios between text and background colors to ensure readability for users with low vision or color blindness. A contrast ratio of at least 4.5:1 is required for normal text, and 3:1 for large text. These ratios are calculated from the relative luminance of colors, which is derived from their RGB values after applying a gamma correction curve.

When evaluating accessibility, converting colors between formats helps you reason about contrast. A light gray text on a white background might look fine visually but fail the contrast threshold when measured precisely. Conversely, colors that seem dramatically different when saturated can have very similar luminance values and fail contrast tests. Always verify color combinations against WCAG guidelines using a contrast checker, and use HSL to make systematic adjustments — increasing lightness difference between foreground and background is a reliable way to improve contrast ratios while preserving the overall aesthetic of your design.

Color in Design Systems

Modern design systems — whether built with Tailwind, Material Design, or a custom token system — organize colors into structured scales with semantic naming. A typical scale might have ten shades of a base color, named 50 through 950, where 50 is the lightest and 950 is the darkest. Each shade is carefully tuned for contrast and perceptual consistency. Understanding color formats helps you both consume these systems effectively and build your own when a project requires a custom brand palette.

When extending or customizing a design system, HSL is invaluable for generating intermediate shades that weren't included in the original palette. If a design calls for a color exactly between two existing palette entries, you can calculate the midpoint in HSL space and be confident the result will look perceptually balanced. The ability to convert between HEX, RGB, and HSL fluidly is a practical skill that pays off across every phase of visual development work.