HEX, RGB and HSL: Convert Colors and Build Palettes Fast

Colors in CSS come in several notations, and design tools, brand guides, and code rarely agree on one. You copy a HEX from a mockup, but your design system wants RGB channels for an rgba() overlay, and you need HSL to nudge lightness for a hover state. Converting these by hand is tedious and error-prone. A picker that shows every format at once — and generates a palette from a single color — removes the friction.

The three formats you actually use

• HEX like #5e5ce6 is compact and ubiquitous in CSS and design files. Each pair of digits is a red, green, or blue channel in base 16.
• RGB like rgb(94, 92, 230) spells out those same channels in decimal (0–255). It is the natural form when you need an alpha channel: rgba(94, 92, 230, 0.5).
• HSL like hsl(241, 76%, 63%) describes hue, saturation, and lightness. It is the most human-friendly for tweaking a color — bump the lightness for a hover state, drop the saturation for a muted variant.

All three describe the same color; they are just different coordinate systems for the same point.

Tints, shades, and complements

A single brand color is rarely enough. You need lighter versions for backgrounds and darker ones for text and borders:

• A tint is the color mixed toward white — softer, good for surfaces and hover fills.
• A shade is the color mixed toward black — deeper, good for text, borders, and active states.
• A complement sits opposite on the color wheel (hue rotated 180°) and makes a natural accent.

The Color Picker & Palette generates five tints and five shades from whatever color you enter, plus its complement, and each swatch copies its HEX with one click.

A practical walkthrough

1. Type or paste a HEX like #5e5ce6, or use the native color picker to sample one. Short form such as #abc works too.
2. Read the HEX, RGB, and HSL values side by side and copy whichever your code needs.
3. Scan the generated tints and shades, and click any swatch to copy it.

Those values slot straight into CSS custom properties, giving you a small, consistent scale:

:root {
  --brand:      #5e5ce6;
  --brand-rgb:  94, 92, 230;   /* use as rgba(var(--brand-rgb), 0.5) */
  --brand-tint: #cbcbf7;
  --brand-shade:#3b3a93;
}

Common pitfalls and tips

Expect tiny rounding differences. Converting HEX to HSL and back can shift a value by a digit because HSL components are rounded to whole numbers. This is normal and visually imperceptible; keep the HEX as your source of truth.

A palette is not accessibility. A pretty tint can still be unreadable as text. Always verify text-on-background pairs with the Color Contrast Checker before committing to them.

Prefer HSL for state variations. Instead of hand-picking a darker hover color, take your base HSL and reduce the lightness by a fixed amount. It keeps hue and saturation consistent across the whole scale.

Need other notations? For conversions beyond HEX, RGB, and HSL — such as HSV — the Color Converter covers more formats.

Wrapping up

Stop hand-converting colors and eyeballing lighter variants. Pick one color, read every format, and let the tool generate a coherent set of tints, shades, and an accent — all locally, nothing uploaded. It is the fastest way to turn a single brand color into a usable palette.