BRAT GREEN COLOR CODE
HEX, RGB, CMYK, HSL, PNG, SVG & Complete Color Palette Guide
Introduction
Brat Green (#8ACE00) is one of the most recognizable and influential color trends of recent years. This bold acid yellow-green shade became widely associated with Charli XCX's Brat era and quickly expanded beyond music into social media, fashion, graphic design, marketing, and digital culture.
Known for its loud, energetic, and unconventional appearance, Brat Green symbolizes creativity, individuality, rebellion, and modern internet culture. Its vibrant visual impact makes it a popular choice for designers, brands, and creators looking to capture attention and stand out from traditional color palettes.
Whether you're looking for the exact HEX code, RGB values, CMYK print conversions, HSL specifications, downloadable PNG and SVG assets, accessibility information, CSS implementation examples, or design inspiration, this guide provides everything you need to work with Brat Green effectively.
Explore the complete Brat Green color palette, discover compatible color combinations, learn how to use the shade in popular design software, and find answers to frequently asked questions about one of the internet's most iconic modern colors.
QUICK REFERENCE: BRAT GREEN COLOR VALUES
All official Brat Green color codes in one place. Copy the value you need for your project.
| Format | Value | Notes |
|---|---|---|
| HEX | #8ACE00 | Standard web & design format |
| RGB | rgb(138, 206, 0) | Screen / digital design |
| CMYK | 33, 0, 100, 19 | Print design |
| HSL | hsl(80, 100%, 40%) | CSS & programmatic use |
| HSV | 80°, 100%, 81% | Photoshop / Illustrator |
| Pantone (Closest) | Pantone 382 C | Professional print matching |
| CSS Variable | --brat-green: #8ACE00; | Web development |
WHAT IS BRAT GREEN?
The Origin of Brat Green
Brat Green is the acid yellow-green color associated with Charli XCX’s 2024 album “Brat.” The album’s cover — a deliberately blurry, low-resolution rendering of this color against stark black text — made the shade instantly iconic. It was a design choice that felt intentionally crude, raw, and anti-corporate.
The color sits at exactly 80 degrees on the color wheel, precisely between pure yellow and pure green, at full 100% saturation. This makes it feel simultaneously synthetic, energetic, and unapologetically bold.
Why This Shade Became So Popular
High visibility: The extreme saturation makes it impossible to ignore on screens, in print, and in the physical world.
Meme culture: The lo-fi Brat album cover became one of the most replicated design templates online in 2024.
Minimalist pairing: Brat Green works perfectly with just black and white — no other colors needed.
Cultural timing: It arrived as a symbol of authenticity and anti-perfectionism at exactly the right cultural moment.
The Brat Aesthetic
The broader Brat aesthetic draws from early 2000s rave culture, Y2K graphic design, DIY zine aesthetics, and anti-perfectionism. The color is at its heart: aggressive, vivid, and distinctly not trying to appeal to everyone. That tension — a color some find garish and others find electrifying — is what makes it culturally loaded.
OFFICIAL BRAT GREEN COLOR VALUES EXPLAINED
HEX Value: #8ACE00
HEX codes are the standard format for digital color. The six-character code #8ACE00 breaks into three pairs: 8A (red = 138), CE (green = 206), and 00 (blue = 0). The near-zero blue value is what gives Brat Green its warm, acidic quality. Use HEX in web design, CSS, Figma, Sketch, Canva, and all major digital design tools.
RGB Value: rgb(138, 206, 0)
RGB (Red, Green, Blue) is the color model used by all screens. Brat Green’s RGB value is 138, 206, 0. The high green channel (206 out of 255) dominates, while the complete absence of blue keeps it from appearing cool or teal. Use this format in CSS, digital illustration, video editing software, and screen-based design.
CMYK Value: 33, 0, 100, 19
CMYK (Cyan, Magenta, Yellow, Black) is the color model used in print. Brat Green converts to approximately C:33 M:0 Y:100 K:19. The maximum yellow (100%) combined with moderate cyan creates the yellow-green hue. Note: Brat Green is highly saturated — always request a physical proof before large print runs.
HSL: hsl(80°, 100%, 40%)
HSL (Hue, Saturation, Lightness) is useful for adjusting colors programmatically. Brat Green sits at 80° hue (between yellow at 60° and green at 120°), at 100% saturation (fully vivid), and 40% lightness (medium-dark). Adjusting the lightness value creates tints and shades of the color.
HSV: 80°, 100%, 81%
HSV (Hue, Saturation, Value) is favored in Adobe Photoshop and Illustrator. The value channel (81%) confirms Brat Green is a mid-bright color. Full saturation at 100% means no white is mixed into the hue.
DOWNLOAD BRAT GREEN PNG, SVG & BACKGROUND FILES
The following file types are available for download for use in your creative projects. All files are free for personal and commercial use.
Available File Formats
- Transparent PNG (1000x1000px): Brat Green swatch with alpha channel for layering
- Solid Background PNG: Full #8ACE00 fill, ideal for social media and backgrounds
- SVG Swatch: Vector format, infinitely scalable without quality loss
- CSS Variables file: Complete Brat palette as ready-to-use CSS
Why Use SVG?
SVG (Scalable Vector Graphics) is the best format when you need the color at any size without quality loss. Use SVG swatches in presentations, branding decks, websites, and any project where you may need to resize freely. Brat Green at 20px or 2000px will look identical in SVG format.
PNG for Web and Social
PNG files preserve the exact HEX value #8ACE00 with no lossy compression — unlike JPEG, which shifts colors. Use PNGs for social media graphics, blog thumbnails, overlay elements, and backgrounds. The transparent version is ideal for layering over other content.
Print-Ready Files
For print, always use CMYK values C:33 M:0 Y:100 K:19 in your design software. Export as high-resolution PDF (at least 300 DPI) from Illustrator or InDesign. Screen previews of Brat Green will always appear brighter than the printed result — proof on your target paper stock first.
COMPLETE BRAT COLOR PALETTE
The core Brat aesthetic is defined by three colors: signature Brat Green, pure black, and white. The extended palette allows for more versatile design work while maintaining the Brat aesthetic.
| Color Name | Hex Code | RGB | Best Use |
|---|---|---|---|
| Brat Green (Primary) | #8ACE00 | 138, 206, 0 | Hero backgrounds, main brand color |
| Brat Black | #111111 | 17, 17, 17 | Text, borders, contrast elements |
| Brat White | #FFFFFF | 255, 255, 255 | Clean backgrounds, negative space |
| Dark Brat Green | #5E9000 | 94, 144, 0 | Hover states, shadows, body text on light backgrounds |
| Light Brat Green | #B8E84D | 184, 232, 77 | Subtle highlights, light-mode accents |
| Muted Brat Green | #A3BE4D | 163, 190, 77 | Supporting elements, backgrounds |
| Neon Brat Green | #9FFF00 | 159, 255, 0 | Glow effects, rave aesthetic |
| Brat Tint 50% | #C8F060 | 200, 240, 96 | Very light fills, subtle backgrounds |
BRAT GREEN VS OTHER POPULAR GREEN COLORS
Brat Green is often confused with similar acidic greens. Here is how it compares:
| Color | Hex | Hue | Saturation | Key Difference |
|---|---|---|---|---|
| Brat Green | #8ACE00 | 80° | 100% | The reference — acid yellow-green |
| Chartreuse | #7FFF00 | 90° | 100% | More yellow, brighter, slightly lighter |
| Lime Green | #32CD32 | 120° | 61% | Cooler, more traditional green |
| Neon Green | #39FF14 | 110° | 100% | More electric, lacks warmth |
| Pantone 382 C | #8DB600 | 78° | 100% | Closest print match; slightly darker |
| Pure Green | #00FF00 | 120° | 100% | Screen only; no red channel |
Brat Green vs Chartreuse
Chartreuse (#7FFF00) is the most similar color to Brat Green but slightly more yellow and brighter. At 90° on the color wheel vs Brat Green’s 80°, Chartreuse leans further toward yellow. Brat Green’s lower lightness (40% vs ~50%) gives it more visual weight for design use.
Brat Green vs Lime Green
True Lime Green (#32CD32) is a much cooler, more traditional green. Brat Green contains far more yellow in its base hue, making it feel warmer and more aggressive. If you describe something as “lime green” meaning acid yellow-green, Brat Green is likely what you mean.
Closest Pantone Equivalent
Pantone 382 C (HEX #8DB600) is the standard recommendation for print reproduction of Brat Green. It is marginally darker and slightly more olive, but it is the closest standardized print color available.
HOW TO USE BRAT GREEN IN DESIGN PROJECTS
| Platform | Steps to Use Brat Green (#8ACE00) |
|---|---|
| Canva | Open any design in Canva → Select an element → Open the color picker → Enter #8ACE00 → Press Enter → Save to Brand Kit. |
| Figma | Select an element → Click Fill Color → Paste #8ACE00 → Save as a Style → Name it "Brat Green" → Reuse across components. |
| Photoshop | Open Color Picker → Enter #8ACE00 → Add to Swatches → Name it "Brat Green" → Available in all documents. |
| Illustrator | Open Swatches Panel → New Color Swatch → RGB Mode → R:138, G:206, B:0 (or #8ACE00) → Name it "Brat Green" → Click OK. |
BRAT GREEN CSS CODE FOR WEBSITES
| Technology | Code Snippet |
|---|---|
| CSS Variables |
:root {
|
| Basic CSS |
.brat-bg { background:#8ACE00; }
|
| Tailwind CSS |
theme: {
|
| SCSS / SASS |
$brat-green:#8ACE00;
|
| HTML Inline Style |
<div style="background:#8ACE00; color:#000; padding:20px;">
|
ACCESSIBILITY & CONTRAST RATIO ANALYSIS
Understanding Brat Green’s contrast ratios is essential for accessible design. WCAG 2.1 requires a minimum contrast ratio of 4.5:1 for normal text (AA) and 7:1 for enhanced (AAA).
| Combination | Contrast Ratio | WCAG AA | WCAG AAA |
|---|---|---|---|
| Black text on Brat Green | 8.59:1 | ✅ PASS | ✅ PASS |
| White text on Brat Green | 2.44:1 | ❌ FAIL | ❌ FAIL |
| Brat Green text on Black | 8.59:1 | ✅ PASS | ✅ PASS |
| Brat Green text on White | 2.44:1 | ❌ FAIL (Large Text Only) | ❌ FAIL |
BRAT GREEN COLOR PSYCHOLOGY
Emotional Associations
| Brand Trait | Meaning |
|---|---|
| Rebellion | Deliberately jarring; refuses to be safe, predictable, or corporate. |
| Energy | High saturation creates strong visual impact and psychological activation. |
| Creativity | An unexpected hue that signals unconventional thinking and originality. |
| Youthfulness | Bright, bold, and unapologetic colors feel fresh, modern, and current. |
| Authenticity | The lo-fi aesthetic embraces imperfection and feels more genuine and human. |
Why Brat Green Feels Different From Other Greens
Traditional green is associated with nature, health, and calm. Brat Green — sitting at the extreme yellow-green boundary — subverts those associations. It reads as synthetic, electric, and artificial, which is precisely why it works for the Brat aesthetic. It is the green of a chemistry experiment, not a forest.
Why Brands Use Similar Colors
Energy drink brands (Monster, Celsius), gaming brands, and streetwear labels have long used acid yellow-green to signal intensity, edge, and youth market targeting. Brat Green arrives with a full aesthetic system — lo-fi design, intentional imperfection, and specific musical and social associations — making it more than just a color. It is a cultural statement.
BEST COLOR COMBINATIONS WITH BRAT GREEN
| Combination | Pair Hex | Mood | Best For |
|---|---|---|---|
| Brat Green + Black | #111111 | Bold, iconic | Core Brat branding, merchandise |
| Brat Green + White | #FFFFFF | Fresh, clean | Product design, editorial |
| Brat Green + Pink | #FF6FA8 | Playful, Y2K | Fashion, music graphics |
| Brat Green + Purple | #8B5CF6 | Psychedelic | Festival, rave aesthetics |
| Brat Green + Gray | #888880 | Sophisticated | Streetwear, minimal branding |
Conclusion
Brat Green (#8ACE00) is a bold, high-energy yellow-green color that has become instantly recognizable for its rebellious and unconventional aesthetic. Its unique balance of vibrancy and visual impact makes it a popular choice for branding, digital design, fashion, marketing materials, and creative projects that aim to stand out from the crowd. Whether you're using it in web design, print media, social graphics, or product branding, Brat Green delivers a distinctive look that communicates creativity, confidence, and modern culture. By understanding its color values, accessibility considerations, design pairings, and implementation methods, you can use Brat Green effectively across both personal and commercial projects while maintaining strong visual consistency.