Color Picker Guide: HEX, RGB, HSL Conversion Explained
Why Color Models Matter
Every color you see on a screen or in print is described by a color model — a mathematical system that defines how colors are represented and mixed. The model you choose determines how easily you can adjust brightness, create color scales, convert for print, and ensure accessible contrast. Developers work with HEX values in CSS. Designers reach for HSL because it maps to how humans think about color. Printers use CMYK. Understanding each model — and how to move between them — makes you faster and more intentional when working with color on the web.
The good news is that any color expressible in one model can be expressed in another. The conversions are deterministic math. Once you understand the structure of each system, you can read a color value cold, predict how it will look, and know which format to hand off in any given context.
HEX Colors Explained
HEX (hexadecimal) color notation is the most widely recognized format in web development. A HEX color is a six-character string prefixed with a # sign, where each pair of characters represents the Red, Green, and Blue channels respectively — each encoded as a two-digit base-16 number from 00 (0 in decimal) to FF (255 in decimal).
For example, #FF5733 breaks down as: Red = FF (255), Green = 57 (87), Blue = 33 (51). That's a vivid orange-red. Pure white is #FFFFFF — all channels at maximum. Pure black is #000000 — all channels at zero. The color #4D8DFF is a medium blue: Red = 77, Green = 141, Blue = 255.
HEX also supports a three-character shorthand when each channel's two digits are identical. #RGB expands to #RRGGBB. So #F53 is equivalent to #FF5533, and #0AF is equivalent to #00AAFF. Browsers interpret both forms identically. The shorthand only applies when both digits of each channel match — #FF5733 cannot be shortened.
A newer variant, #RRGGBBAA, adds an alpha (opacity) channel as an eighth hex digit pair. #FF573380 is the same orange-red at 50% opacity (80 hex = 128 decimal = ~50% of 255). The three-character shorthand extends to four characters for transparency: #RGBA.
HEX is the default format for most color pickers, design tools, and CSS stylesheets. Its main drawback is that adjusting a color "by feel" requires converting the hex math mentally — which is why designers usually prefer HSL for that work.
RGB Color Model
RGB stands for Red, Green, Blue. It is an additive color model: you start with darkness (0, 0, 0) and add light. Mixing red and green light at full intensity produces yellow. Mixing all three at maximum produces white. This reflects how screens actually work — LCD, OLED, and LED displays emit light in these three channels, which your eyes combine into the full visible spectrum.
Each channel ranges from 0 to 255, giving 256 possible values per channel and 256³ = 16,777,216 possible colors in total. In CSS, the syntax is rgb(red, green, blue). For example:
rgb(255, 87, 51)— the same orange-red as#FF5733rgb(0, 0, 0)— blackrgb(255, 255, 255)— whitergb(77, 141, 255)— medium blue
CSS also supports rgba(), which adds a fourth parameter for alpha transparency on a 0–1 scale. rgba(255, 87, 51, 0.5) renders the same orange-red at 50% opacity. Modern CSS (Level 4) allows rgb() itself to accept the alpha value as a fourth argument separated by a slash: rgb(255 87 51 / 50%).
RGB is practical when you need precise channel control — for example, guaranteeing a specific red for brand compliance, or interpolating between two colors programmatically. It is less intuitive for creating harmonious color palettes or adjusting lightness without shifting hue, which is where HSL shines.
HSL Color Model
HSL stands for Hue, Saturation, Lightness. It is a cylindrical representation of the RGB color cube, designed to be more human-readable. Rather than specifying how much of each primary color to mix, HSL lets you say "I want a medium-saturated blue that's slightly lighter than the baseline."
Hue is expressed as an angle on the color wheel from 0° to 360°. Red is at 0°/360°, green at 120°, blue at 240°. Hues at 30° are orange, 60° are yellow, 180° are cyan, 300° are magenta. Hue is the pure identity of the color, independent of how vivid or light it is.
Saturation is a percentage from 0% to 100%. At 100% the color is fully saturated — maximum vividness for that hue. At 0% the color is completely desaturated, rendering as a gray (the specific shade of gray depends on the Lightness value).
Lightness is also a percentage from 0% to 100%. 0% is always pure black regardless of hue or saturation. 100% is always pure white. 50% is the "pure" color at full saturation. Values below 50% darken the color; values above 50% lighten it toward white.
The CSS syntax is hsl(hue, saturation%, lightness%). Examples:
hsl(11, 100%, 60%)— orange-red (equivalent to #FF5733)hsl(0, 0%, 0%)— blackhsl(0, 0%, 100%)— whitehsl(220, 100%, 65%)— medium blue
HSL is the preferred format for generating color scales in design systems. To create a 9-step scale from a base color, keep the hue and saturation fixed and vary the lightness from 10% to 90% in even steps. This produces a perceptually even range from dark to light. Contrast this with RGB or HEX, where the same operation requires channel arithmetic that doesn't map naturally to perceived brightness.
CSS also has hsla() for adding an alpha channel, with the same syntax as rgba(). Modern CSS Level 4 syntax allows hsl(220 100% 65% / 80%) with space-separated values and a slash before alpha.
CMYK: Subtractive Color for Print
CMYK stands for Cyan, Magenta, Yellow, and Key (Black). Unlike RGB's additive model (mixing light), CMYK is a subtractive model designed for ink on paper. Each ink absorbs (subtracts) certain wavelengths of light and reflects others. Cyan absorbs red, magenta absorbs green, yellow absorbs blue.
In theory, mixing full Cyan, Magenta, and Yellow should produce black. In practice, it produces a muddy dark brown — so a separate black (Key) ink is added both for true blacks and to reduce ink consumption on dark areas. This is why professional printing uses four ink cartridges.
CMYK values are typically expressed as percentages: C: 0%, M: 66%, Y: 80%, K: 0% is the equivalent of the orange-red #FF5733 in CMYK space. Pure white in CMYK is 0%, 0%, 0%, 0% — no ink at all, letting the paper show through. Pure black is 0%, 0%, 0%, 100% — or a "rich black" using all four channels.
Web browsers and CSS do not support CMYK natively. Screens use RGB. CMYK is used when preparing assets for commercial printing — offset lithography, digital presses, large-format printers. When a designer exports a logo for a print vendor, they convert the RGB/HEX values to CMYK and verify the output under print simulation profiles. The same color can look different in CMYK print versus RGB screen because the gamuts (range of reproducible colors) are different — CMYK has a narrower gamut than sRGB.
Conversion Reference: HEX, RGB, and HSL
Here are the practical conversion formulas for the three web-facing color models:
| Conversion | Method |
|---|---|
| HEX to RGB | Split into three 2-char pairs; convert each from base-16 to decimal. #FF5733 → R=255, G=87, B=51 |
| RGB to HEX | Convert each decimal channel to 2-digit hex; concatenate with #. R=77, G=141, B=255 → #4D8DFF |
| RGB to HSL | Normalize channels to 0–1; find max/min; Hue = 60° × (segment + delta ratio); Saturation = delta / (1 − |2L − 1|); Lightness = (max + min) / 2 |
| HSL to RGB | Compute chroma C = (1 − |2L − 1|) × S; find intermediate value X = C × (1 − |H/60 mod 2 − 1|); map to RGB sector based on H; add lightness offset m = L − C/2 |
For day-to-day work, there is no reason to do this math by hand. Use a color picker tool that converts between formats instantly. The formulas are useful to know so you understand what the conversion is doing, and to debug edge cases (like why a pure gray loses its hue when round-tripped through HSL).
Pick and Convert Colors Instantly
Use the SnapUtils Color Picker to choose any color and get the HEX, RGB, and HSL values instantly. No sign-up required.
Open Color Picker →CSS Colors in Practice
CSS supports several color syntaxes beyond HEX, RGB, and HSL. Understanding all of them helps you write cleaner, more maintainable stylesheets.
Named Colors
CSS defines 148 named colors — keywords like red, steelblue, tomato, rebeccapurple, and hotpink. Each resolves to a specific HEX value. tomato is #FF6347; steelblue is #4682B4. Named colors are convenient for prototyping but should be replaced with custom values in production designs where exact brand colors matter.
currentColor
The keyword currentColor is a dynamic value that resolves to the element's computed color property. It is most useful for SVG fills and strokes (fill: currentColor) and for borders that should match text color (border-color: currentColor). Using currentColor keeps icon colors in sync with surrounding text automatically, without requiring separate class overrides.
CSS Custom Properties
CSS custom properties (variables) are the backbone of modern design systems. You define a color once and reference it everywhere:
:root { --color-primary: #00e599; }button { background: var(--color-primary); }
When combined with a theme system ([data-theme="dark"] overrides), custom properties let you implement dark mode with minimal code. Define the palette once per theme, reference variables throughout — the browser swaps values on theme change without JavaScript touching individual elements.
oklch() — Modern Perceptual Color Spaces
CSS Color Level 4 introduced oklch(), which encodes color as Lightness (0–1), Chroma (0+), and Hue (0–360°). Unlike HSL, oklch is perceptually uniform — two colors with the same Lightness value actually look the same brightness to human eyes, regardless of hue. This makes oklch() the best choice for generating accessible color scales in 2026, but browser support should be verified and fallback values provided for older environments.
Color Theory Basics
The color wheel is a circular arrangement of hues. Colors opposite each other on the wheel are complementary — they create maximum contrast when paired. Colors adjacent to each other are analogous — they create harmony and visual cohesion. Understanding these relationships helps you build palettes that are either dynamic (high contrast) or calm (low contrast) by design.
Complementary Colors
Complementary colors sit 180° apart on the HSL hue wheel. Blue (220°) is complementary to orange (40°). Red (0°) is complementary to cyan (180°). Pairing a saturated primary color with its complement creates maximum visual tension and is effective for call-to-action buttons against a neutral background. Use sparingly — full complementary pairings at equal saturation can vibrate uncomfortably.
Analogous Colors
Analogous colors span 30°–60° of the hue wheel. A palette built from hues at 210°, 230°, and 250° — all in the blue-to-indigo range — creates a serene, cohesive look. Analogous palettes are common in interfaces that want to feel calm and unified rather than dynamic.
Triadic Color Schemes
A triadic scheme uses three hues spaced 120° apart on the wheel: for example, red (0°), green (120°), and blue (240°). Triadic palettes are visually rich but harder to balance. Typically one hue dominates, one supports, and the third accents — maintaining contrast while avoiding chaos.
Palette Generation Tips
Great palettes follow predictable structural rules that make them flexible across an entire product.
The 60/30/10 Rule
Allocate your palette as: 60% neutral (background, surface), 30% primary brand color (headings, key UI elements), 10% accent (CTAs, highlights, badges). This proportion keeps the design from feeling overwhelming while ensuring the brand color reads clearly. The accent 10% should be the most saturated color in the palette — its rarity is what makes it pop.
Building a Color Scale
For any brand hue, generate a 9-step scale: fix the hue and saturation, then set lightness at 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90%. The darkest shades (10%–30%) work for dark backgrounds and text. Mid-range shades (40%–60%) work for UI components. Light shades (70%–90%) work for hover states and subtle backgrounds. Test the 50% value against both a very dark and very light background — it should have sufficient contrast for neither use case to require a different color entirely.
Dark Mode Palettes
Dark mode is not simply "invert the colors." Inverting a light mode palette produces flat, washed-out results with poor depth. Instead, build a separate dark palette: use very dark near-blacks (HSL lightness 5%–12%) for backgrounds, dark grays (15%–25%) for surfaces and cards, and keep brand accent colors at the same hue but adjusted to slightly lower saturation to reduce visual fatigue on dark backgrounds. Shadows in dark mode should be made with semi-transparent overlays, not lighter grays, to maintain depth cues.
WCAG Contrast Checking
The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios between foreground text and background colors. These ratios ensure that users with low vision, color blindness, or in bright lighting conditions can read your content. Non-compliant contrast is one of the most common accessibility failures on the web — and also one of the easiest to fix.
Contrast ratio is calculated from the relative luminance of two colors, on a scale from 1:1 (no contrast — identical colors) to 21:1 (maximum contrast — pure black on pure white). The formula uses linearized RGB values and weights channels by the eye's sensitivity to each (green receives the highest weight, blue the lowest).
WCAG Level AA
Level AA is the standard target for most public-facing web products and is required by many accessibility laws including the ADA (US), AODA (Canada), and EAA (EU). Requirements:
- Normal text (under 18pt or 14pt bold): minimum 4.5:1 contrast ratio
- Large text (18pt+ or 14pt+ bold): minimum 3:1 contrast ratio
- UI components and graphical objects: minimum 3:1 against adjacent colors
WCAG Level AAA
Level AAA is the enhanced standard, required by some government and healthcare applications:
- Normal text: minimum 7:1 contrast ratio
- Large text: minimum 4.5:1 contrast ratio
AAA is not required for all content but is the target for body text in high-criticality interfaces — medical records, legal documents, emergency notifications. A contrast ratio of 7:1 is very high — it requires near-black text on near-white backgrounds for small text sizes.
Practical Contrast Checking
When choosing a text color against a background, compute the contrast ratio before committing. Common failures include medium gray text on white (a popular "modern" aesthetic that fails AA for normal text), colored buttons with white text where the brand color is too light, and placeholder text in form inputs that designers set to 30–40% opacity.
A useful heuristic: if you squint at your screen and the text becomes hard to read, it probably fails contrast requirements. But squinting is not a substitute for measurement — use a color picker with built-in contrast checking, or a dedicated contrast checker, to get exact ratios. Tooling makes this check take seconds.