← Back to Editor

#708978 · #AA9178 · #DB9565 · #E2B15F · #E8C86F

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#708978

Celadon · Gray · Olive Green

HEX
#708978
RGB
rgb(112, 137, 120)
HSL
hsl(139, 10%, 49%)
HSB
hsb(139, 18%, 54%)
CMYK
cmyk(18%, 0%, 12%, 46%)
Oklch
oklch(60.5% 0.038 155.4)

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

#AA9178

Ginger · Gray · Warm Sun

HEX
#AA9178
RGB
rgb(170, 145, 120)
HSL
hsl(30, 23%, 57%)
HSB
hsb(30, 29%, 67%)
CMYK
cmyk(0%, 15%, 29%, 33%)
Oklch
oklch(67.3% 0.046 66.9)

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

#DB9565

Apricot · DarkSalmon · Warm Sun

HEX
#DB9565
RGB
rgb(219, 149, 101)
HSL
hsl(24, 62%, 63%)
HSB
hsb(24, 54%, 86%)
CMYK
cmyk(0%, 32%, 54%, 14%)
Oklch
oklch(72.9% 0.106 54.7)

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

#E2B15F

Ginger · SandyBrown · Warm Sun

HEX
#E2B15F
RGB
rgb(226, 177, 95)
HSL
hsl(38, 69%, 63%)
HSB
hsb(38, 58%, 89%)
CMYK
cmyk(0%, 22%, 58%, 11%)
Oklch
oklch(78.9% 0.115 78.7)

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

#E8C86F

Ginger · BurlyWood · Sunflower

HEX
#E8C86F
RGB
rgb(232, 200, 111)
HSL
hsl(44, 72%, 67%)
HSB
hsb(44, 52%, 91%)
CMYK
cmyk(0%, 14%, 52%, 9%)
Oklch
oklch(84.2% 0.115 90.1)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

708978
897082

Analogous

758970
708978
708985

Triadic

708978
787089
897870

Split-Comp.

708978
857089
897075

Tetradic

708978
707589
897082
898570

Contrast Matrix WCAG 2.1 Contrast

708978
AA9178
DB9565
E2B15F
E8C86F
—
1.3
Fail
1.5
Fail
1.9
Fail
2.3
Fail
1.3
Fail
—
1.2
Fail
1.5
Fail
1.8
Fail
1.5
Fail
1.2
Fail
—
1.3
Fail
1.5
Fail
1.9
Fail
1.5
Fail
1.3
Fail
—
1.2
Fail
2.3
Fail
1.8
Fail
1.5
Fail
1.2
Fail
—
White BG
3.8AA Large
3.0Fail
2.5Fail
2.0Fail
1.6Fail
Black BG
5.5AA
7.0AAA
8.5AAA
10.7AAA
12.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7B7B7C
9F9F7E
BDBC71
CDCC73
DADA85

Deuteranopia

79787D
A1A380
C1C673
D0D378
DCDE8A

Tritanopia

717F80
A98384
D77A7C
E08386
E69699

Achromatopsia

808080
969696
A4A4A4
B6B6B6
C7C7C7

Shades & Tints Shades & Tints

#708978

Dark
Light

#AA9178

Dark
Light

#DB9565

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #708978;
  --color-2: #aa9178;
  --color-3: #db9565;
  --color-4: #e2b15f;
  --color-5: #e8c86f;
}

SCSS

$color-1: #708978;
$color-2: #aa9178;
$color-3: #db9565;
$color-4: #e2b15f;
$color-5: #e8c86f;

TAILWIND

colors: {
  'brand-1': '#708978',
  'brand-2': '#aa9178',
  'brand-3': '#db9565',
  'brand-4': '#e2b15f',
  'brand-5': '#e8c86f',
}

RGB Array

[112, 137, 120], [170, 145, 120], [219, 149, 101], [226, 177, 95], [232, 200, 111]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #708978, #AA9178, #DB9565, #E2B15F, #E8C86F is ideal for: corporate websites, product showcases, portfolios. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #708978; --color-2: #aa9178; --color-3: #db9565; --color-4: #e2b15f; --color-5: #e8c86f. 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. 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 tech, SaaS, healthcare, eco industries. 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