Color Picker with 11 Shades, WCAG Contrast & Nearest CSS Name

How the Color Picker Works

Pick any color to instantly get its HEX, RGB, and HSL values. Copy any format with one click.

You can also edit any format manually — type a HEX code, adjust an RGB channel, or tweak an HSL value — and all other fields update automatically.

Tips for Working with Colors

Use HSL for harmonious palettes. Keep the hue fixed and vary saturation and lightness. A primary blue at hsl(210, 70%, 50%) pairs naturally with hsl(210, 30%, 90%) as a background.
Check contrast for accessibility. WCAG AA requires at least 4.5:1 contrast between text and background. Use a dedicated contrast checker after picking your colors.
Use CSS custom properties. Save values as --color-primary: #3b82f6 to prevent color drift across a project.
Use HEX for CSS, RGB for programmatic manipulation, HSL for palette design. Each format suits a different workflow.

Understanding Color Models

HEX (hexadecimal) is the standard color format for the web. A six-character string like #3b82f6 encodes the red, green, and blue channels from 00 to FF. It's compact, widely supported by CSS and design tools, and the format you'll encounter most often in stylesheets and design handoffs. The main limitation is that HEX values aren't intuitive — it's hard to look at #3b82f6 and know it's a medium blue, which makes it less useful for exploratory palette work.

RGB (Red, Green, Blue) uses three numbers from 0 to 255 to describe how much of each light channel to mix. It maps directly to how screens emit light (additive mixing), making it the natural format for programmatic color work. If you're writing JavaScript to animate a color transition, tint an image, or blend two colors mathematically, RGB is easy to interpolate. rgb(59, 130, 246) is the same color as #3b82f6 — just in the format computers do arithmetic with most naturally.

HSL (Hue, Saturation, Lightness) is the most human-readable color model and the most useful for design work. Hue is the angle on the color wheel (0° = red, 120° = green, 240° = blue). Saturation controls vividness (0% = grey, 100% = fully saturated). Lightness controls brightness (0% = black, 100% = white, 50% = the pure color). The real advantage of HSL is that you can build harmonious palettes by fixing the hue and varying saturation and lightness — for example, hsl(210, 70%, 50%) for a primary button, hsl(210, 30%, 90%) for the background tint, and hsl(210, 100%, 30%) for a dark hover state. All three share the same hue, so they naturally look like they belong together.

Colors in Web Design: Best Practices

Good web color design starts with restraint. Limit your palette to 3–5 roles: a primary color (your brand or action color), a secondary color (supporting UI elements), an accent (highlights and calls to action), a neutral (text and borders), and a background. More than that creates visual noise. The 60-30-10 rule is a useful guide: 60% dominant neutral, 30% secondary, 10% accent. It mirrors what interior designers use and works in UI for the same reason — visual balance without monotony.

Color also carries psychological associations that affect how users perceive your brand. Blue is the most universally trusted color — it dominates in finance, healthcare, and technology because it reads as calm and reliable. Red communicates urgency and importance, making it effective for alerts and CTAs, but overuse creates anxiety. Green is associated with growth and success, which is why it shows up on confirmation messages and financial gain indicators worldwide. Yellow and amber signal caution without alarm. Worth noting: color associations vary across cultures — white is associated with mourning in some East Asian cultures, while red carries positive connotations in China. Always test on both light and dark backgrounds, and verify contrast ratios against WCAG guidelines before launching.

For the designer who needs to know if that blue actually passes WCAG before shipping

The WCAG contrast checker runs automatically against white and black backgrounds and shows badges for each level: AAA (7:1), AA (4.5:1), AA Large (3:1), or fail. Pick your foreground color and you instantly know where it stands — no copy-paste into a separate tool. The 11-shade lightness grid shows the same hue at evenly spaced lightness steps; click any swatch to apply it. Useful when you need a slightly lighter or darker variant without manually guessing HSL values.

The nearest CSS named color feature matches your picked color to the closest name from 50+ standard CSS color names — useful when writing code and wanting a readable fallback, or when a designer hands you a spec that says 'something like cornflowerblue' and you want to know the actual distance. The 12-color history panel keeps your recent picks without any account. Not every workflow needs this — if you just want a HEX value and nothing else, the picker works fine without touching any of these extras.

Frequently Asked Questions

How do I check color contrast for accessibility?

Copy your foreground and background HEX values and paste them into a WCAG contrast checker. Aim for 4.5:1 for normal text, 3:1 for large text (WCAG AA). A ratio of 7:1 meets the stricter AAA standard.

Can I enter a color code manually?

Yes. Use the Edit manually section to type into any HEX, RGB, or HSL field. All other fields update automatically. HEX works with or without the leading #.

What's HSL and why should I care?

Hue (0–360°), Saturation (0–100%), Lightness (0–100%). HSL is the most intuitive format for building palettes — adjust lightness to get tints and shades, adjust saturation to go from grey to vivid.

Which color format should I actually use in CSS?

For static colors in stylesheets, HEX is the most compact and widely recognized. For dynamic colors manipulated with JavaScript or CSS custom properties, RGB or HSL are more convenient because the individual channel values are easy to work with. HSL is particularly useful for theming systems — you can define a base hue and programmatically derive all tints, shades, and accent variations by adjusting only lightness and saturation. Modern CSS supports all three formats natively, and browsers accept them interchangeably.

How do I build a consistent color palette from a single brand color?

Start by converting your brand color to HSL. Then create a scale by keeping the hue and saturation fixed while stepping lightness in increments — for example, lightness 95% for a near-white background tint, 80% for a light hover state, 50% for the main brand color, 35% for a dark active state, and 20% for deep contrast text. This gives you a 5-step tonal scale that all harmonize naturally because they share the same hue. For an accent or complementary color, try a hue that is 180° opposite (complementary) or 120° away (triadic) on the color wheel. Use this picker to find your base color in HSL, then calculate the variants manually or in CSS custom properties.