Color Picker Formats
Pick a color and copy matching CSS-friendly format values instantly.
One color, every CSS format
Modern CSS accepts colors in several notations, and copying the right one for the context saves a conversion step. Pick a color here and get its value in hex, rgb, hsl, and other CSS-friendly formats at once, each ready to copy.
Having every format side by side is handy when a design tool gives you one notation but your codebase prefers another, or when you want an alpha-capable format for a background overlay. Choose a color and grab whichever syntax fits.
One color, every notation
It outputs HEX, RGB, and HSL for the same color so you can paste whichever your stylesheet or design tool expects. The conversion runs in your browser.
Frequently asked questions
What does the color picker formats tool do?
It converts a picked or pasted hex color into several common CSS color notations.
Which formats does it output?
HEX, RGB, HSL, HWB, and an OKLCH-style value for the same color, ready to paste into CSS.
Can I type a hex code instead of using the picker?
Yes. The HEX field accepts 3 or 6 digit codes with or without the #, and the picker and outputs update to match. Invalid codes show a message instead of a result.
When should I use OKLCH instead of hex?
OKLCH is designed to be perceptually uniform, so changing lightness or chroma gives more predictable tints and shades than HSL. The value here is converted from sRGB through OKLab, and oklch() works in all current major browsers.
Related tools
Need a polished visual system? Bushe can help turn rough ideas into production-ready design.