Colour Picker & Converter
Pick a colour and instantly convert between HEX, RGB, and HSL. No sign-up, no paywall.
- ✓ Live conversion
- ✓ Copy buttons
- ✓ Works offline
- ✓ No uploads
Quick tips
- • Paste a HEX like #ffcc00.
- • Or type RGB like 255, 204, 0.
- • HSL expects H 0–360, S/L 0–100.
Current
#facc15
This matches the values below.
Accepts #RGB or #RRGGBB.
Hue in degrees. Saturation/lightness in percent.
Ready-to-paste formats
CSS (HEX)
color: #facc15;
CSS (RGB)
color: rgb(250, 204, 21);
CSS (HSL)
color: hsl(49, 96%, 53%);
Common uses for Colour Tools
- Web design: Convert brand colours into HEX for CSS, RGB for image work, or HSL for easier shade adjustments.
- Matching UI colours: Use the picker to match a colour you already have and copy the exact value into your project.
- Creating variants: HSL makes it easier to create lighter/darker versions by adjusting lightness.
- Consistency across tools: Keep the same colours in your website, Canva designs, and social assets.
- Developer handoff: Copy ready-to-paste CSS snippets when sharing design specs with a dev.
FAQ
What’s the difference between HEX, RGB, and HSL? HEX is a compact code used in CSS, RGB is red/green/blue values, and HSL is hue/saturation/lightness for more intuitive adjustments.
Does this save anything? No — it runs locally in your browser and doesn’t upload or store your colours.
Why do my colours look slightly different on other screens? Different displays and colour profiles can shift how colours appear.