Color picker

Discover our intuitive Color Picker, designed to make color selection easier. Explore light and dark palettes around any color, and instantly get HEX, RGB, HSL, CMYK values and brightness.

HEX

RGB

HSL

CMYK

Brightness —

Shades: lighter / darker

Click any shade to set it as the main color.

What is a color picker for?

This intuitive tool makes selecting hues for your design projects easier. It lets you quickly explore the light and dark palettes around a base color, and obtain exact values across several formats — handy for moving from print to web or following a brand guideline.

Understanding color formats

HEX — six-character hex code, used in CSS and web design (e.g. #013861).
RGB — three Red / Green / Blue channels from 0 to 255 — the native model for screens.
HSL — Hue / Saturation / Lightness — more intuitive for tweaking a color while keeping the same hue.
CMYK — Cyan / Magenta / Yellow / Black — the model used in printing, in ink percentages.

Design tip

Perceived brightness is computed using the W3C formula: 0.299·R + 0.587·G + 0.114·B. Above 55% means a light color, on which dark text reads better — and vice versa. Use the palette to quickly generate hover, active or disabled variants of your color.