Color Converter for Developers: HEX, RGB, HSL Explained

The Three Color Systems You Need to Know

As a developer, you encounter three main color formats in CSS and design tools. Each has strengths that make it the right choice in different situations.

HEX (#RRGGBB)

HEX colors represent red, green, and blue channels as hexadecimal values from 00 to FF. For example, #FF6B35 means maximum red (FF), moderate green (6B), and low blue (35), producing a warm orange.

When to use HEX:

• Copying colors from design files (Figma, Sketch, Adobe XD)
• Setting brand colors in CSS variables
• When you need a compact color representation
• Most common format in design handoffs

HEX shorthand: When each channel has a repeated digit, you can shorten the code. #FF6633 becomes #F63. This only works when both digits in each pair are identical.

RGB / RGBA

RGB uses decimal values from 0 to 255 for each channel. RGBA adds an alpha (opacity) channel from 0 to 1.

color: rgb(255, 107, 53);
background-color: rgba(255, 107, 53, 0.8);

When to use RGB/RGBA:

• When you need transparency (the A in RGBA)
• Programmatically calculating colors (interpolation, blending)
• Working with JavaScript canvas or image manipulation
• When values come from design tokens as separate R, G, B numbers

HSL / HSLA

HSL stands for Hue, Saturation, Lightness. This is the most human-friendly color model:

• Hue: The color wheel position (0-360 degrees). 0 = red, 120 = green, 240 = blue.
• Saturation: How vivid the color is (0% = gray, 100% = full color).
• Lightness: How bright or dark (0% = black, 50% = normal, 100% = white).

color: hsl(18, 100%, 60%);
background-color: hsla(18, 100%, 60%, 0.8);

When to use HSL:

• Creating color palettes and variations
• Adjusting a color (make it darker, lighter, or less saturated)
• Building theme systems with consistent hue families
• Dark mode color adaptation

Building Color Palettes with HSL

HSL makes color manipulation intuitive. Starting from a base color, you can create an entire palette by adjusting one value at a time:

Same hue, different shades:

--color-primary-100: hsl(220, 90%, 95%);  /* Very light */
--color-primary-300: hsl(220, 90%, 75%);  /* Light */
--color-primary-500: hsl(220, 90%, 50%);  /* Base */
--color-primary-700: hsl(220, 90%, 30%);  /* Dark */
--color-primary-900: hsl(220, 90%, 15%);  /* Very dark */

Only the lightness value changes. The hue and saturation stay consistent, guaranteeing a harmonious palette.

Accessibility: WCAG Color Contrast Standards

Color isn't just about aesthetics. Poor contrast makes text unreadable for users with visual impairments and can even affect readability in bright sunlight or on low-quality screens.

WCAG 2.1 Contrast Requirements

| Level | Normal Text | Large Text | |-------|-------------|------------| | AA (minimum) | 4.5:1 | 3:1 | | AAA (enhanced) | 7:1 | 4.5:1 |

Large text is defined as 18pt (24px) regular or 14pt (18.66px) bold.

Practical Contrast Tips

1. Never rely on color alone. Use icons, patterns, or labels alongside color to convey meaning (important for color-blind users).
2. Test with real content. A contrast ratio might pass technically but still feel hard to read with long paragraphs.
3. Light gray on white is the most common violation. Placeholder text, disabled states, and secondary text often fail contrast requirements.
4. Check both themes. A color that passes in light mode may fail in dark mode, and vice versa.

Designer-Developer Color Handoff

Miscommunication about colors is a common source of friction between designers and developers. Here are practical solutions:

Use Design Tokens

Instead of passing raw color values, establish a shared token system:

/* Don't do this */
color: #2563EB;

/* Do this */
color: var(--color-primary);

Tokens create a single source of truth. When the designer changes a brand color, only one variable needs updating.

Specify All States

For every UI element, clarify colors for:

• Default state
• Hover state
• Active/pressed state
• Disabled state
• Focus outline
• Dark mode variant

Format Agreement

Agree on a format early. If the design system uses HSL internally, developers should store values as HSL. A color converter helps bridge the gap when formats differ.

Dark Mode Color Strategy

Dark mode isn't just inverting colors. Here are key principles:

1. Reduce saturation. Highly saturated colors feel overwhelming on dark backgrounds. Reduce saturation by 10-20% for dark mode.
2. Use elevated surfaces, not pure black. Pure black (#000000) causes excessive contrast. Use dark grays like #1a1a2e or #121212 for backgrounds.
3. Flip the lightness scale. In HSL, your lightest shade becomes darkest and vice versa.
4. Test with real eyes. Some color combinations that look fine in light mode become eye-straining in dark mode.

Convert Colors Instantly

Use the Color Converter to translate between HEX, RGB, HSL, and more. You can also explore:

• CSS Gradient Generator to create smooth color transitions with live preview
• CSS Box Shadow Generator to add depth with properly colored shadows