How to Use the Color Picker

Pick a color visually — click anywhere on the color gradient to select a hue and saturation.
Adjust brightness — use the brightness slider to make the selected color lighter or darker.
Enter a color value — type directly in HEX (#FF5733), RGB (255,87,51), or HSL (11,100%,60%) format to jump to a specific color.
Copy in any format — copy the color value as HEX, RGB, RGBA, HSL, or CSS color name.
Use the eyedropper — if supported by your browser, use the eyedropper tool to sample a color from anywhere on your screen.

🎨 Quick color formats: HEX (#FF5733) — used in HTML/CSS, most common. RGB (255,87,51) — used in image editors and some CSS. HSL (11°,100%,60%) — most intuitive for designers (hue, saturation, lightness). RGBA/HSLA — same as RGB/HSL with added alpha (opacity) channel from 0 to 1.

Understanding Color in Web Design

🎨 HEX Color Format

#RRGGBB — 6 hexadecimal digits representing red, green, blue channels (0-255 each). #FF0000 = pure red. #00FF00 = pure green. #0000FF = pure blue. #000000 = black. #FFFFFF = white. Shorthand #RGB available when both digits in each pair are identical: #FF5533 = #F53.

🔴 RGB Color Model

Red, Green, Blue — the additive color model used by screens. Each channel 0–255. rgb(255,0,0) = red. rgb(0,0,0) = black. rgb(255,255,255) = white. rgba() adds alpha transparency: rgba(255,0,0,0.5) = 50% transparent red. The model reflects how screens physically produce light.

🌈 HSL Color Model

Hue (0–360°), Saturation (0–100%), Lightness (0–100%). More intuitive than RGB: hue is the 'color wheel position,' saturation is color intensity (0% = grey), lightness is brightness (0% = black, 50% = full color, 100% = white). Easier to reason about: 'make it lighter' = increase L value.

♿ Color Contrast and Accessibility

WCAG 2.1 requires minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt+ bold). Contrast ratio is calculated from relative luminance of foreground and background colors. Poor contrast makes text unreadable for people with low vision. Tools like WebAIM Contrast Checker verify compliance.

🎯 Color Psychology

Red: urgency, danger, passion (sale buttons, error states). Blue: trust, calm, professional (banks, tech companies). Green: success, nature, health (confirmation states, eco brands). Yellow: warning, optimism, attention. Orange: energy, creativity, calls to action. Purple: luxury, creativity. Color choices affect user perception and conversion rates.

🖌️ CSS Color Functions

Modern CSS supports: color-mix(in srgb, red 50%, blue) for mixing. oklch() for perceptually uniform color space. color() for wide-gamut display P3 colors. light-dark() for automatic dark mode colors. These new functions are increasingly supported and provide more powerful color manipulation than traditional HEX/RGB.

Color in Development and Design

Design token systems

Rather than using raw color values throughout a codebase, design systems define named color tokens: --color-primary: #7fff6f; --color-error: #ff4444; --color-background: #0c0c0e. These semantic names (primary, error, background) are used in components instead of raw hex values. When the brand color changes, updating one token updates the entire application. Tailwind CSS, Material Design, and all modern design systems use this token approach.

Dark mode color strategy

Dark mode requires rethinking color for each theme. Strategies: avoid pure black (#000) — use near-black (#0c0c0e, #121212) for reduced eye strain. Reduce saturation of accent colors — vivid colors appear harsher on dark backgrounds. Don't simply invert colors — lightness values need redesigning, not just flipping. CSS custom properties make dual-theme implementation clean: define all colors as variables, swap variable values with a data-theme attribute or prefers-color-scheme media query.

Color accessibility checklist

Never rely on color alone to convey information — colourblind users (8% of males, 0.5% of females) cannot distinguish red/green or blue/yellow combinations. Always accompany color cues with text, icons, or patterns. Test designs with colorblindness simulators (Coblis, Stark plugin). Check all text/background combinations with a contrast ratio tool. WCAG AA (4.5:1 ratio) is the legal requirement in many jurisdictions for public-facing digital products.

🎨 Essential color tools: Coolors.co — generate and explore color palettes. Paletton.com — complementary/analogous palette generator. Adobe Color — harmony rules. WebAIM Contrast Checker — accessibility validation. ColorZilla browser extension — eyedropper for any webpage. These tools complement the color picker for professional design work.

Frequently Asked Questions

What is the difference between HEX, RGB, and HSL?

All three describe the same color in different formats. HEX (#3266AD) is used in HTML/CSS. RGB (rgb(50, 102, 173)) defines red, green, blue channels from 0–255. HSL (hsl(214, 55%, 44%)) — hue (color), saturation (intensity), lightness — is more intuitive for adjusting colors.

What is WCAG contrast ratio?

WCAG (Web Content Accessibility Guidelines) requires a minimum 4.5:1 contrast ratio between text and background for normal text (AA standard), and 3:1 for large text. A higher ratio means better readability, especially for users with visual impairments.

How do I convert HEX to RGB?

Split the HEX code into three 2-character pairs and convert each from base-16 to base-10. Example: #3266AD → R: 0x32=50, G: 0x66=102, B: 0xAD=173. This tool does the conversion automatically.

What does HSL make easier?

HSL separates color identity (hue) from how vivid (saturation) and how light (lightness) it is. To make a color darker, reduce L. To make it less vivid, reduce S. To get the complementary color, add 180° to H. This is much more intuitive than adjusting RGB channels.

Color Picker & Converter