About color codes
The same color wears three outfits on the web. HEX (#4F46E5) is the compact form used everywhere from CSS to brand guidelines. RGB (79, 70, 229) spells out the red, green and blue components — the form design software and image editors think in. HSL (243°, 75%, 59%) describes hue, saturation and lightness — the form humans think in, where "a bit darker" just means lowering one number. This converter keeps all three in sync as you edit any of them.
How to use it
- Start anywhere: pick from the color swatch, or paste a HEX, RGB or HSL value from your brand guide, CSS file or design tool.
- The other formats, the live preview, the shade scale and the complementary color all update instantly.
- Click any shade or the complementary swatch to make it the active color and copy its HEX in one motion.
Small color moves that make designs better
- Build shades with HSL, not black. Darkening by mixing black turns colors muddy; lowering HSL lightness (what the shade scale here does) keeps them alive.
- Complementary colors are loud. The opposite color on the wheel makes a great accent or button — and a terrible second background.
- Check text contrast. The preview switches its label between black and white based on the color's brightness — if the label looks uncomfortable, body text on that background will too.
Frequently asked questions
What's the difference between HEX, RGB and HSL?
They describe the same color differently: HEX is a compact code for CSS and brand guides, RGB lists the red/green/blue light components, and HSL describes hue, saturation and lightness — the most intuitive one to adjust by hand.
How do I make a lighter or darker version of my brand color?
Use the shade scale: it varies the HSL lightness while keeping hue and saturation, which preserves the color's character. Mixing with black or white instead tends to make colors muddy or washed out.
What is a complementary color?
The color directly opposite on the color wheel (hue + 180°). The pair creates maximum contrast — great for accent buttons and highlights, overwhelming as a second background color.