Color Picker & Converter
Pick colors and convert HEX, RGB, HSL.
RGB
rgb(99, 102, 241)
HSL
hsl(239, 84%, 67%)
CSS variable
--color: #6366F1;
About the Color Picker & Converter
Pick a color and convert it between HEX, RGB, HSL and OKLCH with copyable values. A fast companion for designers and developers fine-tuning palettes and CSS.
How to use it
- 1Pick a color or enter a value in any format.
- 2Read the equivalent HEX, RGB, HSL and OKLCH values.
- 3Copy the format your code needs.
One colour, four formats
The same colour can be written as a HEX code, RGB channels, HSL, or OKLCH — and different tools and stylesheets expect different ones. Converting by hand is tedious and easy to get wrong. Pick a colour here and read every format at once, ready to copy. HSL makes it intuitive to nudge lightness or saturation, while OKLCH is perceptually uniform, meaning equal numeric steps look like equal visual steps — which is why it's increasingly used to build palettes where every shade feels evenly spaced and stays legible.
Common uses
- Grabbing the HEX or RGB value of a colour to drop into your CSS.
- Converting a brand colour between formats for different tools.
- Fine-tuning a shade's lightness or saturation using HSL or OKLCH.
Frequently asked questions
- What is OKLCH?
- OKLCH is a modern, perceptually uniform color space that makes it easier to create consistent, accessible palettes than HSL.
- Which format should I put in my CSS?
- HEX and RGB are universally supported; HSL is convenient for tweaking lightness and saturation; and OKLCH is the best choice for building consistent, accessible palettes in modern browsers.