Color Picker

Split the HEX code into three pairs: #RRGGBB. Convert each pair from base-16 to base-10. Example: #FF6B35 → R=FF=255, G=6B=107, B=35=53 → rgb(255, 107, 53). In JavaScript: parseInt('FF',16)=255. Alternatively, this tool does all conversions instantly — just enter the HEX value in the picker.

HSL stands for Hue, Saturation, Lightness. Hue is the color angle on the wheel (0°=red, 120°=green, 240°=blue). Saturation is vividness (0%=gray, 100%=full color). Lightness is brightness (0%=black, 50%=normal, 100%=white). HSL is more intuitive than RGB for design work — to make a color lighter, just increase L. To desaturate, decrease S. This makes creating color variations and tints far easier than manipulating RGB values.

WCAG 2.1 defines these standards: AA (minimum): 4.5:1 for normal text, 3:1 for large text (18pt+ or 14pt+ bold). AAA (enhanced): 7:1 for normal text, 4.5:1 for large text. Most legal accessibility requirements (ADA, EN 301 549) follow AA. Black text on white = 21:1. Dark gray #333 on white ≈ 12.6:1. Medium gray #767676 on white ≈ 4.48:1 (just passes AA). Always test your text/background combinations.

Both have Hue and Saturation, but differ in the third component. HSL Lightness: 0%=black, 50%=pure color, 100%=white. HSV Value (Brightness): 0%=black, 100%=pure color (white is S=0, V=100%). HSL is more common in CSS and web design. HSV is the standard in most design software color pickers (Photoshop, Figma, etc.) and maps more closely to how painters mix pigments. Both represent the same colors — they're just different mathematical models.

CSS custom properties (variables) are defined with double-dash prefix: --color-primary: #7c3aed; inside a selector (usually :root for global scope). Reference them with var(): color: var(--color-primary);. They cascade and inherit like other CSS properties. Modern design systems define an entire color scale as CSS variables, enabling instant dark mode: just redefine the variables inside @media (prefers-color-scheme: dark) or a .dark class.

CMYK (Cyan, Magenta, Yellow, Key/Black) is the color model used in color printing. Unlike RGB (additive, for screens), CMYK is subtractive — mixing inks absorbs light. C+M+Y theoretically = black, but pure black (K) is added for sharper text and to save ink. RGB and CMYK have different color gamuts — some vibrant RGB colors cannot be reproduced in print. This is why designs created on screen can look different when printed.

A tint is the result of mixing a color with white — it increases lightness while reducing saturation. A shade is mixing with black — it decreases lightness. A tone adds gray. Design systems (like Tailwind, Material Design) use numbered scales: 50 (lightest tint) through 950 (darkest shade). The 500 is usually the "base" color. Using consistent tint/shade scales ensures visual harmony across backgrounds, borders, hover states, and text.

Use this tool's contrast checker: pick your background color, then check the contrast ratio against black and white. For the text color that passes, use it. General rules: white text works well on dark, saturated colors (check ratio). Black text is usually best on light backgrounds. For mid-range colors (medium blue, green), calculate the ratio for both — sometimes neither pure black nor pure white passes AAA. Use the darkest shade that passes AA for regular text, or increase font size to qualify for the lower large-text threshold (3:1).

oklch is a modern perceptual color space gaining adoption in CSS (supported in all major browsers since 2023). It uses Lightness, Chroma (vividness), and Hue. Unlike HSL, oklch is perceptually uniform — two colors with the same L value actually look equally bright to human eyes. This makes oklch ideal for generating accessible color scales: colors at the same lightness look equally readable regardless of hue. CSS 4 color functions like oklch(70% 0.15 263) are becoming the modern alternative to HEX and HSL.

Start with a primary color that represents your brand. Then build: (1) Neutrals — grays for text, backgrounds, borders; (2) Semantic colors — success (green), warning (yellow), error (red), info (blue); (3) Tints/shades of your primary for hover states, backgrounds, accents. Keep it minimal — 3–5 hues maximum. Use HSL to create harmonious variations. Always check contrast for text/background pairs. Tools like Coolors, Adobe Color, and Tailwind's color palette are excellent starting points.