Color Picker

Every color on this page lives in sRGB, the default color space of the web since browsers adopted it in the late 1990s. A screen mixes red, green and blue light, and each channel has 256 levels (0–255), which gives 16,777,216 possible colors. RGB writes those three numbers directly; HEX writes the same three numbers in base 16, two digits each, so #FF6600 is red 255, green 102, blue 0. The three-digit shorthand doubles each digit: #F60 is #FF6600.

HSL and HSB (also called HSV) describe the same colors in a way that is easier to adjust by hand. Hue is an angle on the color wheel: 0° red, 120° green, 240° blue. The difference is in the last number. In HSL, lightness 100% is always white and 50% is the purest version of the hue; in HSB, brightness 100% is the pure hue and white needs saturation 0%. Design apps such as Photoshop and Figma use HSB in their pickers, while CSS understands hsl() natively, which is why both are listed above.

Screens add light; printers subtract it with cyan, magenta, yellow and black ink. The two systems cover different ranges of color, called gamuts. Very saturated screen colors, such as a bright RGB green, an electric blue or a neon orange, sit outside what process inks can reproduce, so they print duller than they look on a monitor.

The CMYK numbers here use the plain mathematical conversion without an ICC profile, which is useful for a rough brief but not for press. A printer converts with a profile for its paper and press, such as FOGRA39 in Europe or GRACoL in the United States, and the same RGB color can come out with different ink percentages under each. For print work, send the RGB or HEX value together with the profile your printer asks for.

WCAG 2.1 compares the relative luminance of two colors: the lighter one plus 0.05, divided by the darker one plus 0.05. The result runs from 1:1 (identical colors) to 21:1 (black on white). Level AA asks for at least 4.5:1 for normal text and 3:1 for large text, meaning 18 point or 14 point bold; level AAA raises that to 7:1 and 4.5:1. User-interface parts such as input borders and icons need 3:1 against their surroundings under success criterion 1.4.11.

Luminance weighs green far more heavily than blue, because the eye is most sensitive to it. That is why yellow text on white fails badly while dark blue on white passes easily, even though both colors look fully saturated. Logos and purely decorative text are exempt from the rule.

The image palette reads your file with the browser's canvas, shrinks it to at most 200 pixels on the long side and groups similar pixels with the median-cut method described by Paul Heckbert in 1982: the color range is split again and again along its widest channel until six groups remain, and each group's average becomes a swatch. Transparent pixels are ignored, so a logo on a transparent background gives the logo's colors.

Once you have the colors, a flat logo often works better as a vector. The image to SVG converter traces it into shapes that keep these exact colors, and if you are designing a channel header, the YouTube banner resizer fits the artwork to 2560 × 1440 with the safe area in mind.