← Back to Editor

#679172 · #89B07F · #E0D889 · #C7BB4C · #B58D3E

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

#679172

Celadon · Gray · Olive Green

HEX
#679172
RGB
rgb(103, 145, 114)
HSL
hsl(136, 17%, 49%)
HSB
hsb(136, 29%, 57%)
CMYK
cmyk(29%, 0%, 21%, 43%)
Oklch
oklch(61.7% 0.066 152.3)

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

#89B07F

Celadon · DarkSeaGreen · Olive Green

HEX
#89B07F
RGB
rgb(137, 176, 127)
HSL
hsl(108, 24%, 59%)
HSB
hsb(108, 28%, 69%)
CMYK
cmyk(22%, 0%, 28%, 31%)
Oklch
oklch(71.6% 0.081 139.3)

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

#E0D889

Fresh Green · Khaki · Sunflower

HEX
#E0D889
RGB
rgb(224, 216, 137)
HSL
hsl(54, 58%, 71%)
HSB
hsb(54, 39%, 88%)
CMYK
cmyk(0%, 4%, 39%, 12%)
Oklch
oklch(87.1% 0.100 103.3)

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

#C7BB4C

Autumn Sage · GoldenRod · Sunflower

HEX
#C7BB4C
RGB
rgb(199, 187, 76)
HSL
hsl(54, 52%, 54%)
HSB
hsb(54, 62%, 78%)
CMYK
cmyk(0%, 6%, 62%, 22%)
Oklch
oklch(78.1% 0.132 103.2)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#B58D3E

Ochre · DarkGoldenRod · Honey Gold

HEX
#B58D3E
RGB
rgb(181, 141, 62)
HSL
hsl(40, 49%, 48%)
HSB
hsb(40, 66%, 71%)
CMYK
cmyk(0%, 22%, 66%, 29%)
Oklch
oklch(66.6% 0.108 81.9)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

679172
926887

Analogous

729268
679172
689288

Triadic

679172
736892
927368

Split-Comp.

679172
886892
926872

Tetradic

679172
687292
926887
928868

Contrast Matrix WCAG 2.1 Contrast

679172
89B07F
E0D889
C7BB4C
B58D3E
—
1.5
Fail
2.4
Fail
1.8
Fail
1.2
Fail
1.5
Fail
—
1.7
Fail
1.2
Fail
1.3
Fail
2.4
Fail
1.7
Fail
—
1.3
Fail
2.1
Fail
1.8
Fail
1.2
Fail
1.3
Fail
—
1.6
Fail
1.2
Fail
1.3
Fail
2.1
Fail
1.6
Fail
—
White BG
3.6AA Large
2.4Fail
1.5Fail
2.0Fail
3.1AA Large
Black BG
5.9AA
8.6AAA
14.4AAA
10.6AAA
6.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

797A7A
9A9A8B
DDDC9C
C2C267
A4A351

Deuteranopia

77747B
98958E
DDDEA1
C3C36D
A6A956

Tritanopia

697F81
8B9496
E0ABAF
C67C81
B36064

Achromatopsia

818181
9F9F9F
D1D1D1
B2B2B2
909090

Shades & Tints Shades & Tints

#679172

Dark
Light

#89B07F

Dark
Light

#E0D889

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #679172;
  --color-2: #89b07f;
  --color-3: #e0d889;
  --color-4: #c7bb4c;
  --color-5: #b58d3e;
}

SCSS

$color-1: #679172;
$color-2: #89b07f;
$color-3: #e0d889;
$color-4: #c7bb4c;
$color-5: #b58d3e;

TAILWIND

colors: {
  'brand-1': '#679172',
  'brand-2': '#89b07f',
  'brand-3': '#e0d889',
  'brand-4': '#c7bb4c',
  'brand-5': '#b58d3e',
}

RGB Array

[103, 145, 114], [137, 176, 127], [224, 216, 137], [199, 187, 76], [181, 141, 62]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #679172, #89B07F, #E0D889, #C7BB4C, #B58D3E 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: #679172; --color-2: #89b07f; --color-3: #e0d889; --color-4: #c7bb4c; --color-5: #b58d3e. 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