Free Developer Tool

Color Picker

Extract precise HEX, RGB, and HSL color codes to perfectly match your brand design system.

Preview

Pick a colour

HEX Value

Colour Formats

HEX#E84D1C

RGBrgb(232, 77, 28)

HSLhsl(14, 82%, 51%)

CMYKcmyk(0%, 67%, 88%, 9%)

CSS rgbargba(232, 77, 28, 1)

Tonal Palette

Click any swatch to select it as the active colour.

CSS Variables

:root {
  --color-primary: #E84D1C;
  --color-primary-rgb: 232, 77, 28;
  --color-primary-hsl: 14, 82%, 51%;
}

How It Works

Get Results in Seconds

Use the colour wheel or input a value

Click anywhere on the colour wheel to pick visually, or type a known HEX, RGB, or HSL value directly into the inputs.

Fine-tune with the sliders

Use the hue, saturation, and lightness sliders to dial in the exact shade you need.

Copy in your preferred format

Copy the value as HEX for CSS, RGB for design tools, or HSL for dynamic theming.

Build your palette

Note down your picked colours. Use complements, analogous colours, or triadic combinations for a harmonious palette.

FAQ

Common Questions

Which colour format should I use in CSS?

HEX is the most common for solid colours. Use RGBA when you need transparency (the A is the alpha/opacity channel). HSL is great for programmatic colour manipulation — it's more intuitive for defining colour relationships.

What's the difference between HSL and HSB?

HSL (Hue, Saturation, Lightness) is used in CSS. HSB (Hue, Saturation, Brightness) is used in design tools like Photoshop and Figma. They look similar but behave differently — a pure colour in HSL is at 50% lightness, while in HSB it's at 100% brightness.

How do I pick colours that go well together?

Use complementary colours (opposite on the colour wheel) for high contrast, analogous colours (adjacent) for harmony, or triadic combinations (three evenly spaced colours) for vibrant variety. Stick to one dominant colour, one accent, and one neutral.