Color Picker & Converter

Pick a color and convert between HEX, RGB, HSL, HSV and CMYK. Check contrast against white and black, and get tints and shades.

Text contrast (WCAG)

Tints and shades

Click a swatch to use that color.

How to use the color converter

  1. Type or paste a color into the box, or choose one with the picker. Anything your browser understands as a CSS color works: hex codes with or without the # (#2563eb, 2563eb, the short form #f80, or eight digits with transparency), rgb() and hsl() values, and names such as tomato.
  2. The table shows the same color as HEX, RGB, HSL, HSV/HSB and CMYK. Click Copy next to the one you need.
  3. Under Text contrast (WCAG), two boxes show white and black text on your color with the contrast ratio and the accessibility level it reaches.
  4. Tints and shades shows nine swatches from light to dark with your color in the middle. Click one to make it the current color.

Color formats explained

  • HEX – red, green and blue as two hexadecimal digits each, from 00 to FF. In #ff8800, red is FF = 255, green 88 = 136 and blue 00 = 0. A three-digit code doubles each digit, so #f80 is the same color. An optional fourth pair sets the opacity: #2563eb80 is about 50% opaque.
  • RGB – the same three channels as decimal numbers from 0 to 255, such as rgb(255, 136, 0). Screens mix red, green and blue light, so 0, 0, 0 is black and 255, 255, 255 is white.
  • HSL – hue (0–360° around the color wheel: 0 is red, 120 green, 240 blue), saturation and lightness. It is easy to adjust by hand: keep the hue and change the lightness for lighter or darker versions. Lightness 100% is always white.
  • HSV / HSB – hue, saturation and value (brightness), the model behind the color pickers in most design apps. With saturation and value both at 100% you get the pure hue, which HSL puts at 50% lightness.
  • CMYK – cyan, magenta, yellow and black ink for printing. The values here come from the simple mathematical conversion; real print results depend on paper, ink and color profiles, so ask your printer for exact values.

Worked examples

  • The default blue, #2563eb, is rgb(37, 99, 235), hsl(221, 83%, 53%), hsv(221, 84%, 92%) and cmyk(84%, 58%, 0%, 8%). White text on it scores 5.17:1 (AA), black text 4.06:1 (large text only).
  • Orange buttons: white text on #ff8800 reaches only 2.39:1 and fails, while black text reaches 8.77:1 (AAA). That is why bright orange and yellow backgrounds usually need dark text.
  • Grey text: #777777 with white has a ratio of 4.48:1, just under the 4.5:1 needed for normal text; #767676, one step darker, passes at 4.54:1.
  • A palette from one color: the tints of #2563eb run from #d3e0fb to #5182ef, and the shades from #1e4fbc to #07142f. Each step mixes in 20% more white or black, which gives consistent colors for backgrounds, borders and hover states.

What the contrast results mean

The Web Content Accessibility Guidelines (WCAG 2) measure contrast as a ratio between the relative luminance of two colors, from 1:1 (identical) to 21:1 (black on white). The labels mean:

  • AAA – 7:1 or more, the enhanced level for normal text.
  • AA – 4.5:1 or more, the minimum for normal body text.
  • AA large text only – between 3:1 and 4.5:1, acceptable only for large text: at least 18 pt (24 px), or 14 pt (about 18.7 px) in bold.
  • Fails – below 3:1.

WCAG also asks for at least 3:1 for icons, input borders and other essential graphics. In the luminance formula green counts far more than blue, which is why pure yellow looks bright and pure blue looks dark. Contrast is calculated for the solid color, ignoring any transparency.

Tips

  • Choose colors in HSL or HSV, then copy HEX or RGB into your CSS or design file. All formats describe the same sRGB color.
  • Check contrast for every state – normal, hover and disabled – and don't rely on color alone to carry meaning, such as red for errors; add text or an icon.
  • Because HSL values are rounded to whole numbers, converting them back can shift a channel by one; copy HEX when you need an exact match.
  • Hex digits are base-16 numbers; the Number Base Converter shows how EB becomes 235. If you design for dark mode as well, the Screen Resolution page shows whether your browser currently prefers it.

FAQ

What is the difference between HEX and RGB?

Only the notation: HEX writes the three 0–255 values in base 16, RGB in base 10.

Why does a printed color look different from the screen?

Screens emit light and can show some saturated colors that ink can't reproduce. Printers convert with profiles for their own press and paper, so the CMYK values here are only a starting point.

Can I enter newer CSS formats?

Yes, if your browser supports them – for example hwb() or oklch(). The color is converted to the standard sRGB values shown in the table, and colors outside that range are clipped.

Is passing AA enough?

AA is the level most accessibility policies and regulations refer to. AAA is stricter and often achievable for body text; higher contrast also helps anyone reading a screen in bright sunlight.