CodesBeautify

CSS Background Color Generator

Choose a fill colour and opacity, then copy a background rule that already tells you whether white or black text will read on it.

Background colour CSS
Runs locally in your browser

About the CSS Background Color Generator

Setting a page or panel fill takes one declaration, so the interesting part is everything around it. This generator writes the declaration, converts the value into rgb() and hsl() notation so you can paste whichever form your design tokens use, and works out the WCAG contrast ratio of the fill against pure white and pure black text. Those two numbers tell you at a glance which text colour is safe: anything at or above 4.5 to 1 clears the AA threshold for body copy, and 3 to 1 clears it for large headings.

Dropping the opacity below 100 switches the value to rgba() and, if the fallback line is ticked, prints a solid hex declaration immediately above it. Older engines that cannot parse the second line keep the first, and every modern engine overrides it. Translucent fills stack over whatever sits behind them, so the contrast figures shown here describe the fill alone and will drift once it sits on a photograph.

The property selector matters more than it looks. Writing background is the shorthand, and it resets background-image, background-position, background-size and five other longhands to their initial values. Use it deliberately when you want to clear an inherited gradient, and use background-color when you only want to change the fill. For patterned or gradient fills, the Background Image Generator writes the layered version instead.

How to use

  1. Type a hex value into the Colour field. Three digit shorthand such as #0b3 is expanded for you.
  2. Lower the opacity if you want a translucent fill, and leave the fallback line ticked so older engines still get a solid colour.
  3. Read the two contrast figures under the rule, then copy the CSS or download it as a stylesheet.

Common questions

What contrast ratio do I need for body text?
WCAG AA asks for 4.5 to 1 for normal text and 3 to 1 for text at 18.66px bold or 24px regular and above. AAA raises those to 7 to 1 and 4.5 to 1.
Why does the tool print two background-color lines?
The first is a solid hex fallback for engines that cannot parse rgba, and the second is the translucent value. A parser that understands both keeps the last one it can read.
Can I enter a colour name or an hsl value?
The field takes hex only, because the contrast and hsl figures are calculated from the channel values. Convert other notations first with the colour converter.
Does background-color paint under the border?
Yes. By default the background extends under the border area, which is visible with a dashed or dotted border. Set background-clip to padding-box to stop it.