Understanding Color Models
Color models are mathematical descriptions of how colors are represented in digital systems. Each model defines a coordinate system in which every perceivable color maps to a specific point. For developers, three models dominate the web: HEX, RGB, and HSL, each with its own strengths and conventions.
RGB (Red, Green, Blue) is the foundational additive color model of digital displays. It represents colors as combinations of three primary light channels, each ranging from 0 to 255 in 8-bit depth. The model mirrors how screens physically produce color: by emitting varying intensities of red, green, and blue light. HEX is simply RGB written in hexadecimal notation — #FF8800 is the same color as rgb(255, 136, 0) — favored because it is compact and unambiguous in code and design files.
HSL (Hue, Saturation, Lightness) is a cylindrical representation designed to be more intuitive for humans. Hue is the color itself, expressed as an angle from 0 to 360 degrees around the color wheel. Saturation is the intensity of the color, from 0% (gray) to 100% (fully saturated). Lightness is how light or dark the color is, from 0% (black) through 50% (pure color) to 100% (white). HSL makes it easy to create color variations by adjusting one property at a time, which is far harder in RGB.
- RGB: additive model matching how screens emit light
- HEX: RGB in hexadecimal notation, compact for code
- HSL: intuitive model with separate hue, saturation, lightness
- HSLA / RGBA: extend the models with an alpha channel for transparency
HEX vs RGB vs HSL: When to Use Each
Each color model has contexts where it shines. HEX is the de facto standard in HTML, CSS, and design tools like Figma and Photoshop. Its compact six-character form (or eight with alpha) is easy to copy, paste, and share in chat or documentation. When a designer hands off a color, they almost always give it as a HEX value, and most design systems list brand colors in HEX.
RGB and RGBA are most useful in programming contexts where you need to manipulate individual channels. Animation libraries, canvas drawing code, and image processing all work naturally with RGB because each channel is an explicit numeric value. The rgba() function in CSS adds an alpha channel for transparency, which HEX only supports in the less-common eight-digit form (#RRGGBBAA).
HSL is the right choice whenever you need to generate color variations programmatically. Want a button hover state that is 10% darker? Decrease lightness by 10 in HSL — a single, predictable change. In RGB, darkening requires scaling all three channels, which behaves differently for different starting colors. HSL also makes it trivial to generate a monochromatic palette (vary lightness), a complementary palette (add 180 to hue), or an analogous palette (vary hue by ±30). Use HSL for design tokens, theme generation, and any code that manipulates color relationships.
- HEX: design files, brand colors, copy-paste-friendly shorthand
- RGB / RGBA: programmatic channel manipulation and canvas drawing
- HSL / HSLA: generating variations, palettes, and theme systems
- Use HSL whenever you need predictable lightness or hue shifts
Color Conversion Mathematics
Converting between color models is a common task that every developer working with color will eventually face. The conversions are well-defined mathematical operations, and understanding them helps you write code that does not rely on heavy libraries for simple tasks.
Converting HEX to RGB is straightforward: parse each pair of hexadecimal characters as a number from 0 to 255. The first pair is red, the second green, the third blue. The reverse — RGB to HEX — is a matter of formatting each channel as a two-digit hex string, padding with a leading zero if necessary. Both conversions are lossless and can be done in a few lines of any programming language.
RGB to HSL conversion is more involved. First normalize each channel to the range 0-1 by dividing by 255. Find the maximum and minimum of the three normalized channels; lightness is their average. Saturation is zero if max equals min (a gray), otherwise it is (max-min)/(1-|2*lightness-1|). Hue is computed from which channel is max and the relative differences between channels, then converted to degrees. HSL to RGB reverses this process using a piecewise function based on the hue sector. These conversions are deterministic but lossless only within the sRGB gamut; colors outside that gamut cannot be represented in any of these three models.
- HEX <-> RGB: simple base-16 parsing, fully lossless
- RGB -> HSL: normalize, then compute hue, saturation, lightness
- HSL -> RGB: piecewise function based on hue sector
- All three models are limited to the sRGB color gamut
Accessibility and Color Contrast
Color contrast is one of the most important — and most overlooked — aspects of accessible web design. The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios between text and its background to ensure readability for users with low vision, color blindness, or simply poor viewing conditions. Failing to meet these ratios excludes users and, in many jurisdictions, creates legal liability.
WCAG 2.1 defines two conformance levels. Level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold). Level AAA, the strictest level, requires 7:1 for normal text and 4.5:1 for large text. Non-text UI components such as icons and form-field borders require at least 3:1 against adjacent colors. These ratios are calculated using the relative luminance of each color, which is a weighted sum of the (gamma-corrected) RGB channels reflecting the human eye's varying sensitivity to different wavelengths.
Designers often assume that a color combination "looks fine" and skip formal contrast checks, but perception is unreliable — especially for designers with normal vision designing for users with color vision deficiencies. Always verify contrast with a calculator that uses the WCAG formula, and test designs with simulated color blindness. Tools that overlay contrast warnings on a design in real time catch issues early, when they are cheapest to fix.
- WCAG AA: 4.5:1 for normal text, 3:1 for large text and UI components
- WCAG AAA: 7:1 for normal text, 4.5:1 for large text
- Contrast is calculated from relative luminance, not raw RGB values
- Always test with simulated color blindness, not just by eye
Designing with Color Palettes
A well-designed color palette gives a product a cohesive, intentional feel. A poor palette makes even a well-built product look amateur. The difference usually comes down to a few principles that any developer can learn and apply, even without formal design training.
Start with a small set of base colors — typically one primary, one or two accent colors, and a neutral palette of grays. Five to eight colors is enough for most products; adding more creates inconsistency and decision fatigue. Define each base color in multiple shades (often 50, 100, 300, 500, 700, 900) so you have a gradient from very light to very dark for use in backgrounds, borders, and text. The 50 and 100 shades are useful for subtle backgrounds and hover states; the 700 and 900 shades are essential for text on light backgrounds.
Use the 60-30-10 rule as a starting point for applying your palette: 60% of the interface uses a dominant color (usually a neutral), 30% uses a secondary color (often a brand color), and 10% uses an accent for calls to action and highlights. This creates visual balance and prevents any single color from overwhelming the design. Document your palette as design tokens — named variables rather than raw hex values — so colors are used consistently and can be re-themed without hunting through the codebase.
- Limit your palette to 5-8 base colors with multiple shades each
- Apply the 60-30-10 rule for visual balance
- Define colors as design tokens, not hardcoded hex values
- Include semantic colors for success, warning, error, and info states
Tools for Color Management
A good color picker tool is essential for any developer or designer working with color. At minimum, it should let you select a color visually, see its value in HEX, RGB, and HSL, and copy any of those representations to the clipboard. More advanced features — eyedroppers, palette generation, contrast checking, and gradient builders — make a tool genuinely useful rather than merely functional.
An eyedropper that samples any pixel on your screen is invaluable when matching colors from existing designs, screenshots, or brand assets. Modern browsers expose the EyeDropper API, which lets web-based tools sample from anywhere on the user's screen — not just within the browser tab. This narrows the gap between web tools and native applications, making a browser-based color picker a viable replacement for OS-level utilities.
Our Color Picker combines all these capabilities in a single browser-based tool. Pick colors visually or by entering any of HEX, RGB, or HSL, and the others update in real time. Sample any color on your screen with the eyedropper, generate harmonious palettes with a single click, and check contrast ratios against WCAG thresholds as you work. Everything runs locally in your browser, so your color exploration is never sent to a server.
- Visual color selection with live HEX, RGB, and HSL display
- Eyedropper for sampling any pixel on screen
- Palette generation for complementary, analogous, and triadic schemes
- Built-in WCAG contrast checker for accessibility validation
- All processing happens locally — no data leaves your browser