← Back to Editor

#ACCC0F · #CC0F0F · #E69797 · #E6E297 · #474628

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarm

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#ACCC0F

Grass Green · GreenYellow · Olive Green

HEX
#ACCC0F
RGB
rgb(172, 204, 15)
HSL
hsl(70, 86%, 43%)
HSB
hsb(70, 93%, 80%)
CMYK
cmyk(16%, 0%, 93%, 20%)
Oklch
oklch(79.3% 0.187 120.5)

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

#CC0F0F

Vermilion · FireBrick · Passion Red

HEX
#CC0F0F
RGB
rgb(204, 15, 15)
HSL
hsl(0, 86%, 43%)
HSB
hsb(0, 93%, 80%)
CMYK
cmyk(0%, 93%, 93%, 20%)
Oklch
oklch(53.5% 0.213 28.6)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

#E69797

Peach Pink · DarkSalmon · Coral Red

HEX
#E69797
RGB
rgb(230, 151, 151)
HSL
hsl(0, 61%, 75%)
HSB
hsb(0, 34%, 90%)
CMYK
cmyk(0%, 34%, 34%, 10%)
Oklch
oklch(75.5% 0.096 19.5)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#E6E297

Fresh Green · Khaki · Sunflower

HEX
#E6E297
RGB
rgb(230, 226, 151)
HSL
hsl(57, 61%, 75%)
HSB
hsb(57, 34%, 90%)
CMYK
cmyk(0%, 2%, 34%, 10%)
Oklch
oklch(89.9% 0.095 105.6)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#474628

Autumn Sage · DarkOliveGreen · Amber Gold

HEX
#474628
RGB
rgb(71, 70, 40)
HSL
hsl(58, 28%, 22%)
HSB
hsb(58, 44%, 28%)
CMYK
cmyk(0%, 1%, 44%, 72%)
Oklch
oklch(38.7% 0.046 106.7)

Traditional「Autumn Sage」· Paint「Amber Gold」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

ACCC0F
2F0FCC

Analogous

CC8D0F
ACCC0F
4ECC0F

Triadic

ACCC0F
0FADCC
CC0FAD

Split-Comp.

ACCC0F
0F4ECC
8D0FCC

Tetradic

ACCC0F
0FCC8D
2F0FCC
CC0F4E

Contrast Matrix WCAG 2.1 Contrast

ACCC0F
CC0F0F
E69797
E6E297
474628
—
3.1
AA Large
1.2
Fail
1.4
Fail
5.2
AA
3.1
AA Large
—
2.5
Fail
4.3
AA Large
1.7
Fail
1.2
Fail
2.5
Fail
—
1.7
Fail
4.2
AA Large
1.4
Fail
4.3
AA Large
1.7
Fail
—
7.2
AAA
5.2
AA
1.7
Fail
4.2
AA Large
7.2
AAA
—
White BG
1.8Fail
5.8AA
2.3Fail
1.3Fail
9.7AAA
Black BG
11.4AAA
3.6AA Large
9.2AAA
15.7AAA
2.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

BABA3D
7A780F
C4C397
E4E4A9
47472F

Deuteranopia

B8B648
85930F
C8CE97
E5E5AE
474731

Tritanopia

AE6169
C30F0F
E29797
E6B7BB
473536

Achromatopsia

ADADAD
484848
AFAFAF
DBDBDB
434343

Shades & Tints Shades & Tints

#ACCC0F

Dark
Light

#CC0F0F

Dark
Light

#E69797

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #accc0f;
  --color-2: #cc0f0f;
  --color-3: #e69797;
  --color-4: #e6e297;
  --color-5: #474628;
}

SCSS

$color-1: #accc0f;
$color-2: #cc0f0f;
$color-3: #e69797;
$color-4: #e6e297;
$color-5: #474628;

TAILWIND

colors: {
  'brand-1': '#accc0f',
  'brand-2': '#cc0f0f',
  'brand-3': '#e69797',
  'brand-4': '#e6e297',
  'brand-5': '#474628',
}

RGB Array

[172, 204, 15], [204, 15, 15], [230, 151, 151], [230, 226, 151], [71, 70, 40]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #ACCC0F, #CC0F0F, #E69797, #E6E297, #474628 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: #accc0f; --color-2: #cc0f0f; --color-3: #e69797; --color-4: #e6e297; --color-5: #474628. 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