The brat green, decoded

Tints and shades, and when each earns its place

The rows above are simple mixes: tints step towards white, shades step towards black, nine steps each, computed in your browser. They exist because a real layout needs neighbours, not one heroic colour:

How the contrast numbers are produced

The checker uses the same maths the web standard defines: each channel is converted to a linear value, combined into relative luminance with fixed weights (red 21.26%, green 71.52%, blue 7.22%), and the lighter value divided by the darker with a 0.05 offset. The thresholds shown — 4.5:1 for body text, 3:1 for large text and UI, 7:1 for the strictest tier — come from the W3C contrast minimum. Nothing here is a rough estimate; if the badge says pass, the maths is the standard’s.

Pairings that survive review

• #8ACE00 on #0a0a0a — the signature move, and comfortably AAA.
• #0a0a0a on #8ACE00 — the correct choice for text sitting on the green itself.
• #D4FF00 on #0a0a0a — the acid companion, higher contrast than the base green and better for small labels.
• #8ACE00 on #ffffff — fails for text and only barely passes for large graphics. Treat it as a decorative pair, never a reading pair.

Using the family in a real layout

A text graphic rarely needs more than three values from these rows, and knowing which three is most of the job. The reliable recipe: take the base as the single loud element, take a mid shade as the canvas behind it if you need depth, and take white or black for the words — decided by the checker, not by taste. What breaks layouts is the reverse habit: three loud accents competing on one canvas, which is how a strong colour starts looking cheap.

For UI work the same rule holds with one addition: the 3:1 tier applies to meaningful graphics, so buttons and icons built from the tints need their own contrast check against whatever sits behind them, not just against the base green.

FAQ

Is #8ACE00 the official colour?

It is the hex the community converged on and the one this site’s tools assume. Nobody official published a brand spec, which is why the tints row exists — real designs need the family, not a single value.

Why do my exported images look slightly different?

Screens manage colour differently, and PNG exports carry no profile enforcement here. The hex is the source of truth; judge colour on the device your audience uses.

Can I check any two colours or only these?

Any two. Both inputs accept arbitrary colours, so you can test a client palette against the same thresholds.

Does the tool upload my colours?

No. The mixing, luminance and contrast calculations all run in your browser; nothing is sent anywhere.

Which badge should I care about?

Body text needs the 4.5:1 pass. Large headings and UI marks can live with 3:1. If a pairing fails both, it fails, whatever the aesthetic says.