← Back to Editor

#477D5D · #82C38B · #E7F89B · #F9A848 · #E98434

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

#477D5D

Celadon · SeaGreen · Forest Green

HEX
#477D5D
RGB
rgb(71, 125, 93)
HSL
hsl(144, 28%, 38%)
HSB
hsb(144, 43%, 49%)
CMYK
cmyk(43%, 0%, 26%, 51%)
Oklch
oklch(54.3% 0.077 156.6)

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

#82C38B

Celadon · DarkSeaGreen · Apple Green

HEX
#82C38B
RGB
rgb(130, 195, 139)
HSL
hsl(128, 35%, 64%)
HSB
hsb(128, 33%, 76%)
CMYK
cmyk(33%, 0%, 29%, 24%)
Oklch
oklch(75.9% 0.104 147.9)

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

#E7F89B

Willow Green · Khaki · Apple Green

HEX
#E7F89B
RGB
rgb(231, 248, 155)
HSL
hsl(71, 87%, 79%)
HSB
hsb(71, 38%, 97%)
CMYK
cmyk(7%, 0%, 38%, 3%)
Oklch
oklch(94.6% 0.118 117.2)

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

#F9A848

Ginger · SandyBrown · Warm Sun

HEX
#F9A848
RGB
rgb(249, 168, 72)
HSL
hsl(33, 94%, 63%)
HSB
hsb(33, 71%, 98%)
CMYK
cmyk(0%, 33%, 71%, 2%)
Oklch
oklch(79.4% 0.145 67.2)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

#E98434

Tangerine · Coral · Warm Sun

HEX
#E98434
RGB
rgb(233, 132, 52)
HSL
hsl(27, 80%, 56%)
HSB
hsb(27, 78%, 91%)
CMYK
cmyk(0%, 43%, 78%, 9%)
Oklch
oklch(71.1% 0.153 54.8)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

477D5D
7C4666

Analogous

4B7C46
477D5D
467C77

Triadic

477D5D
5B467C
7C5B46

Split-Comp.

477D5D
77467C
7C464B

Tetradic

477D5D
464B7C
7C4666
7C7746

Contrast Matrix WCAG 2.1 Contrast

477D5D
82C38B
E7F89B
F9A848
E98434
—
2.3
Fail
4.2
AA Large
2.5
Fail
1.8
Fail
2.3
Fail
—
1.8
Fail
1.1
Fail
1.3
Fail
4.2
AA Large
1.8
Fail
—
1.7
Fail
2.3
Fail
2.5
Fail
1.1
Fail
1.7
Fail
—
1.4
Fail
1.8
Fail
1.3
Fail
2.3
Fail
1.4
Fail
—
White BG
4.8AA
2.1Fail
1.1Fail
2.0Fail
2.7Fail
Black BG
4.4AA Large
10.1AAA
18.3AAA
10.7AAA
7.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

5E5F65
9E9F99
EEEFB2
D6D55F
BDBC47

Deuteranopia

5B5767
9A969C
EDECB7
DBE165
C3CB4C

Tritanopia

4A6B6C
85A3A6
E8C3C7
F57276
E4575A

Achromatopsia

696969
A9A9A9
E8E8E8
B5B5B5
999999

Shades & Tints Shades & Tints

#477D5D

Dark
Light

#82C38B

Dark
Light

#E7F89B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #477d5d;
  --color-2: #82c38b;
  --color-3: #e7f89b;
  --color-4: #f9a848;
  --color-5: #e98434;
}

SCSS

$color-1: #477d5d;
$color-2: #82c38b;
$color-3: #e7f89b;
$color-4: #f9a848;
$color-5: #e98434;

TAILWIND

colors: {
  'brand-1': '#477d5d',
  'brand-2': '#82c38b',
  'brand-3': '#e7f89b',
  'brand-4': '#f9a848',
  'brand-5': '#e98434',
}

RGB Array

[71, 125, 93], [130, 195, 139], [231, 248, 155], [249, 168, 72], [233, 132, 52]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #477D5D, #82C38B, #E7F89B, #F9A848, #E98434 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: #477d5d; --color-2: #82c38b; --color-3: #e7f89b; --color-4: #f9a848; --color-5: #e98434. 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