Colour Converter
Design tools disagree about colour formats. Paste a hex, RGB or HSL value and get the others — plus the contrast against white and black so you know what it is safe for.
Input
Runs in your browserResult
Enter a colour in hex, RGB or HSL.
Which format to use where
CSS takes all three. Design tools usually prefer hex for a single colour and HSL when you want to shift lightness without changing the hue — which is exactly what you do when building a hover state or a tint.
Contrast in plain numbers
WCAG asks for 4.5:1 for normal text and 3:1 for large text. The tool shows both against white and black so you can tell at a glance whether a colour is a background, an accent, or text-safe.
Alpha is not lightness
A 50% black overlay is not the same as a dark grey. If you need a muted version of a colour for a pin background, use a darker HSL lightness rather than alpha — alpha over a photo produces unpredictable results.
How to use Colour Converter
- Paste any colour format.
- Read the other two formats.
- Check the contrast rows before using it for text.
Colour Converter FAQ
Does it accept shorthand hex?
Yes — #f00 expands to #ff0000.
What is the difference between HSL and HSB?
HSL is what CSS uses. HSB (or HSV) is what most design apps show. The numbers differ; this tool gives you HSL.
Can I paste a CSS variable?
Paste the colour value itself, not the variable name.
Keep going
Tools, guides and templates that fit togetherStart creating your first Pinterest pin today
Turn your ideas into beautiful pins and grow your audience with the power of design. No credit card, no watermark.