Design Tools
Contrast Checker
Check foreground and background contrast against accessibility thresholds.
Design Tools
Color Picker
Pick a colour and read off its HEX, RGB and HSL values.
Tool Panel
Processed locallyAbout Color Picker
Pick a colour or type a value; HEX, RGB and HSL are each one click from the clipboard.
- 1
Picking and typing stay in sync: editing the hex updates everything, and the hue and opacity sliders write back into it.
- 2
HEX, RGB and HSL are all shown, each with its own copy button.
- 3
A preset swatch row, so assembling a palette does not need another tool.
- 1
Pick or type a colour
Use the native colour picker, or paste a value into the hex field.
- 2
Fine-tune hue and opacity
The sliders are for finding a nearby shade of the colour you already have.
- 3
Copy the format you need
Take the HEX or the HSL row depending on what the target code uses.
Yes. Opacity appears in the RGB and HSL readouts, ready for rgba() or hsl() in CSS.
HSL is easier to reason about by hand (hue, saturation, lightness); RGB is easier to match against existing code.
Related tools
View allDesign Tools
Gradient Generator
Build CSS linear and radial gradients visually, then copy the code.
Design Tools
Design Tools
Box Shadow Generator
Tune a box shadow visually and copy the CSS.
Design Tools
Design Tools
Unit Converter
Convert physical units across length, weight, volume and more.
Design Tools
Design Tools
Bytes Converter
Convert between bytes, KB, MB, GB and TB.
Design Tools
Design Tools
Border Radius Generator
Tune each corner visually and copy the CSS border-radius.
Design Tools
Design Tools
Clip Path Generator
Drag the points to shape a polygon and copy the CSS clip-path.
Design Tools
Design Tools
Cubic Bezier Generator
Drag the control points to shape an easing curve and copy the CSS.
Design Tools