Brat Green Color Code: The Exact Hex, RGB, and CMYK Values

If you've been trying to recreate the iconic Charli XCX look in your designs, you've landed in the right place. The brat green color code is #8ACE00 — a bold, electric lime-green that became one of the most recognizable shades in pop culture the moment Charli XCX dropped her 2024 album Brat.

This post gives you every format you need: hex, RGB, HSL, CMYK, and CSS. Plus, step-by-step instructions for using brat green in Canva, Figma, Photoshop, and web projects.

What Is the Exact Brat Green Color Code?

The official brat green hex code is #8ACE00.

Here are all the format values you'll need depending on your design tool:

If you want to use it directly in CSS:

/* Background */
background-color: #8ACE00;

/* Text */
color: #8ACE00;

/* As a CSS variable */
:root {
  --brat-green: #8ACE00;
}

All Official Brat Color Variants

The Brat album era actually used a small family of core colors — not just the green. Here's the complete palette:

The original album cover pairs #8ACE00 as the background with pure white (#FFFFFF) for the blurry lowercase text. This high-contrast combination is what makes it immediately eye-catching — even as a small thumbnail on a phone screen.

Why Did Charli XCX Choose This Exact Green?

The shade isn't random. Charli XCX worked with art director Imogene Strauss to create an aesthetic that felt deliberately anti-polished — raw, DIY, and unapologetically confident. The lime-green was chosen because it reads as ugly-beautiful: too bright to ignore, too bold to be tasteful in a conventional sense.

It's the same energy as neon post-it notes, hazard vests, and rave flyers printed at 2am. The color doesn't ask for your attention. It demands it.

The typography reinforces this — stretched, blurry, lowercase Arial Bold that looks like it was made in Microsoft Paint. The whole aesthetic is a statement: brat doesn't need to be pretty to be iconic.

How to Use Brat Green in Your Design Tools

In Canva

1. Open your design
2. Click on the element you want to color
3. Click the color swatch in the top toolbar
4. Select “+ Add new color”
5. Type #8ACE00 in the hex field
6. Click the checkmark to apply
7. Save it to your Brand Colors for quick access later

In Figma

1. Select your shape or text
2. In the right panel, click the fill color box
3. In the color picker, click the hex field at the bottom
4. Type 8ACE00 (no #) and press Enter
5. To save it: open your design system → Styles → + → Solid → paste the hex

In Photoshop

1. Click on the foreground color swatch in the toolbar
2. In the Color Picker window, find the “# field” at the bottom
3. Type 8ACE00 and click OK
4. Use the Paint Bucket or fill (Shift+F5) to apply

In CSS / Tailwind

Standard CSS:

.brat-bg {
  background-color: #8ACE00;
}

If you're using Tailwind and want to add it as a custom color, in your tailwind.config.js:

theme: {
  extend: {
    colors: {
      'brat-green': '#8ACE00',
    }
  }
}

Then use: bg-brat-green or text-brat-green in your HTML.

The Brat Green Color Swatch

Here's what #8ACE00 looks like as a full block — the same way it appears on the album cover:

When placed next to white text, the contrast ratio is approximately 3.1:1 — technically below WCAG AA accessibility standards for body text, which is intentional. The brat aesthetic is not trying to be accessible in the conventional sense. It's trying to be bold.

Create Your Own Brat-Style Images with the Exact Color

Now that you have the exact brat green color code, you can recreate the aesthetic yourself — or let our tool do it for you automatically.

Brat Generator uses #8ACE00 as the default background color, with the authentic blurry lowercase font that matches the original album cover. Type any text, customize colors, and download a 1080×1080px image in seconds — no signup, no watermark, completely free.

It's the fastest way to get the brat look without manually setting up the colors every time.