Color Formats Explained
Contrast ratio compares the relative luminance of two colors: (L1 + 0.05) divided by (L2 + 0.05), where L1 is the lighter color. WCAG AA requires at least 4.5:1 for normal text and 3:1 for large text. Pick a color above to get its HEX, RGB, HSL, HSV and CMYK values, tints and shades, and its contrast ratio against white and black.
Every color on screen can be represented in multiple formats. HEX (#RRGGBB) is a base-16 encoding of RGB values: the standard for web development and CSS. RGB (Red, Green, Blue) represents colors as three integers from 0 to 255, matching how screens physically display color. HSL (Hue, Saturation, Lightness) is more intuitive for humans: hue is the color angle (0 to 360°), saturation is vividness, lightness is brightness. HSV/HSB uses brightness instead of lightness.
HEX Color Codes
WCAG Contrast
Tints and Shades
CSS Custom Properties
How the WCAG Contrast Ratio Is Calculated
- Scale each channel to 0 to 1. Divide R, G and B by 255.
- Linearize. If a value c is 0.04045 or less, use c ÷ 12.92; otherwise use ((c + 0.055) ÷ 1.055)2.4. Older WCAG text says 0.03928 instead of 0.04045; for 8-bit colors both give identical results.
- Relative luminance. L = 0.2126 R + 0.7152 G + 0.0722 B, using the linearized values. Green weighs most because the eye is most sensitive to it. Black is 0, white is 1.
- Contrast ratio. (L1 + 0.05) ÷ (L2 + 0.05), with L1 the lighter color. The result runs from 1:1 (same color) to 21:1 (black on white).
Worked example: #7C3AED on white. The channels are 124, 58 and 237, which scale to 0.4863, 0.2275 and 0.9294 and linearize to 0.2016, 0.0423 and 0.8469. Luminance is 0.2126 × 0.2016 + 0.7152 × 0.0423 + 0.0722 × 0.8469 = 0.1343. Against white: (1 + 0.05) ÷ (0.1343 + 0.05) = 5.70:1, which passes AA for all text but not AAA (7:1).
WCAG Contrast Thresholds
| What | Level AA | Level AAA | WCAG rule |
|---|---|---|---|
| Normal text | 4.5:1 | 7:1 | 1.4.3 and 1.4.6 |
| Large text (24 px, or 18.66 px bold) | 3:1 | 4.5:1 | 1.4.3 and 1.4.6 |
| Icons, input borders, focus rings, chart lines | 3:1 | no higher level | 1.4.11 |
| Logos and disabled controls | no requirement | no requirement | exempt |
Large text means at least 18 point (24 CSS pixels) regular, or 14 point (about 18.66 CSS pixels) bold. The ratio is not rounded up: 4.49:1 fails a 4.5:1 requirement.
Contrast of Common Colors on White and Black
Computed with the formula above. "Best text" is whichever of white or black gives the higher ratio, which is what the preview swatch on this page now uses.
| Color | On white | On black | Best text | Normal text AA |
|---|---|---|---|---|
| #333333 dark gray | 12.63:1 | 1.66:1 | White | Passes (with white) |
| #595959 gray | 7.00:1 | 3.00:1 | White | Passes, also AAA |
| #767676 gray | 4.54:1 | 4.62:1 | Black | Passes with either |
| #777777 gray | 4.48:1 | 4.69:1 | Black | Fails on white |
| #6B7280 slate gray | 4.83:1 | 4.34:1 | White | Passes on white only |
| #7C3AED violet | 5.70:1 | 3.69:1 | White | Passes on white |
| #2563EB blue | 5.17:1 | 4.06:1 | White | Passes on white |
| #3B82F6 light blue | 3.68:1 | 5.71:1 | Black | Large text only on white |
| #DC2626 red | 4.83:1 | 4.35:1 | White | Passes on white |
| #EF4444 light red | 3.76:1 | 5.58:1 | Black | Large text only on white |
| #16A34A green | 3.30:1 | 6.37:1 | Black | Large text only on white |
| #F97316 orange | 2.80:1 | 7.49:1 | Black | Fails on white |
| #EAB308 yellow | 1.92:1 | 10.95:1 | Black | Fails on white |
The pattern to remember: bright greens, oranges and yellows almost never work as text on white. Use a darker shade from the Shades row above, or put black text on them instead.
Converting Between Color Formats
All formats describe the same sRGB color. Taking #7C3AED as the example:
- HEX to RGB: 7C = 7 × 16 + 12 = 124, 3A = 58, ED = 237, so rgb(124, 58, 237).
- RGB to HSL: max 237, min 58. Lightness is (max + min) ÷ 2 ÷ 255 = 57.8%. Saturation is (max − min) ÷ (510 − max − min) = 179 ÷ 215 = 83.3%. Blue is the largest channel, so hue = 60 × ((R − G) ÷ (max − min) + 4) = 262.1°. Result: hsl(262, 83%, 58%).
- RGB to HSV: value is max ÷ 255 = 92.9%, saturation (max − min) ÷ max = 75.5%, same hue: hsv(262, 76%, 93%).
- RGB to CMYK: K = 1 − max ÷ 255 = 7.1%, then C = (1 − R/255 − K) ÷ (1 − K) = 47.7%, M = 75.5%, Y = 0%: cmyk(48, 76, 0, 7). This is the simple formula; print shops convert with an ICC profile for their press, so expect their numbers to differ.
Method and sources. Contrast ratio and relative luminance as defined in W3C Web Content Accessibility Guidelines (WCAG) 2.2, success criteria 1.4.3, 1.4.6 and 1.4.11, using the sRGB transfer function (IEC 61966-2-1). HSL and HSV conversions follow the formulas in the CSS Color Module Level 4. Every ratio and value above was computed in node with the same code this page runs. The tool works entirely in your browser; colors you pick are not sent anywhere.
Frequently Asked Questions
How do I convert HEX to RGB?
Split the HEX code into three pairs: #RRGGBB. Convert each pair from base-16 to base-10. Example: #FF6B35 → R=FF=255, G=6B=107, B=35=53 → rgb(255, 107, 53). In JavaScript: parseInt('FF',16)=255. Alternatively, this tool does all conversions instantly: just enter the HEX value in the picker.
What is HSL and why is it better for design?
HSL stands for Hue, Saturation, Lightness. Hue is the color angle on the wheel (0°=red, 120°=green, 240°=blue). Saturation is vividness (0%=gray, 100%=full color). Lightness is brightness (0%=black, 50%=normal, 100%=white). HSL is more intuitive than RGB for design work: to make a color lighter, just increase L. To desaturate, decrease S. This makes creating color variations and tints far easier than manipulating RGB values.
What is a good contrast ratio for accessibility?
WCAG 2.1 and 2.2 define the same standards: AA (minimum): 4.5:1 for normal text, 3:1 for large text (18pt+ or 14pt+ bold). AAA (enhanced): 7:1 for normal text, 4.5:1 for large text. Most legal accessibility requirements (ADA, EN 301 549) follow AA. Black text on white = 21:1. Dark gray #333 on white ≈ 12.6:1. Medium gray #767676 on white is 4.54:1, the lightest gray that passes AA; #777777 is 4.48:1 and fails. Always test your text/background combinations.
What is the difference between HSV and HSL?
Both have Hue and Saturation, but differ in the third component. HSL Lightness: 0%=black, 50%=pure color, 100%=white. HSV Value (Brightness): 0%=black, 100%=pure color (white is S=0, V=100%). HSL is more common in CSS and web design. HSV is the standard in most design software color pickers (Photoshop, Figma and others). Both represent the same colors: they're just different mathematical models.
How do CSS color variables work?
CSS custom properties (variables) are defined with double-dash prefix: --color-primary: #7c3aed; inside a selector (usually :root for global scope). Reference them with var(): color: var(--color-primary);. They cascade and inherit like other CSS properties. Modern design systems define an entire color scale as CSS variables, enabling instant dark mode: just redefine the variables inside @media (prefers-color-scheme: dark) or a .dark class.
What are CMYK colors?
CMYK (Cyan, Magenta, Yellow, Key/Black) is the color model used in color printing. Unlike RGB (additive, for screens), CMYK is subtractive: mixing inks absorbs light. C+M+Y theoretically = black, but pure black (K) is added for sharper text and to save ink. RGB and CMYK have different color gamuts: some vibrant RGB colors cannot be reproduced in print. This is why designs created on screen can look different when printed.
What do color tints and shades mean?
A tint is the result of mixing a color with white: it increases lightness while reducing saturation. A shade is mixing with black: it decreases lightness. A tone adds gray. Design systems (like Tailwind, Material Design) use numbered scales: 50 (lightest tint) through 950 (darkest shade). The 500 is usually the "base" color. Using consistent tint/shade scales ensures visual harmony across backgrounds, borders, hover states, and text.
How do I pick accessible text colors?
Use this tool's contrast checker: pick your background color, then check the contrast ratio against black and white. For the text color that passes, use it. General rules: white text works well on dark, saturated colors (check ratio). Black text is usually best on light backgrounds. For mid-range colors (medium blue, green), calculate the ratio for both: sometimes neither pure black nor pure white passes AAA. Use the darkest shade that passes AA for regular text, or increase font size to qualify for the lower large-text threshold (3:1).
What is the oklch color space?
oklch is a modern perceptual color space gaining adoption in CSS (supported in all major browsers since 2023). It uses Lightness, Chroma (vividness), and Hue. Unlike HSL, oklch is perceptually uniform, two colors with the same L value actually look equally bright to human eyes. This makes oklch ideal for generating accessible color scales: colors at the same lightness look equally readable regardless of hue. CSS 4 color functions like oklch(70% 0.15 263) are becoming the modern alternative to HEX and HSL.
How do I choose a color palette for a website?
Start with a primary color that represents your brand. Then build: (1) Neutrals, grays for text, backgrounds, borders; (2) Semantic colors, success (green), warning (yellow), error (red), info (blue); (3) Tints/shades of your primary for hover states, backgrounds, accents. Keep it minimal: 3 to 5 hues maximum. Use HSL to create harmonious variations. Always check contrast for text/background pairs. Tools like Coolors, Adobe Color, and Tailwind's color palette are excellent starting points.
What counts as large text for WCAG contrast?
Text that is at least 18 point (24 CSS pixels) in regular weight, or 14 point (about 18.66 CSS pixels) in bold. Large text only needs 3:1 for AA and 4.5:1 for AAA, because bigger letters stay readable at lower contrast. Normal body text at 16 px needs 4.5:1.
What contrast do buttons, icons and form borders need?
WCAG 2.1 and 2.2 success criterion 1.4.11 asks for at least 3:1 between a control or meaningful graphic and the colors next to it. That covers input borders, checkbox outlines, focus indicators, icons without text and the lines in a chart. The text inside a button still needs 4.5:1 against the button color.