Free · Fast · Privacy-first

CSS Background Color Generator

Picking a background colour by memory or trial-and-error wastes time, hides accessibility failures, and forces another round trip through the design tool every time a value needs to change.

⚡

Accepts hex, RGB, and HSL colour formats with live preview

🔒

WCAG AA and AAA contrast ratio checker built in

✨

Converts between colour formats automatically

⚡

One-click copy of the background-color CSS declaration

Cost: Free forever
Sign-up: Not required
Processing: In your browser
Privacy: Files stay local

FreeNo signupWhite-label

Add this Background Gen to your website

Drop the Background Gen into any page — blog post, product docs, intranet, school portal — with a single line of HTML. Your visitors get the full tool, processed entirely in their browser. No backend, no uploads, no signup.

Files stay 100% in the visitor's browser
Responsive — adapts to any container width
Free forever, no API key needed

Embed code

<iframe
  src="https://www.fixtools.io/css-tool/background-gen?embed=1"
  width="100%"
  height="780"
  frameborder="0"
  style="border:0;border-radius:16px;max-width:900px;"
  title="Background Gen by FixTools"
  loading="lazy"
  allow="clipboard-write"
></iframe>

<iframe
  src="https://www.fixtools.io/css-tool/background-gen?embed=1"
  width="100%"
  height="780"
  frameborder="0"
  style="border:0;border-radius:16px;max-width:900px;"
  title="Background Gen by FixTools"
  loading="lazy"
  allow="clipboard-write"
></iframe>

Attribution-friendly: a small "Powered by FixTools" link appears in the embed footer.

Colour Formats, Contrast Ratios, and WCAG Compliance for CSS Backgrounds

CSS accepts background colours in several formats and each has trade-offs that matter once a palette grows beyond a single hero swatch. Hex codes like #3b82f6 are compact and common in design handoff, but the six characters are not intuitive to read, and adjusting one channel by a few percent requires manual base-16 arithmetic. RGB notation such as rgb(59, 130, 246) makes the red, green, and blue channels explicit, which is helpful when reading code aloud during review or pairing. HSL notation, written as hsl(217, 91%, 60%), separates hue, saturation, and lightness into three orthogonal axes, which makes programmatic colour adjustments far easier because increasing lightness by 10 percent is a single number change. For CSS variables and design tokens, HSL is the most maintainable format because shifting a hue across an entire palette or pulling saturation down for a muted neutral is a predictable, readable change rather than a recalculation of hex pairs.

WCAG contrast ratios measure how readable text is against its background using a relative luminance formula defined by the W3C. The ratio is computed from the relative luminance of the two colours and ranges from 1:1 for identical colours to 21:1 for pure black on pure white. WCAG AA requires a ratio of at least 4.5:1 for normal text smaller than 18pt or 14pt bold, and 3:1 for text at or above those sizes. WCAG AAA tightens those requirements to 7:1 for normal text and 4.5:1 for large text. Failing AA means users with low vision, age-related sight loss, colour blindness, or anyone in a high-glare environment such as direct sunlight will struggle to read content. A common mistake is testing contrast against a white mockup background rather than the actual page background colour the text will sit on once production styles cascade in.

A background colour affects more than just text contrast: it changes how border colours, drop shadows, focus rings, and inline images read. A medium-grey background at #6b7280 placed on a white page has adequate contrast for decorative chrome, but placing white text on that same grey fails AA at roughly 2.8:1. Switching to a darker background at #1e293b gives white text a contrast ratio above 15:1, comfortably exceeding AAA, but it also flattens any subtle box-shadow that was tuned against a lighter surface. When building a UI theme, test every text-on-background combination you will actually ship, not just the primary heading on the primary surface. Run buttons, form labels, placeholder text, helper text, disabled states, link colours, and error messages through the contrast check, because each of those tokens lives on a slightly different background and inherits no guarantee from the headline pass.

Modern CSS adds newer colour spaces such as oklch() and color() that are worth knowing even if you keep hex for now. oklch() works in a perceptually uniform space, which means a 10 percent lightness change in oklch produces a visually consistent step regardless of hue, while the same change in HSL can produce wildly different perceived brightness for yellow versus blue. The color-mix() function blends two colours by percentage and is supported across all evergreen browsers, which removes the need to precompute hover or active variants in JavaScript. Wide-gamut display-p3 backgrounds can be authored with color(display-p3 0.2 0.5 0.9) and the browser falls back to sRGB on older hardware. None of this replaces the hex workflow, but it lets the contrast-checked background-color generated here participate in a token system that scales as the design language matures.

MDN: background-color WCAG 2.1 Contrast Requirements

How to use this tool

💡

Enter a background colour in hex, RGB, or HSL format, then enter a foreground text colour to check the contrast ratio. The tool reports the ratio and whether it passes WCAG AA (4.5:1 for normal text) or AAA (7:1). Copy the CSS when the combination passes.

How It Works

Step-by-step guide to css background color generator:

1
Enter the background colour
Type or paste a hex, RGB, or HSL value into the background colour field. The preview panel updates immediately with the chosen colour and the tool also displays the equivalent values in the other two formats, so a hex code from a design tool can be converted to HSL for a token system without opening a second utility or running any conversion script in the browser console.
2
Enter the foreground text colour
Add the colour you plan to use for text on this background, whether that is a body copy grey, a heading near-black, a link colour, or a muted helper text shade. The tool calculates the contrast ratio between the two values, displays the numeric ratio to one decimal place, and surfaces whether the combination clears the WCAG AA and AAA thresholds for both normal and large text sizes.
3
Check the WCAG result
Review the AA and AAA pass or fail indicators rendered next to the ratio. Adjust the background or text colour using the HSL lightness slider until the required standard is met for the size of type you intend to ship. If body copy is failing AA at 4.3:1, dropping the background lightness by a few points usually closes the gap without changing the brand hue noticeably.
4
Copy the CSS output
Click Copy CSS to get the background-color declaration in your chosen format. Paste it into your stylesheet, a CSS module file, a styled-components template literal, or a CSS variable definition inside a design tokens file. The declaration is plain CSS with no vendor prefixes or framework-specific syntax, so it works equally well in vanilla CSS, Sass, Tailwind arbitrary values, and CSS-in-JS libraries.

Real-world examples

Common situations where this approach makes a real difference:

Brand designer verifying a colour palette

A brand designer receives a palette from a stakeholder with a primary colour of #4f46e5 and a lighter accent at #6366f1. They enter the primary as the background and test white (#ffffff) as the foreground text, and the tool returns a contrast ratio of 5.9:1, confirming AA compliance for normal text but falling just short of AAA. They document the passing combination, flag that the lighter #6366f1 accent fails AA at 3.8:1 against white, and recommend the team reserve the lighter tint for decorative chrome rather than buttons or links.

Developer building a dark mode theme

A developer building a dark mode is selecting a surface background for card components. They test #1e293b with pure white text and get 15.3:1, well above AAA, then test the same background against a muted secondary text colour of #94a3b8 and get 4.6:1, which clears AA for body copy. They also try a disabled label at #475569 and find it lands at 2.0:1, far below AA, so they bump the disabled token to #64748b and confirm 3.4:1. All three combinations are added to the CSS variable definitions and documented as approved.

Accessibility audit of an existing site

An accessibility consultant is auditing a marketing site with a light yellow section background (#fef9c3) carrying grey supporting text (#6b7280). They enter both values and discover a contrast ratio of only 2.1:1, a clear WCAG failure that no automated scanner had previously flagged because the section was screenshot-tested against a white default. They adjust the text colour to #374151, confirm the new ratio of 8.6:1 passes AAA, and recommend the change to the engineering team along with a Stark plug-in audit for any other coloured panels on the site.

Student learning colour theory for web design

A design student is exploring colour combinations for a course project on accessible palettes. They use the HSL input to shift hue from 200 to 260 in 10-degree steps, watching how each background changes the contrast ratio with their chosen body text. The exercise teaches them that cool hues at the same lightness value can have meaningfully different contrast ratios due to luminance weighting of the RGB channels, where green dominates perceived brightness while blue contributes the least, so two backgrounds that look equally dark to the eye can deliver very different ratios.

Pro tips

Get better results with these expert suggestions:

Define background colours as CSS custom properties

Declare --bg-primary, --bg-secondary, and --bg-surface as CSS variables on :root and reference them throughout the stylesheet with background-color: var(--bg-primary). Swap them with a single media query or class toggle when adding dark mode, contrast themes, or per-brand white labelling. This pattern avoids duplicating every selector when theming, gives the declaration semantic meaning at a glance, and makes the eventual diff for a palette change a handful of lines instead of dozens.

Use currentColor for decorative elements

When a background element such as a badge dot, divider, or icon swatch should always match the nearby text or icon colour, set background-color: currentColor. The keyword inherits the computed colour value from the element or its parent, keeping decorative backgrounds in sync with text colour without hardcoding a second value. This is especially useful inside button variants, where the text colour and the bullet, underline, or arrow background should track each other through hover and focus states automatically.

Test at 200% browser zoom

WCAG requires content to remain accessible at 200 percent zoom. Test your background and text colour combinations at zoom levels above 100 percent to confirm contrast does not degrade when backgrounds are rearranged by zoom-triggered layout shifts, when sticky chrome overlaps content, or when wrapped flex items end up sitting on a different ancestor background than they did at the default zoom. Browser zoom is the single accessibility tool used by the largest number of users, far more than screen readers.

Apply background-clip: text for gradient text

Set background: linear-gradient(...) along with background-clip: text and color: transparent to apply a gradient fill to text rather than to the element box. The solid background-color must still be set as a fallback on the parent or on the same element for browsers that do not support background-clip: text, which now includes only some embedded WebKit contexts. Add -webkit-background-clip: text alongside the unprefixed property to cover the longest tail of devices in the wild.

Use HSL for theme colour systems

HSL lets you create consistent tints and shades by adjusting lightness alone. Set a base hue, then generate a scale from 10% lightness to 95% lightness. All steps share the same hue and feel cohesive, unlike arbitrary hex palettes.

Check contrast on real backgrounds

Test your text-on-background combination against the actual page background, not white. A contrast ratio that passes AA on white may fail on a light grey or coloured section background.

Include the alpha channel when needed

Use rgba() or hsla() when you need a semi-transparent background. Note that contrast checkers require solid colour equivalents: a 50% opacity black on white is effectively #808080, not #000000.

FAQ

Frequently asked questions

background is a shorthand property that sets multiple background-related values in a single declaration, including background-image, background-position, background-size, background-repeat, background-attachment, background-origin, background-clip, and background-color. Writing background: #3b82f6 sets the colour but also resets every other sub-property to its initial value, which can wipe out an inherited image or a previously declared gradient layered elsewhere in the cascade. Using background-color: #3b82f6 only sets the colour and leaves every other background property untouched. Reach for background-color whenever you want to layer a fallback colour under a background image without overwriting the image, size, or position settings declared above.

WCAG AA requires a contrast ratio of at least 4.5:1 for normal text smaller than 18pt or 14pt bold, and 3:1 for large text at or above those sizes. Decorative images, logotype, and disabled controls are exempt from the text rules, but interactive non-text elements such as input borders and focus indicators must still hit 3:1 against adjacent colours under WCAG 2.1. WCAG AAA raises the requirements to 7:1 for normal text and 4.5:1 for large text, which is the standard most public-sector procurement contracts request. Most regional accessibility laws including the EAA, ADA Title III, and AODA cite AA compliance as the minimum legal threshold.

Yes. Every modern browser fully supports hsl() and hsla() in background-color declarations, both in the legacy comma-separated syntax and the newer space-separated form. Write background-color: hsl(217, 91%, 60%) or background-color: hsl(217 91% 60%) and the result is identical. HSL values are particularly useful inside CSS custom properties because you can split the hue, saturation, and lightness across individual variables and compose them with background-color: hsl(var(--hue) var(--sat) var(--light)). Theming becomes one variable change rather than a search-and-replace, and shifting the entire palette is as simple as overriding --hue under a different selector or class.

Background colours only fill the content area, padding area, and optionally the border area of an element. If the element has no height and no content, its rendered height collapses to zero and the background has no area to paint, even though the declaration is technically applied. Add height, min-height, padding, or actual content to give the element a rendered size. Also confirm that no parent element is clipping overflow with overflow: hidden, that the element is not positioned outside the document flow without explicit dimensions, and that no descendant with a higher z-index and an opaque background is covering the colour you expect to see at the surface.

Use background-color on an inline element such as a span or mark that wraps only the text you want highlighted. Inline elements size to their content rather than filling the full line width, so the background hugs the glyphs. Alternatively, set box-decoration-break: clone to ensure the background is applied per line fragment when text wraps across multiple lines, which prevents the background from forming a single rectangle from the start point to the end point of the wrapped range. Combine with padding for a softer highlight pill, and add border-radius to round the edges in the same step.

No. background-color does not inherit by default. Its initial value is transparent, which is why elements show through to their parent background rather than receiving a user-agent default colour. Removing a background-color declaration therefore reveals the parent colour rather than reverting to white. If you want child elements to visually share a background colour, set it on the parent and rely on the default transparent value in the children. Repeating the same colour on every descendant inflates the stylesheet, hurts maintainability, and can cause subtle bugs when a future theme update changes the parent token but leaves child overrides behind.

Use background-color: transparent, which is the initial value for all elements and is the clearest declaration of intent. You can also write background-color: rgba(0, 0, 0, 0) or background-color: hsla(0, 0%, 0%, 0) and the rendered result is identical. The transparent keyword is preferred because it expresses the intent without choosing an arbitrary base colour for the zero-alpha value. Transparency is not the same as removing the background entirely: a transparent background still participates in hit testing and pointer-events targeting unless pointer-events: none is explicitly set, which matters for overlay elements and click-through layers.

Most browsers strip background colours and images in print mode to save ink unless instructed otherwise. Force backgrounds to print by adding -webkit-print-color-adjust: exact and the standard print-color-adjust: exact properties to the element or to the root selector inside a @media print rule. Place the declarations inside the print media query so they only apply when the page is being rendered to paper or PDF. Note that print-color-adjust is a browser hint rather than a hard guarantee: users can override it through accessibility print settings or operating-system print dialogues, and some enterprise print servers strip colour to reduce toner usage.

Use rgba() or hsla() with an alpha value between 0 and 1, where 1 is fully opaque and 0 is fully transparent. background-color: rgba(15, 23, 42, 0.6) renders the slate-900 colour at 60 percent opacity, letting whatever is beneath show through proportionally. Modern CSS also accepts hex with alpha as an 8-character notation: background-color: #0f172a99 is the same colour at 60 percent opacity. Avoid setting opacity on the element itself because it affects every descendant including text, while rgba and 8-digit hex affect only the background layer and leave the text fully readable.

Design the light and dark palettes independently rather than inverting one to produce the other. In light mode, page backgrounds work best between 96 and 100 percent lightness in HSL, with surface elevation introduced by very subtle grey tints rather than shadows alone. In dark mode, avoid pure black for the page background and reach for values between 5 and 15 percent lightness with a slight blue or neutral tint, then build elevation by stepping lightness up by 5 to 8 points per surface level. Run every text token against every background token through the contrast checker for both themes before locking the design system.