Color Code Converter

Color Picker
Color Values
#
CSS Values
Color Shades & Tints
Darker Shades
Lighter Tints
Color Format Guide
HEX

Hexadecimal notation using 6 digits (RRGGBB)

#FF5733
RGB

Red, Green, Blue values (0-255)

rgb(255, 87, 51)
HSL

Hue (0-360°), Saturation (0-100%), Lightness (0-100%)

hsl(15, 100%, 60%)
HSV

Hue (0-360°), Saturation (0-100%), Value (0-100%)

hsv(15, 80%, 100%)
Popular Colors
Color Theory Tips
  • Complementary: Colors opposite on color wheel
  • Triadic: Three colors evenly spaced
  • Analogous: Adjacent colors on wheel
  • Monochromatic: Same hue, different saturation/lightness

Converting Between Colour Formats

Enter a colour in any format - HEX, RGB, HSL or HSV - and get all the others instantly, ready to paste into CSS. Each format encodes the same colour differently: HEX and RGB describe channel values, while HSL and HSV describe hue, saturation and lightness, which makes them far easier to adjust by hand. How the formats relate, and when to prefer each, is covered in colour formats: HEX, RGB and HSL.

If you are building a full colour scale rather than converting a single value, the Colour Palette Generator produces a complete shade ramp from one base colour using OKLCH.

Color Questions

HEX = compact web format (#FF5733). RGB = red/green/blue values 0-255. HSL = hue/saturation/lightness - easier for humans to adjust. HSV = what Photoshop uses. They all describe the same colors, just differently.

HEX is most common. RGB/RGBA when you need transparency. HSL if you're tweaking colors in code - adjusting lightness is way more intuitive than fiddling with RGB values.

Use HSL. Lower the L for darker, raise it for lighter. Keeps the hue and saturation intact. Much easier than trying to adjust RGB proportionally.

Alpha channel, 0 to 1. Use rgba(r, g, b, 0.5) for 50% transparent, or 8-digit hex like