Brat Color Code: The Exact Brat Green Hex Code & Complete Color Guide (2026)

Everyone recognizes brat green when they see it. That specific lime โ€” warm, slightly yellowy, immediately distinct from every other green on a color picker โ€” became one of the most culturally recognizable colors of 2023 and 2024.

But recognizing it and recreating it are two different things. Get the brat color code slightly wrong and the whole aesthetic falls apart. This guide gives you every brat color code format you need โ€” hex, RGB, HSL, CMYK, and CSS โ€” so the color is always exactly right.


What Is the Brat Color Code?

The brat color code is #8ACE00.

That is the exact hex value of brat green โ€” the lime green background from Charli XCX’s 2023 Brat album cover. For the full cultural story behind this color and what it communicates, the Brat Green guide covers everything. This article focuses on something different: every technical format you need to use this brat color code correctly across different tools and platforms.

Every tool on the free Brat Generator uses this exact brat color code automatically โ€” so if you are generating brat style content, the color is already correct without entering anything manually.


Brat Color Code in Every Format

Different tools and platforms need the brat color code in different formats. Here is every version:

Hex Code

#8ACE00

Hex is the standard format for web design, social media tools, Canva, Photoshop, and most online color pickers. When something asks for a color code, this is the format it wants.

The brat hex code #8ACE00 breaks down as:

  • 8A = Red channel value
  • CE = Green channel value
  • 00 = Blue channel value

RGB

R: 138 / G: 206 / B: 0

RGB is used in digital design software โ€” Photoshop, Illustrator, Figma, Procreate. When the color picker asks for RGB values instead of a hex code, enter these three numbers to get the exact brat green color.

HSL

H: 79ยฐ / S: 100% / L: 40%

HSL stands for Hue, Saturation, Lightness. Some design tools use HSL sliders instead of hex or RGB. The brat color code in HSL is 79 degrees hue, fully saturated, at 40 percent lightness.

CMYK

C: 33 / M: 0 / Y: 100 / K: 19

CMYK is the print color format โ€” used for merchandise, posters, printed materials, and anything that goes to a physical printer. If you are making brat aesthetic merch or print designs, use these CMYK values for the closest match to the original brat color.

Note: CMYK output depends on printer calibration. The values above are the standard conversion โ€” actual printed color may vary slightly depending on paper and printer settings.

CSS

background-color: #8ACE00;

For web developers adding brat green to a website or app, the CSS property above applies the exact brat color code as a background. For text color:

color: #8ACE00;

Why the Exact Brat Color Code Matters?

The brat color code is not interchangeable with other lime greens. Here is what happens when the brat hex code is wrong:

Too blue (#6DC300): Reads as a cooler lime, closer to mint. Immediately looks off to anyone familiar with the brat aesthetic.

Too saturated (#7FFF00 โ€” chartreuse): Too electric, too neon. Looks harsh and loses the warmth that makes brat green distinctive.

Too dark (#6B9E00): Reads as olive-adjacent. Loses the brightness that makes brat green pop on a feed.

Too yellow (#B8D400): Too warm, too muted. Loses the sharpness of the original brat color code.

The specific value #8ACE00 sits in a precise spot โ€” warm enough to feel intentional, bright enough to stand out, restrained enough not to look neon. For a side by side comparison of brat green against every similar shade, the Brat Green guide has the full visual breakdown.


Brat Color Code Variations

The original brat color code is #8ACE00. But the brat aesthetic has evolved and some creators use color variations while keeping the same visual grammar. Here are the most common:

Pink Brat

#FF69B4 โ€” Hot pink as a brat green substitute. Same font behavior, same blur, same lowercase aesthetic โ€” different color. Popular for brat pfp variations and personal rebrands of the aesthetic.

The free Brat Generator lets you input any custom background color โ€” so you can recreate the pink brat variation with the same tool.

Black Brat

#1A1A1A โ€” Near-black background with white or brat green text. The darker, more minimal version of the aesthetic. Keeps the same restraint and lowercase energy with a completely different mood.

White Brat

#F5F5F5 โ€” Off-white background with black text. The most understated variation โ€” almost invisible as a brat reference until you see the font and format. Works well for content that wants brat energy without the lime green signal.

Inverted Brat

Black background (#1A1A1A) with brat green text (#8ACE00). The colors flip โ€” the text becomes the lime element instead of the background. Strong visual contrast and recognizable as a brat aesthetic variation to anyone familiar with the original brat color code.


How to Use the Brat Color Code?

In the Brat Generator

The Brat Generator applies #8ACE00 automatically as the default background. You do not need to enter the brat color code manually โ€” the tool uses it correctly from the start. If you want to switch to a variation, use the custom color picker and enter the hex code directly.

In Canva

Open a design in Canva. Click the background or any color element. Click the color picker. Delete the existing hex value. Type 8ACE00 (without the #). Press Enter. Canva applies the exact brat color code.

In Photoshop

Open the color picker. In the hex field at the bottom, enter 8ACE00. Or enter the RGB values: R 138, G 206, B 0. Click OK. The exact brat green is now your selected color.

In Figma

Click the fill color on any element. In the hex input field, type 8ACE00. Figma applies the exact brat color code immediately.

In CSS

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

/* Text */
color: #8ACE00;

/* Border */
border-color: #8ACE00;

/* With black text on brat green background */
background-color: #8ACE00;
color: #1A1A1A;

Brat Color Code for Different Use Cases

Profile Pictures

For brat pfp use, the brat color code #8ACE00 as background with #1A1A1A (near-black) text gives the highest contrast at small sizes. This combination reads correctly down to very small thumbnail sizes โ€” which is the main reason it works so well as a profile picture format.

Full brat pfp guide is at the Brat PFP Ideas page.

Memes

Brat color code as background, black text, short phrase. Same rules apply โ€” high contrast, short text, correct hex. The Brat Meme Generator applies the brat color code automatically in the meme format.

Album Covers

For music releases, the brat color code in a square format with centered or slightly off-center text creates the classic brat album cover look. The Brat Album Cover Generator handles this specifically โ€” brat color code applied, correct dimensions, ready to upload to streaming platforms.

Web Design

Using the brat color code as an accent in web design โ€” a border, a button, a highlight โ€” brings brat aesthetic energy into a digital product without committing to a full lime green layout. The CSS values above make implementation straightforward.


Brat Color Code and the Full Aesthetic

The brat color code is one part of three things working together. The color alone does not make something look brat โ€” it is the combination of:

Color: #8ACE00 exactly
Font: Arial Narrow, lowercase, stretched, slightly blurred
Text: Short, dry, specific, not trying too hard

Get all three right and the output is immediately recognizable. Get one wrong and it reads as an approximation.

The Brat Aesthetic guide covers what the full aesthetic communicates and why all three elements need to work together. The Charli XCX Brat Font guide handles the typography side โ€” how the font works alongside the brat color code. And the Brat Quotes guide gives you 100+ short phrases ready to drop into any brat color content.


Quick Reference โ€” All Brat Color Codes

FormatValue
Hex#8ACE00
RGBR: 138, G: 206, B: 0
HSLH: 79ยฐ, S: 100%, L: 40%
CMYKC: 33, M: 0, Y: 100, K: 19
CSSbackground-color: #8ACE00

The Short Version

The brat color code is #8ACE00. Use it exactly โ€” not a similar lime, not an approximation, not whatever the first result in a color picker gives you.

The specific warmth of #8ACE00 is what makes brat green recognizable. Change it slightly and it stops being brat green. It just becomes a green.

Start with the free Brat Generator and the brat color code is already applied correctly โ€” no hex entry needed.


Similar Posts