QUICK REFERENCE · COLOUR

Brat colour codes: the full HEX table

every brat green, its hex, rgb and hsl, WCAG contrast, and copy-paste CSS variables

This is the complete colour reference for the brat aesthetic: the base acid green #8ACE00, the eight tints and eight shades around it, the ink and off-white it is paired with, and ready-to-paste CSS custom properties and a Tailwind snippet. Every value below is computed with the same maths the Brat Green tool uses, so the table and the tool will always agree.

Which green is real? Two values circulate. The album cover green is commonly quoted as #8ACE00 (and matched to Pantone 3570 C) — that is the one this whole page and the site’s tools are built on. But the homepage generator actually paints a slightly softer #8BDC65 on export. If you are matching a cover you generated here, sample the exported file and use #8BDC65; if you are matching the record, use #8ACE00. Both are listed below so you are not guessing.
The full brat green ramp: eight tints toward white, the base 8ACE00, and eight shades toward black, each labelled with its hex code
The whole family in one strip — eight tints toward white, the base, eight shades toward black. Tints are mixed with white at one-ninth steps, shades with black at one-ninth steps.

The core palette

The six values that actually make a brat design. Everything else on this page is tints and shades of the first one.

Brat green (field)
#8ACE00   rgb(138, 206, 0)		 The acid green — the album cover, the default generator field.
Ink black (text)
#111111   rgb(17, 17, 17)		 The word on the green. Not pure #000; the original reads slightly softer.
Off-white (White Mode)
#F5F5F2   rgb(245, 245, 242)		 The inverted field when you switch the generator to white.
Site background
#0A0A0A   rgb(10, 10, 10)		 The near-black pages run on — a hair above pure black.
Accent lime
#D4FF00   rgb(212, 255, 0)		 The brighter lime used for links and highlights in the site UI.
Generator export
#8BDC65   rgb(139, 220, 101)		 The green the homepage generator actually paints — see the note.

The full ramp — hex, rgb, hsl, contrast

Base plus eight tints and eight shades. The two contrast columns are the useful ones: on dark is this colour as text on the near-black background; ink on it is black text sitting on this colour as a fill. AA means it clears 4.5:1 for normal text.

Swatch Step HEX RGB HSL As text on #0A0A0A Ink #111 on it
Base #8ACE00 rgb(138, 206, 0) hsl(80, 100%, 40%) 10.28:1 AA 9.81:1 AA
Tint 1 #97D31C rgb(151, 211, 28) hsl(80, 77%, 47%) 10.98:1 AA 10.48:1 AA
Tint 2 #A4D939 rgb(164, 217, 57) hsl(80, 68%, 54%) 11.84:1 AA 11.30:1 AA
Tint 3 #B1DE55 rgb(177, 222, 85) hsl(80, 67%, 60%) 12.68:1 AA 12.09:1 AA
Tint 4 #BEE471 rgb(190, 228, 113) hsl(80, 68%, 67%) 13.69:1 AA 13.06:1 AA
Tint 5 #CBE98E rgb(203, 233, 142) hsl(80, 67%, 74%) 14.69:1 AA 14.01:1 AA
Tint 6 #D8EFAA rgb(216, 239, 170) hsl(80, 68%, 80%) 15.88:1 AA 15.15:1 AA
Tint 7 #E5F4C6 rgb(229, 244, 198) hsl(80, 68%, 87%) 17.05:1 AA 16.26:1 AA
Tint 8 #F2FAE3 rgb(242, 250, 227) hsl(81, 70%, 94%) 18.44:1 AA 17.59:1 AA
Shade 1 #7BB700 rgb(123, 183, 0) hsl(80, 100%, 36%) 8.12:1 AA 7.75:1 AA
Shade 2 #6BA000 rgb(107, 160, 0) hsl(80, 100%, 31%) 6.27:1 AA 5.98:1 AA
Shade 3 #5C8900 rgb(92, 137, 0) hsl(80, 100%, 27%) 4.75:1 AA 4.53:1 AA
Shade 4 #4D7200 rgb(77, 114, 0) hsl(79, 100%, 22%) 3.51:1 AA-lg 3.35:1 AA-lg
Shade 5 #3D5C00 rgb(61, 92, 0) hsl(80, 100%, 18%) 2.57:1 fail 2.45:1 fail
Shade 6 #2E4500 rgb(46, 69, 0) hsl(80, 100%, 14%) 1.85:1 fail 1.77:1 fail
Shade 7 #1F2E00 rgb(31, 46, 0) hsl(80, 100%, 9%) 1.37:1 fail 1.30:1 fail
Shade 8 #0F1700 rgb(15, 23, 0) hsl(81, 100%, 5%) 1.08:1 fail 1.03:1 fail

Note how quickly the tints fail as text on white — a pale brat green is a fill, not a font colour. The base itself is only ~1.9:1 on white, which is why brat text is black on green, never green on white.

CSS variables (paste-ready)

Drop this in your stylesheet and the whole family is available as var(--brat-green-t3) and friends.

:root {
  --brat-green: #8ACE00;
  --brat-green-t1: #97D31C;
  --brat-green-t2: #A4D939;
  --brat-green-t3: #B1DE55;
  --brat-green-t4: #BEE471;
  --brat-green-t5: #CBE98E;
  --brat-green-t6: #D8EFAA;
  --brat-green-t7: #E5F4C6;
  --brat-green-t8: #F2FAE3;
  --brat-green-s1: #7BB700;
  --brat-green-s2: #6BA000;
  --brat-green-s3: #5C8900;
  --brat-green-s4: #4D7200;
  --brat-green-s5: #3D5C00;
  --brat-green-s6: #2E4500;
  --brat-green-s7: #1F2E00;
  --brat-green-s8: #0F1700;
  --brat-ink: #111111;
  --brat-offwhite: #F5F5F2;
  --brat-bg: #0A0A0A;
  --brat-accent: #D4FF00;
}

Tailwind config

Same values as a theme.extend.colors block, so you can write bg-brat-t2 or text-brat-ink directly.

module.exports = { theme: { extend: { colors: {
  brat: { DEFAULT: '#8ACE00', t1: '#97D31C', t2: '#A4D939', t3: '#B1DE55', t4: '#BEE471', t5: '#CBE98E', t6: '#D8EFAA', t7: '#E5F4C6', t8: '#F2FAE3', s1: '#7BB700', s2: '#6BA000', s3: '#5C8900', s4: '#4D7200', s5: '#3D5C00', s6: '#2E4500', s7: '#1F2E00', s8: '#0F1700', ink: '#111111', paper: '#F5F5F2'
} } } };

How to use the ramp

  • Base (#8ACE00) — the field of a cover, a hero band, a button. The loud one.
  • Tints — card fills and chips on dark layouts where the full acid value would glare; hover states; borders you want visible but not shouting.
  • Shades — quiet backgrounds behind white text in the same family, and the deep greens (s5–s8) read almost black, useful for a brat-adjacent dark theme without leaving green.
  • Pairing rule — black text on the base or any tint; white text only from about s3 downward. Check the contrast columns before you ship.

FAQ

What is the exact brat green hex code?

The album-cover green is usually given as #8ACE00. This site’s generator exports a slightly softer #8BDC65. There is no single official value — the record’s own cover was a low-resolution export — so pick one and be consistent; both are in the table above.

Is brat green a Pantone colour?

It is commonly matched to Pantone 3570 C, a bright acid green. That is an approximation, not an official brand colour — the album artwork never published a Pantone.

Can I use brat green as text?

Not on white — it is too light (about 1.9:1). Use black text on a green fill, or a dark shade (s3 and below) as text on a light background. The contrast columns show exactly where each value crosses the WCAG AA line.

How are the tints and shades calculated?

Linear RGB mixes with white and with black in one-ninth steps, the same method the Brat Green tool uses in your browser. That is why tint 1 is #97D31C and shade 1 is #7BB700, symmetric around the base.

Can I reuse these values and the image?

Yes — the colour codes are facts, and the ramp graphic is original and free to reuse with a link back. If you are citing a reference for the brat palette, this page is the one to point at.

Contrast ratios are WCAG 2.1 relative-luminance, computed in-browser-equivalent to two decimals. Values generated from the site’s own Brat Green tool maths; images are original.