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.

Color Formats: When to Use Each

HEX (#FF6B35): the most common format in web CSS and design tools. Compact and human-readable for devs. Cannot express opacity (use 8-digit HEX for that: #FF6B3580).
RGB (rgb(255, 107, 53)): direct representation of screen phosphors. Easy arithmetic for color mixing. RGBA adds alpha (opacity 0–1) for transparency.
HSL (hsl(18, 100%, 60%)): Hue (0–360°), Saturation (0–100%), Lightness (0–100%). The most intuitive for designers — easy to create lighter/darker variants by adjusting L alone.
HSB / HSV (Photoshop's native): similar to HSL but uses "Brightness/Value" instead of Lightness. A fully saturated HSB color at B=100% is the purest form; in HSL, L=50% is purest. Useful to know when translating specs from Photoshop or Figma.
OKLCH (oklch(0.65 0.22 28)): the new perceptual color space in CSS Color Level 4. Adjusting L doesn't cause perceived saturation shifts — better for design systems and accessible color generation. Used in Tailwind CSS v4.

Practical Color Tips for Non-Designers

Avoid pure black for body text. #000000 creates harshness against white. Most design systems use a dark gray like #111827 or #1F2937 for better readability and a softer feel.
60–30–10 rule: 60% background (dominant neutral), 30% primary color, 10% accent. This ratio creates visual balance without monotony, the same principle interior designers use.
Warm vs. cool neutrals: warm neutrals (beige, cream, off-white) feel approachable and friendly. Cool neutrals (blue-gray, slate) feel professional and focused. Pick based on the emotional tone you want.
Building a palette from one color: convert to HSL, lock the hue, then create tints (increase L toward 100%) and shades (decrease L toward 0%). Five steps — 95%, 80%, 50%, 35%, 20% — give you a complete tonal scale ready for CSS custom properties.

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.

How do I convert a HEX color to RGB?

Each pair of hex digits represents a color channel: #FF6B35 → R=FF=255, G=6B=107, B=35=53. In CSS: rgb(255, 107, 53). Most color pickers (including this one) convert automatically. For JavaScript: parseInt("FF", 16) = 255.

What color format should I use in CSS?

For static colors in CSS, HEX is the most compact. For colors with opacity, use rgba() or the 8-digit HEX (#FF6B3580 where 80 = ~50% opacity). For dynamic colors in JavaScript (creating tints/shades programmatically), HSL is the most intuitive. Modern CSS supports oklch() for perceptually uniform colors in design systems.