HEX vs RGB vs HSL: Which Color Code Should You Use?
A plain-English guide to the three color formats every designer runs into, and when to use each one.
Open the tool →Why it's worth using
Match colors exactly
Whether you're editing a thumbnail or building a website, getting the exact same color across tools requires a precise code, not a guess.
Every format in one place
Design tools often expect different formats — CSS wants HEX or RGB, some apps prefer HSL. This tool gives you all three instantly.
Pick colors straight from your screen
The eyedropper tool (on supported browsers) lets you sample a color from anywhere on your screen, not just from a color wheel.
How to use it
- Click the color swatch to open the picker, or use the eyedropper to sample a color from your screen.
- Copy the HEX, RGB, or HSL value you need.
- Paste it into your design tool, CSS file, or image editor.
- Check your recent color history if you need to reuse a shade from earlier in your session.
Pro tip
HEX codes are the most widely supported format for web and social media design tools — when in doubt, copy the HEX value.