Color Picker and Color Code Converter

What HEX, RGB and HSL actually mean

Every color on a screen is a mix of red, green and blue light. RGB writes that mix directly: rgb(29, 78, 216) means a little red, some green and a lot of blue, each channel from 0 to 255. HEX is the same three numbers in base 16, so 29, 78 and 216 become 1d, 4e and d8, giving #1d4ed8. A short code like #777 is shorthand for #777777, and an eight-digit code adds a fourth pair for opacity.

HSL describes the same color in a way that is easier to adjust by hand: hue as an angle on the color wheel (0 is red, 120 green, 240 blue), saturation as how vivid it is, and lightness from black to white. hsl(224, 76%, 48%) is the same blue as above. HSV, which Photoshop and many design apps call HSB, uses value (brightness) instead of lightness, so a pure color sits at 100% rather than 50%.

OKLCH is the newest format in CSS. Its lightness is measured the way the eye perceives it, so two colors with the same OKLCH lightness actually look equally bright, which is not true of HSL. It is useful for design systems, where you want a whole palette to step evenly from light to dark.

Which format to use where

• HEX for CSS, design tools and brand guides. It is short and almost every app accepts it.
• RGB or rgba() when you need transparency in older code, or when a program asks for three numbers.
• HSL when you want to nudge a color by hand: raise lightness for a hover state, lower saturation for a muted variant.
• HSV/HSB to match the numbers shown in Photoshop, Figma’s picker or similar editors.
• OKLCH for modern CSS palettes and themes.
• CMYK only as a rough guide for print, as explained below.

Why screen and print colors differ

Screens add light, so red, green and blue at full strength make white. Printers subtract light with cyan, magenta, yellow and black (key) ink on paper, which starts out white. Many bright screen colors, especially saturated blues and greens, simply cannot be printed. The CMYK figures here come from a basic formula with no knowledge of your paper or press, so a print shop working with a real color profile may use different numbers. For important print jobs, ask for a proof.

Contrast and accessibility basics

Text that is too close in brightness to its background is hard to read, especially on a phone in sunlight or for people with low vision. The Web Content Accessibility Guidelines (WCAG) measure this as a contrast ratio between 1:1 (no difference) and 21:1 (black on white). Gray #777777 on white is 4.47:1, just short of the 4.5:1 that level AA requires for body text, though it passes for large headings. The checker never rounds up, so a result that reads 4.49 fails. Color alone should never carry meaning, so pair red and green status colors with words or icons as well.

Tints, shades and matching colors

Tints mix the color with white and shades mix it with black in even steps, which gives quick hover, border and background variants. The complementary color sits opposite on the color wheel and stands out strongly; analogous colors sit 30° to either side and feel calm together. To check how a color looks filling your whole display, try the white screen tool with a custom color. If you are preparing images for a site that uses these colors, the image compressor keeps file sizes down.