Color Picker & Converter

HEX, RGB, HSL — what's the difference?

HEX (#5b8cff) is the compact form used in CSS and design tools. RGB (rgb(91,140,255)) is the same color as red/green/blue channels. HSL (hsl(222,100%,68%)) describes hue, saturation, and lightness — handy for making tints and shades. This tool converts between all three live.

When to use each format

• HEX: the most compact way to write a solid color — ideal for CSS, design handoffs, and copying between tools.
• RGB / RGBA: when you need to tweak individual channels in code, or add transparency with the alpha value.
• HSL: the most human-friendly model — pick a hue, then dial saturation and lightness to generate consistent tints and shades of one color.

Building a color palette

HSL makes palettes easy: keep the hue fixed and vary lightness to get a light/dark range of the same color, or rotate the hue in even steps for a complementary scheme. Designers often start from one brand color and derive the rest this way. Curious about the math behind HEX and RGB? Our guide on converting HEX to RGB walks through it with examples.

Instant and private

Pick a color or paste any HEX, RGB, or HSL value and the others update live. Everything runs in your browser — nothing is uploaded — so it's a fast, dependable companion for web design, CSS, and graphics work.