One picker, four notations
Native colour inputs give you a system picker; this page adds the conversions designers actually need — hex for CSS, RGB for canvas and image work, HSL for palette reasoning, and approximate CMYK for anything heading to print.
About the CMYK values
CMYK shown here is a naive conversion from RGB. Real print work needs an ICC profile and a Pantone or press-specific reference; treat these numbers as a starting point for a conversation with your printer, not a proof.
Picking colours that survive real UIs
- Check the colour against both white and near-black text before committing
- Test at 14px, not just on a large swatch
- Verify contrast with the WCAG checker — aim for 4.5:1 on body text
- Remember that the same hex looks different on OLED versus LCD panels
Colour formats in CSS
Hex is shortest; rgb() is explicit; hsl() is easiest to modify programmatically. Modern CSS also supports lab(), lch() and oklch() for perceptually uniform gradients — worth adopting in new design systems.
Frequently Asked Questions
Why does the picker look different from Photoshop?
Browsers use the OS colour picker and sRGB; Adobe tools may use different working spaces. Values match when both are sRGB.
Can I paste a hex code?
Yes — most browsers let you type a hex value directly into the colour input.
Is CMYK exact?
No. It is an approximation; convert with a print profile for production work.
Privacy & Your Data
CSSmith runs entirely in your browser. Whatever you type, paste or upload is processed on your own device and never sent to a server — there is no backend to store it.