CSS Color Picker
Generate harmonies, variations, conversions, contrast checks, and blindness simulation.
Selected Color
Color Harmonies
Color Variations
Color Conversion
| Format | Value | HTML/CSS Example |
|---|---|---|
| HEX | ||
| RGB | ||
| HSL |
Contrast Checker
Sample Text
Generate harmonies, variations, conversions, contrast checks, and blindness simulation.
| Format | Value | HTML/CSS Example |
|---|---|---|
| HEX | ||
| RGB | ||
| HSL |
CSS Color Picker is a free, browser-based design utility that generates color harmonies, lightness variations, format conversions, contrast checks, and color blindness simulations from any color you pick. No login or software download needed.
CSS Color Picker is an all-in-one color exploration tool built for designers and developers. Select a color using the native picker or enter a HEX code directly, and the tool instantly generates complementary, analogous, and triadic harmonies alongside lightness variations. A conversion table displays the color in HEX, RGB, and HSL formats with ready-to-copy CSS examples. The built-in contrast checker evaluates any text-background pair against WCAG AA and AAA standards, and the blindness simulator previews how your color appears under protanopia, deuteranopia, and tritanopia conditions.
Pick a color using the color input or type a HEX value into the text field. The tool recalculates all panels in real time: harmony swatches update, lightness strips regenerate, and the conversion table refreshes with the new color's HEX, RGB, and HSL values. To test accessibility, set a text color and background color in the contrast checker section -- the tool displays the contrast ratio and whether it passes WCAG AA or AAA thresholds. Scroll down to the blindness simulator to see how the selected color appears to users with common color vision deficiencies.