What is the difference between HEX, RGB, and HSL?

HEX is a 6-digit hex shorthand for RGB. RGB specifies red, green, blue from 0-255. HSL uses Hue (0-360°), Saturation (0-100%), and Lightness (0-100%), more intuitive for perceptual adjustments.

What is the difference between HSL and HSB/HSV?

HSL's Lightness 100% is white. HSB's Brightness 100% is a fully saturated colour. HSB is used in Figma/Photoshop. HSL is used in CSS.

How do I add opacity to a colour in CSS?

Use rgba() with a fourth alpha parameter: rgba(255, 87, 51, 0.5) for 50% opacity. You can also use 8-digit HEX or hsl() with the / alpha syntax.

🎨

Color Picker & Converter

Pick any color or pick directly from an image. Convert between HEX, RGB, HSL, HSB. Includes WCAG contrast checker and palette generator.

Click to pick

HEX

RGB

HSL

HSB

Drop an image or click to upload

PNG, JPG, WebP, GIF, SVG — any image

Contrast vs White (WCAG)

Contrast Ratio

—

Generated Palettes

Tints

Shades

Complementary & Analogous

Quick Presets

How to use

Type any HEX, RGB, HSL or HSB value — all other formats update instantly.
Use the swatch (top-left) to open the native color picker, or pick a preset.
Switch to From Image to upload a photo and click any pixel to extract its color.

FAQ

HEX (#FF5733) is a 6-digit hex shorthand for RGB. RGB (rgb(255,87,51)) specifies red, green, blue from 0–255. HSL (hsl(11,100%,60%)) uses Hue, Saturation, Lightness — more intuitive for perceptual adjustments.

HSL's Lightness at 100% is white. HSB's Brightness at 100% is a fully saturated colour, not white. HSB is what Figma and Photoshop use; HSL is what CSS uses.

Use rgba(r,g,b,a) with an alpha 0–1, or an 8-digit HEX like #FF573380, or modern hsl(11 100% 60% / 50%).