🎨 Color Picker — HEX RGB HSL Converter

Complete Guide: Color Picker — HEX, RGB & HSL Converter

What Color Formats Mean and Why They Matter

Every color on a digital screen is ultimately stored as three numbers representing red, green, and blue channel intensities. The three common CSS representations — HEX, RGB, and HSL — express those same numbers differently, and each has practical advantages depending on context.

HEX (#7c6af7) is the most compact notation. Two hex digits per channel (00–FF = 0–255). It's the universal default in CSS, design tools, and anywhere humans exchange color codes. Shorthand is possible when both digits match: #aabbcc = #abc.

RGB (rgb(124, 106, 247)) uses decimal values 0–255 per channel. The rgba() variant adds an opacity channel (0–1), making it the go-to format when you need transparency: rgba(124, 106, 247, 0.5). Modern CSS4 consolidates both into rgb(124 106 247 / 50%).

HSL (hsl(248, 89%, 69%)) — Hue (0–360°), Saturation (0–100%), Lightness (0–100%) — is the most intuitive format for human reasoning. Hue is the color wheel position; saturation is how vivid vs gray; lightness is how bright vs dark. To create a darker shade: decrease lightness. To desaturate: lower saturation. This makes HSL essential for programmatically generating color palettes, hover states, and accessible contrast variations.

How to Use the Color Picker

1. Click the color swatch to open your browser's native color picker, or type directly into any field (HEX, R/G/B, or H/S/L).
2. All formats update in real-time — change one and all others follow instantly.
3. Use the CSS Output section to copy any format as a ready-to-use CSS value.
4. Check the contrast ratio (displayed below the preview) against white and black backgrounds for accessibility compliance.

Code Examples

/* CSS: using HSL to create a color scale */
:root {
  --brand-h: 248;
  --brand-s: 89%;
  --brand:         hsl(var(--brand-h), var(--brand-s), 69%);
  --brand-dark:    hsl(var(--brand-h), var(--brand-s), 45%);
  --brand-light:   hsl(var(--brand-h), var(--brand-s), 88%);
  --brand-muted:   hsl(var(--brand-h), 30%, 69%);
}

/* JavaScript: convert HEX to RGB */
function hexToRgb(hex) {
  const r = parseInt(hex.slice(1,3), 16);
  const g = parseInt(hex.slice(3,5), 16);
  const b = parseInt(hex.slice(5,7), 16);
  return { r, g, b };
}

/* JavaScript: calculate WCAG contrast ratio */
function relativeLuminance(r, g, b) {
  const [rs, gs, bs] = [r,g,b].map(c => {
    c /= 255;
    return c <= 0.03928 ? c/12.92 : ((c+0.055)/1.055)**2.4;
  });
  return 0.2126*rs + 0.7152*gs + 0.0722*bs;
}
function contrastRatio(hex1, hex2) {
  const l1 = relativeLuminance(...Object.values(hexToRgb(hex1)));
  const l2 = relativeLuminance(...Object.values(hexToRgb(hex2)));
  const [L, D] = l1 > l2 ? [l1, l2] : [l2, l1];
  return (L + 0.05) / (D + 0.05);
}
// contrastRatio('#7c6af7', '#ffffff') → ~3.1 (fails WCAG AA for body text)

Common Mistakes to Avoid

• Using color alone to convey meaning — Red for errors, green for success: always pair color with an icon or text label. About 8% of men have color vision deficiency.
• Ignoring contrast ratios — WCAG AA requires 4.5:1 for normal text, 3:1 for large text (18px bold or 24px regular). Decorative or disabled elements are exempt.
• Hard-coding RGB for color variations — If you need a lighter shade in JavaScript, rgb(124, 106, 247) tells you nothing. Convert to HSL first, then adjust lightness.
• Using #000 or #fff for text colors — Pure black on white causes visual vibration for some readers. Use near-black (#1a1a2e) and near-white (#f8f8ff) for more comfortable reading.
• Mixing format conventions — Keep one format consistent per project. Mixing HEX and rgb() makes CSS harder to maintain and search.

Comparison with Alternatives

Browser DevTools color picker is excellent for picking colors from an existing page but requires opening DevTools and doesn't show all formats simultaneously. Figma / Sketch have integrated color systems but are overkill for quick color conversion. ColorZilla browser extension provides an eyedropper for any pixel on screen but requires installation. OKLCH is the next-generation CSS color format (perceptually uniform, wider gamut) — worth learning but not yet universal in all CSS workflows.

Build complete color palettes from a single base color with the Color Palette Generator. Generate gradient backgrounds using multiple colors with the CSS Gradient Generator.

Pro Tips

• CSS custom properties for theming: Store base hue and saturation as variables, then define the full scale using only lightness variations. Changing the brand color means changing one variable.
• HSL for hover states: filter: brightness(1.1) is the lazy approach; hsl(248, 89%, calc(69% + 10%)) gives precise, predictable results.
• OKLCH for modern CSS: oklch(63% 0.18 265) is perceptually uniform — equal lightness steps look visually equal across all hues, unlike HSL where blue at 50% lightness looks darker than yellow at 50%.
• Color contrast checker: Run your text/background color pairs through a contrast checker before shipping. Lighthouse's accessibility audit will catch WCAG failures too.