Color Picker
Choose one precise color, translate it across modern CSS formats and explore a coordinated light-to-dark scale.
Screen color picking is not supported in this browser.
Generated scale
How to use Color Picker
- 1
Drag within Saturation and value, adjust Hue and Opacity, or use the native color control to choose a starting color.
- 2
If your browser supports it, click Pick from screen and select a color from another visible area.
- 3
Enter or refine the value directly in HEX, RGB, HSL or OKLCH; valid changes synchronize every representation.
- 4
Copy one format, copy all values or copy the generated scale as CSS variables.
- 5
Select any lighter or darker swatch to make it the current color, or press Reset to restore the original state.
Frequently asked questions
About Color Picker
Color Picker keeps four useful representations of the same color in agreement. Designers can work visually with hue, saturation and value, while developers can enter exact HEX, RGB, HSL or OKLCH notation and immediately see the equivalent values.
Opacity is part of the model rather than an afterthought, and out-of-gamut OKLCH input is handled explicitly. A generated set of lighter and darker swatches turns the selected color into a practical starting scale; any swatch can become the next base color, while the full scale is available as CSS custom properties.
All conversion and scale generation happens in the page. The optional system eyedropper is used only when the current browser provides it, and no selected color is transmitted or stored remotely.