CSS Background Color Generator

Two of those catch people out. Because the colour runs under the border, a dashed or semi-transparent border shows the background between its dashes; add background-clip: padding-box to stop at the border. And the page background is special: a colour set on html, or on body when html has none, is used for the whole canvas, which is why a short page still has its background colour all the way down.

All of these can carry opacity. The space-separated rgb(37 99 235 / 50%) form works in every current browser, and rgba() is now just another name for rgb(). The box above accepts every format in the table and also strips a pasted background-color: prefix. For converting long lists of codes, the HEX to RGB and RGB to HEX converters show the channel maths; for blends of several colours, use the CSS gradient generator.

A background with opacity below 100% is blended with whatever is behind it, channel by channel:

shown = colour × alpha + behind × (1 − alpha)

Navy rgb(15 23 42 / 50%) over a white page gives red 15 × 0.5 + 255 × 0.5 = 135, green 139 and blue 148.5, so it shows as #878B95, a mid grey-blue rather than navy. Over a dark page the same value stays almost navy. The preview reports the colour actually seen, and the text check uses it, so set "Page colour behind it" to whatever the element will sit on.

Opacity on the colour is not the same as the opacity property. opacity: 0.5 fades the whole element, text, icons and borders included; a translucent background-color fades only the fill and leaves the text at full strength.

With "black or white" selected, the tool works out the contrast ratio of each against the background as it appears and picks the higher one. The two tie when the background's relative luminance is about 0.179. Lighter than that, black text wins; darker, white wins.

Mid greys show how close it gets. On #767676 black text scores 4.62:1 and white 4.54:1; both pass the 4.5:1 that WCAG asks for body text, and black only just comes out ahead. On #808080 black is clearly better (5.32:1 against 3.95:1, which fails for body text). On the default blue, #2563EB, white scores 5.17:1 and black 4.06:1.

Tick "Dark-mode colour" to give the element a second background for people whose system is set to dark. The export can do this two ways:

• light-dark(light, dark) picks one of two colours inside a single declaration. It only works once color-scheme: light dark is set, so the export adds that to :root, and it writes a plain line first for browsers that do not know the function.
• @media (prefers-color-scheme: dark) repeats the rule inside a media query. It is longer but works in every browser that supports dark mode at all.

color-scheme also matters on its own: with it set, the browser darkens its own parts (the default page, scrollbars and form controls), so a dark background is not left surrounded by white inputs.

The hover colour is the background mixed with black (or white, for "lighter") in OKLab, the same sum as color-mix(). For #2563EB and 10%:

background-color: #1F55CC; /* color-mix(in oklab, #2563EB, black 10%) */

The export writes the finished colour and keeps the color-mix() version as a comment, so it works everywhere. Mixing in OKLab darkens evenly; mixing in sRGB with black can make blues and purples look dull and greyish. If your colours live in custom properties, you can let the browser do the sum, or use relative colour syntax to change one channel:

.button:hover { background-color: color-mix(in oklab, var(--brand), black 10%); }
.button:active { background-color: oklch(from var(--brand) calc(l - 0.1) c h); }