Color Picker Tool
Select any color visually and instantly get its code in multiple formats including HEX, RGB, HSL, and CMYK. Our color picker provides a complete color selection experience for designers and developers.
How to Use
1. Click anywhere on the color gradient to select a hue 2. Adjust saturation and brightness by moving within the picker area 3. Get instant color codes in all formats 4. Copy the format you need
Color Formats Output
| Format | Example |
|---|---|
| HEX | #3498DB |
| RGB | rgb(52, 152, 219) |
| HSL | hsl(204, 70%, 53%) |
| CMYK | C:76 M:31 Y:0 K:14 |
Color Picker Features
- Visual Selection: Pick colors by clicking and dragging
- Precision Input: Enter exact values for any format
- History: Recent colors are saved for quick access
- Copy to Clipboard: One-click copying
Use Cases
| Scenario | Benefit |
|---|---|
| Web design | Get CSS-ready color codes |
| Graphic design | Match colors precisely |
| Brand guidelines | Extract exact brand colors |
| Accessibility | Test color combinations |
Picking a Colour
The square-and-strip picker every design tool shows is HSB: the vertical strip is hue, the square is saturation across and brightness up. That is why dragging within the square feels natural and dragging in an RGB slider does not — HSB separates "which colour" from "how much of it", and RGB does not separate anything.
| Model | Good for |
|---|---|
| HSB | Picking by eye — hue, then intensity |
| HSL | Building ramps — lightness is symmetric around 50% |
| RGB | Machines, canvas pixels, image data |
| HEX | Writing the value down |
A Full Ramp From This Colour
Design systems settle on a 50–900 scale because it covers backgrounds, borders, text and states without anyone reaching outside the palette. Mixing toward white and black rather than adjusting HSL lightness keeps more of the hue's character:
| Step | Colour | Contrast on white | Safe for |
|---|---|---|---|
| 50 | #F5F9FF | 1.06:1 | backgrounds and fills |
| 100 | #EBF3FE | 1.12:1 | backgrounds and fills |
| 200 | #CEE0FD | 1.34:1 | backgrounds and fills |
| 300 | #B1CDFB | 1.62:1 | backgrounds and fills |
| 400 | #76A8F9 | 2.40:1 | backgrounds and fills |
| 500 | #3B82F6 | 3.68:1 | large text, borders |
| 600 | #326FD1 | 4.85:1 | body text on white |
| 700 | #295BAC | 6.59:1 | body text on white |
| 800 | #204887 | 8.98:1 | body text on white |
| 900 | #183462 | 12.31:1 | body text on white |
Adjusting It
Base colour in HSL is hsl(217, 91%, 60%). Two useful moves:
``css
/* +10% lightness, same hue */
--lighter: #6da2f8;
/* −10% lightness */
--darker: #0b64f4;
``
Raising lightness also drops perceived saturation, so a lightened colour reads greyer than its numbers suggest. Adding 5–10% saturation alongside every 20% of lightness keeps the ramp looking like one hue rather than a fade to grey.