CSS color codes and contrast
Look up the 148 CSS color keywords and calculate sRGB hex, HSL, a simple CMYK split, Oklab, and WCAG 2.2 contrast against black and white.
Foreground and background contrast
Sample text
4.54:1
- AA normal text 4.5:1: Pass
- AA large text 3:1: Pass
- AAA normal text 7:1: Fail
- AAA large text 4.5:1: Pass
#767676
Converted values
- HEX
- #767676
- RGB
- rgb(118, 118, 118)
- HSL
- hsl(0.0 0.0% 46.3%)
- CMYK
- C 0.0 M 0.0 Y 0.0 K 53.7 CMYK here is a simple complement of sRGB. It is not a coated or uncoated press proof.
- Oklab
- L 0.5658 a 0.0000 b 0.0000 Oklab uses the published Ottosson 2020 conversion. It is not a measured device profile.
- L
- 0.1812
C0.0
M0.0
Y0.0
K53.7
Guides
- WCAG 2.2 contrast formula
- Hex, RGB, and HSL
- Why this CMYK is not a press proof
- The 148 CSS color keywords
- Large-text contrast thresholds
Reference list
Helps you write CSS color codes and check contrast. It covers hexadecimal and functional color notations, the contrast-color() function that returns a color contrasting with an input color, user-preference media features such as prefers-contrast, and the W3C WCAG contrast success criteria. Facts come from official MDN Web Docs and W3C pages, and no prices or invented identifiers are included.
| Item | Issuer or maker | Detail | Source |
|---|---|---|---|
| MDN contrast-color() | MDN Web Docs – CSS color values reference | The CSS contrast-color() function returns a color that contrasts with the input color. | developer.mozilla.org |
| MDN prefers-contrast media feature | MDN Web Docs – CSS @media reference | The prefers-contrast media feature detects whether the user requested higher or lower contrast. | developer.mozilla.org |
| MDN hex-color | MDN Web Docs – CSS data types reference | Documents the CSS hexadecimal color notation, #RRGGBB and its variants. | developer.mozilla.org |
| MDN rgb() | MDN Web Docs – CSS color values reference | rgb() defines a color by its red, green and blue channels with an optional alpha value; rgba() is an alias of rgb(). | developer.mozilla.org |
| MDN hsl() | MDN Web Docs – CSS color values reference | hsl() defines a color by hue, saturation and lightness, with an optional alpha value. | developer.mozilla.org |
| MDN hwb() | MDN Web Docs – CSS color values reference | hwb() defines a color by hue, whiteness and blackness. | developer.mozilla.org |
| MDN lab() and lch() | MDN Web Docs – CSS color values reference | lab() and lch() express colors in the CIE Lab color space, using a/b axes or chroma and hue. | developer.mozilla.org |
| MDN oklab() and oklch() | MDN Web Docs – CSS color values reference | oklab() and oklch() express colors in the perceptually uniform Oklab color space. | developer.mozilla.org |
| MDN color-mix() | MDN Web Docs – CSS color values reference | color-mix() mixes two color values in a specified color space by a given amount. | developer.mozilla.org |
| MDN light-dark() | MDN Web Docs – CSS color values reference | light-dark() returns its first color when the light color scheme is in use and its second color for the dark scheme. | developer.mozilla.org |
| MDN prefers-color-scheme media feature | MDN Web Docs – CSS @media reference | prefers-color-scheme detects whether the user requested a light or dark color theme. | developer.mozilla.org |
| MDN forced-colors media feature | MDN Web Docs – CSS @media reference | forced-colors detects whether the user agent is enforcing a limited, user-chosen color palette. | developer.mozilla.org |
| WCAG Success Criterion 1.4.3 Contrast (Minimum) | W3C – Web Content Accessibility Guidelines (WCAG) 2 | WCAG 2 Success Criterion 1.4.3 Contrast (Minimum) is a Level AA requirement for text contrast. | www.w3.org |
| CSS Color Module Level 5 | W3C – CSS Color Module Level 5 | CSS Color Module Level 5 is the W3C specification that adds color-mix(), relative color syntax and contrast-color(). | www.w3.org |