Color Picker

Adjust with the sliders. Hue sets the base color around the wheel from 0 to 360°. Saturation controls how vivid it is, from grey at 0% to fully intense at 100%. Lightness runs from black at 0% through the pure hue at 50% to white at 100%. Changing one leaves the others untouched, which makes building a consistent set of colors much easier than nudging hex digits.

Type a hex code. Paste any three- or six-digit hex value and the picker resolves it — #39F and #3399FF both work.

Sample from your screen. On Chromium-based browsers the eyedropper samples any pixel on your display, including other applications. To pull colors out of a specific image instead, use the image color picker.

HEX — the default for web work. Compact, universally supported in CSS, and what most design tools hand you.

RGB — matches how displays actually work. Useful when you need an alpha channel via rgba(), or when working with canvas and image data.

HSL — the most human-friendly. Build tints and shades of a brand color by changing lightness alone, and keep the hue exactly consistent.

CMYK — for print. Screens emit light (additive) while ink absorbs it (subtractive), so vivid on-screen colors often cannot be reproduced exactly in print. Treat CMYK values as a starting point and confirm with a proof.

A color that looks good in isolation can still fail behind text. WCAG 2.1 AA asks for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text, and the ratio depends far more on lightness than on hue — so when a pairing fails, adjust the lightness slider rather than hunting for a different color.

Be aware too that HSL lightness is not the same as perceived brightness: pure yellow at 50% lightness looks far brighter than pure blue at the same value. Always verify with a real ratio rather than trusting the number. Test pairings in the contrast checker, and see the color theory guide for why this happens.