← Back to Editor

#202708 · #48611D · #A8C73D · #B4E572 · #CCFE83

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamic

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#202708

Grass Green · Black · Dark Green

HEX
#202708
RGB
rgb(32, 39, 8)
HSL
hsl(74, 66%, 9%)
HSB
hsb(74, 79%, 15%)
CMYK
cmyk(18%, 0%, 79%, 85%)
Oklch
oklch(25.8% 0.050 120.8)

Traditional「Grass Green」· Paint「Dark Green」· Creative Blush Sunrise

#48611D

Grass Green · DarkOliveGreen · Forest Green

HEX
#48611D
RGB
rgb(72, 97, 29)
HSL
hsl(82, 54%, 25%)
HSB
hsb(82, 70%, 38%)
CMYK
cmyk(26%, 0%, 70%, 62%)
Oklch
oklch(45.7% 0.099 127.3)

Traditional「Grass Green」· Paint「Forest Green」· Creative Blush Sunrise

#A8C73D

Grass Green · GreenYellow · Olive Green

HEX
#A8C73D
RGB
rgb(168, 199, 61)
HSL
hsl(73, 55%, 51%)
HSB
hsb(73, 69%, 78%)
CMYK
cmyk(16%, 0%, 69%, 22%)
Oklch
oklch(78.1% 0.164 121.3)

Traditional「Grass Green」· Paint「Olive Green」· Creative Blush Sunrise

#B4E572

Willow Green · LightGreen · Apple Green

HEX
#B4E572
RGB
rgb(180, 229, 114)
HSL
hsl(86, 69%, 67%)
HSB
hsb(86, 50%, 90%)
CMYK
cmyk(21%, 0%, 50%, 10%)
Oklch
oklch(86.3% 0.154 128.3)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

#CCFE83

Willow Green · Khaki · Apple Green

HEX
#CCFE83
RGB
rgb(204, 254, 131)
HSL
hsl(84, 98%, 75%)
HSB
hsb(84, 48%, 100%)
CMYK
cmyk(20%, 0%, 48%, 0%)
Oklch
oklch(93.6% 0.161 127.5)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

202708
0F0826

Analogous

261E08
202708
102608

Triadic

202708
081F26
26081F

Split-Comp.

202708
081026
1E0826

Tetradic

202708
08261E
0F0826
260810

Contrast Matrix WCAG 2.1 Contrast

202708
48611D
A8C73D
B4E572
CCFE83
—
2.2
Fail
8.0
AAA
10.6
AAA
13.3
AAA
2.2
Fail
—
3.6
AA Large
4.8
AA
6.0
AA
8.0
AAA
3.6
AA Large
—
1.3
Fail
1.7
Fail
10.6
AAA
4.8
AA
1.3
Fail
—
1.3
Fail
13.3
AAA
6.0
AA
1.7
Fail
1.3
Fail
—
White BG
15.5AAA
7.0AA
1.9Fail
1.5Fail
1.2Fail
Black BG
1.4Fail
3.0AA Large
10.9AAA
14.4AAA
18.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

232310
53532D
B5B65E
C9CA8E
E2E2A1

Deuteranopia

232211
515031
B4B166
C6C395
DFDBA8

Tritanopia

201517
493A3D
AA797F
B6A4A9
CEB8BD

Achromatopsia

212121
525252
AEAEAE
C9C9C9
E1E1E1

Shades & Tints Shades & Tints

#202708

Dark
Light

#48611D

Dark
Light

#A8C73D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #202708;
  --color-2: #48611d;
  --color-3: #a8c73d;
  --color-4: #b4e572;
  --color-5: #ccfe83;
}

SCSS

$color-1: #202708;
$color-2: #48611d;
$color-3: #a8c73d;
$color-4: #b4e572;
$color-5: #ccfe83;

TAILWIND

colors: {
  'brand-1': '#202708',
  'brand-2': '#48611d',
  'brand-3': '#a8c73d',
  'brand-4': '#b4e572',
  'brand-5': '#ccfe83',
}

RGB Array

[32, 39, 8], [72, 97, 29], [168, 199, 61], [180, 229, 114], [204, 254, 131]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #202708, #48611D, #A8C73D, #B4E572, #CCFE83 is ideal for: social media posters, mobile apps, e-commerce promos, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #202708; --color-2: #48611d; --color-3: #a8c73d; --color-4: #b4e572; --color-5: #ccfe83. LangColor editor supports one-click export to CSS, SCSS, Tailwind, JSON and more. Click the "Export" button to choose your format.

What UI/UX design tips apply to this palette?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. High-contrast palettes naturally meet WCAG accessibility standards. Use the "Contrast Matrix" tool in LangColor editor to check WCAG accessibility levels for every color pair.

Which industries or brands suit this palette?

This general-style 5-color scheme is especially suited for food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. Click "AI Analysis" in the editor for more detailed brand color suggestions.

🎨 Open this palette in Editor →

Generated by LangColor online color tool · Breaking the barrier between language and color