Color Converter

Convert between HEX, RGB, and HSL color formats. See live preview, complementary color, shades, and the nearest CSS named color.

—
Complementary Color
—
Shades (5 lighter → base → 5 darker)

Color format reference

HEX
#RRGGBB (0–FF each channel)
Used in CSS, HTML, design tools. Each pair is a hex number 00–FF representing 0–255. #000000 = black, #FFFFFF = white.
HSL
hsl(hue 0–360, sat 0–100%, light 0–100%)
Human-friendly. Hue is the color angle on a wheel (0=red, 120=green, 240=blue). Saturation and lightness control intensity and brightness.

Frequently asked questions

What is the difference between RGB and HSL?

RGB (Red, Green, Blue) is a hardware-oriented model matching how screens emit light. HSL (Hue, Saturation, Lightness) is more intuitive for designers — you can adjust lightness without changing the hue.

What is a complementary color?

The complementary color is directly opposite on the color wheel — its hue is 180° away. Complementary pairs create maximum contrast and are used in design to make elements stand out.

How is the nearest CSS named color found?

The tool calculates the Euclidean distance in RGB space between your color and all 148 CSS named colors, then returns the closest match. It is approximate — the actual perception may differ.

Can I use 3-digit HEX codes like #abc?

This tool accepts 6-digit HEX codes. #abc is shorthand for #aabbcc — expand it before pasting. Most design tools output 6-digit codes.

What are shades used for?

Shades (lighter and darker versions of a color) are used to create consistent color palettes for UI design — hover states, borders, backgrounds, and text colors from a single brand color.