Color is one of the most deceptively technical aspects of web development. On the surface, a background color is just a CSS property. Dig deeper and you find a layered system of color models, each designed for a different purpose, each with its own mathematical representation, and each with real consequences for how you design, debug, and maintain a UI. This guide covers every major color format a web developer needs to understand — what each one is, why it exists, when to use it, and how to convert between them confidently.
Why Multiple Color Models Exist
Different color models were invented to solve different problems. RGB was designed around how monitors emit light — mixing red, green, and blue channels to produce color. HEX is simply RGB expressed as a compact hexadecimal string, favoured by web developers for its brevity. HSL (Hue, Saturation, Lightness) was designed around how humans perceive and describe color — it maps far more naturally to how a designer thinks than raw channel values do. HSV (Hue, Saturation, Value) is similar to HSL but uses a different definition of the third axis, and is the preferred model in image editing software like Photoshop and GIMP.
No single model is universally superior. Each is a projection of the same three-dimensional color space onto a different coordinate system, optimised for a different workflow. A frontend engineer maintaining CSS variables thinks in HEX or HSL. A graphics programmer compositing textures thinks in RGB. A digital artist picking complementary colors thinks in HSV. Knowing all four means you can work fluidly across these contexts rather than being locked into one paradigm.
The practical consequence is that any modern color picker — including our free browser-based tool — should support bidirectional conversion between all four formats. When you pick a color visually and need to copy it into a CSS variable, you want HEX. When you want to programmatically darken a color by 10%, you want HSL. When you're writing a canvas drawing algorithm, you want RGB. The format you work in should match the task, not the last tool you happened to open.
HEX Color Format
A HEX color code is a six-character hexadecimal string prefixed with a hash sign, representing the red, green, and blue channels of a color. Each channel is expressed as two hexadecimal digits, giving values from 00 (0 in decimal) to FF (255 in decimal). So #FF0000 is pure red (red channel maxed, green and blue at zero), #00FF00 is pure green, and #0000FF is pure blue.
Eight-character HEX codes add an alpha channel for transparency: #FF000080 is red at 50% opacity. The alpha channel follows the same 00–FF scale, where FF is fully opaque and 00 is fully transparent. Browser support for 8-character HEX is universal in modern browsers, though some older tools and design systems still express transparency separately using rgba() notation.
The shorthand three-character HEX format doubles each digit — #F00 is equivalent to #FF0000, and #ABC expands to #AABBCC. This only works when both digits of each channel are identical. Shorthand HEX is useful in hand-written CSS for clean, simple colors, but most generated output uses the full six-character form.
One important characteristic of HEX is that it gives no intuitive information about what the color looks like. #4B9CF5 tells you very little without a color preview. This is the primary reason HSL was developed — it encodes human-perceptual attributes directly into the values.
RGB and RGBA
RGB represents color as three integer channels — Red, Green, Blue — each ranging from 0 to 255. CSS expresses this as rgb(75, 156, 245) or in the modern space-separated syntax rgb(75 156 245). RGBA adds a fourth alpha channel from 0.0 (transparent) to 1.0 (opaque): rgba(75, 156, 245, 0.5).
RGB maps directly to how displays produce color. Every pixel on an LCD, OLED, or LED screen is a cluster of three sub-pixels emitting red, green, and blue light at different intensities. When all three channels are at 255, you get white. When all three are at 0, you get black. The full RGB space contains 256³ = 16,777,216 distinct colors.
RGB is the natural format for programmatic color manipulation involving channel arithmetic. Tinting an image, blending two colors at a given ratio, or applying a color matrix transformation are all naturally expressed in RGB. However, RGB is a poor format for semantic adjustments — "make this 20% darker" is awkward in RGB but trivial in HSL.
CSS Color Level 4 introduces fractional and percentage RGB values: rgb(29% 61% 96%). This normalises the 0–255 range to 0.0–1.0, which is the convention used in graphics programming, WebGL shaders, and canvas drawing operations. Being comfortable with both ranges prevents off-by-one errors when moving between web CSS and canvas or WebGL code.
HSL — The Designer-Friendly Model
HSL encodes color as Hue (0–360 degrees on the color wheel), Saturation (0–100% from grey to fully saturated), and Lightness (0–100% from black to white). CSS expresses this as hsl(210, 89%, 63%). The enormous advantage of HSL is that the three values correspond directly to human color perception: hue is the "what color is it" axis, saturation is "how vivid is it", and lightness is "how bright or dark is it".
This makes HSL ideal for building programmatic color systems. If you want a set of button states — default, hover, active, disabled — you can define a base hue and saturation, then vary only the lightness. If you want a full palette of related colors for a design system, you fix the saturation and vary hue at regular 30-degree intervals around the wheel. These operations are trivial in HSL and awkward in RGB or HEX.
HSL is also the best format for CSS custom properties in design tokens. A token like --color-primary: hsl(210, 89%, 63%) is self-documenting in a way that --color-primary: #4B9CF5 is not. Any developer reading the variable knows immediately that it's a moderately saturated, medium-lightness blue, without needing a color preview.
One subtlety: HSL's lightness axis is perceptually non-linear. A yellow at 50% lightness looks much brighter than a blue at 50% lightness, because human eyes are more sensitive to green-yellow wavelengths. For accessibility work requiring precise luminance control, OKLCH (a newer CSS color function) provides perceptually uniform lightness. But for general-purpose UI development, HSL's approachability makes it the right default choice.
HSV — The Photographer's Model
HSV (also called HSB — Hue, Saturation, Brightness) shares the same hue axis as HSL but replaces the lightness axis with a "value" axis representing the maximum brightness of the color. The key difference: in HSL, pure saturated colors sit at 50% lightness. In HSV, they sit at 100% value. This makes HSV more intuitive when working with tints (adding white) and shades (adding black) independently.
HSV is the dominant color model in creative software. Adobe Photoshop, Illustrator, Figma, and most paint applications use HSV in their color pickers because artists find it easier to think in terms of "how dark should this color be allowed to get" (value) rather than "where is this on the black-to-white axis" (lightness). If you frequently copy colors from design tools into CSS, understanding the HSV-to-HSL conversion prevents systematic errors.
The conversion between HSV and HSL is straightforward mathematically. For a color with HSV values (H, S_v, V): Lightness = V × (1 − S_v/2), Saturation_hsl = (V − L) / min(L, 1−L) when L is not 0 or 1. Most color picker implementations handle this conversion internally, but knowing it exists helps you understand why a color that looks right in Figma may appear slightly off when you transcribe the values manually.
Practical Conversion in JavaScript
Converting between color models is a common task in frontend work. The browser's own canvas API works in RGBA. CSS animations often require HSL. Design tokens typically store HEX. A reliable conversion library or utility function eliminates an entire class of subtle color bugs.
A clean HEX-to-RGB conversion in JavaScript parses the hex string into three integer channel values. RGB-to-HSL requires normalising the channels to 0–1, finding the min and max channel values, computing lightness as their average, then computing saturation and hue based on the dominant channel. The inverse (HSL-to-RGB) uses sector-based computation across the six 60-degree hue segments.
Our free Color Picker tool handles all of these conversions in real time, entirely within your browser. No data is transmitted. You paste or pick a color in any format, and the equivalent values in all other formats appear instantly. This is useful during code review, design handoff, accessibility audits, and any workflow where you need to translate between the tool a designer used and the syntax your CSS requires.
Color Contrast and Accessibility
WCAG 2.1 accessibility guidelines require a minimum contrast ratio between text and background: 4.5:1 for normal text and 3:1 for large text. Contrast ratio is computed from relative luminance, which is derived from the RGB channel values using a linearisation formula that accounts for gamma encoding. This means contrast checking always starts with RGB, regardless of what format you're authoring in.
A practical workflow: author colors in HSL for their semantic clarity, check contrast ratios before committing them to your design system, and document both the HSL value (for human understanding) and the HEX value (for tool compatibility) in your token library. Any color that fails the 4.5:1 threshold for normal text should be adjusted — typically by modifying the lightness axis in HSL until the ratio is satisfied.
Color blindness affects approximately 8% of men and 0.5% of women. Deuteranopia (red-green blindness) is the most common variant. Relying solely on color to convey meaning — error states, success indicators, required form fields — fails this population entirely. Use color as a reinforcement of information that is also conveyed through shape, text, or iconography. Simulation tools that preview your palette under various color vision deficiencies are invaluable during the design review phase.
Building a Color System for Design Systems
A mature design system defines colors as semantic tokens layered over primitive tokens. Primitives are the raw color values: --blue-500: hsl(210, 89%, 63%). Semantics map these to purpose: --color-interactive: var(--blue-500). This separation means you can change the entire visual language of a product by modifying primitive values, without touching component-level code.
When generating a full color scale (100–900 shades) for a primitive color, the most reliable approach is to fix hue and saturation and vary lightness at regular intervals, then fine-tune individual steps where perceptual uniformity requires it. Tools like Radix Colors, Tailwind CSS's color palette, and Material Design's color system all use variations of this methodology.
Dark mode requires a separate semantic layer. A color that works for text on a light background will typically not work on a dark background — not because the HEX value is wrong, but because relative luminance relationships change when the background flips. Design your dark mode semantics independently, mapping the same primitive tokens to different assignments. Never simply invert colors — luminance inversion creates perceptually inconsistent results that feel wrong even if they technically meet contrast ratios.
Color is one of the richest topics at the intersection of design and engineering. Investing time to understand the mathematical models underlying the formats you use daily pays dividends in cleaner code, more accessible interfaces, and more productive conversations with design collaborators. Our Color Picker tool is built to support this learning and workflow — pick any color, explore all its representations, and carry the right format into whatever context you're working in.