← Back to Editor

#92DEB4 · #F5E89F · #D4B64A · #B5A776 · #8C8B74

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

#92DEB4

Emerald · LightGreen · Apple Green

HEX
#92DEB4
RGB
rgb(146, 222, 180)
HSL
hsl(147, 54%, 72%)
HSB
hsb(147, 34%, 87%)
CMYK
cmyk(34%, 0%, 19%, 13%)
Oklch
oklch(83.9% 0.096 159.2)

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

#F5E89F

Fresh Green · Khaki · Lemon Cream

HEX
#F5E89F
RGB
rgb(245, 232, 159)
HSL
hsl(51, 81%, 79%)
HSB
hsb(51, 35%, 96%)
CMYK
cmyk(0%, 5%, 35%, 4%)
Oklch
oklch(92.5% 0.093 99.3)

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

#D4B64A

Ginger · SandyBrown · Sunflower

HEX
#D4B64A
RGB
rgb(212, 182, 74)
HSL
hsl(47, 62%, 56%)
HSB
hsb(47, 65%, 83%)
CMYK
cmyk(0%, 14%, 65%, 17%)
Oklch
oklch(78.2% 0.130 93.6)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#B5A776

Ginger · Tan · Sunflower

HEX
#B5A776
RGB
rgb(181, 167, 118)
HSL
hsl(47, 30%, 59%)
HSB
hsb(47, 35%, 71%)
CMYK
cmyk(0%, 8%, 35%, 29%)
Oklch
oklch(72.8% 0.068 94.1)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#8C8B74

Autumn Sage · Gray · Warm Gray

HEX
#8C8B74
RGB
rgb(140, 139, 116)
HSL
hsl(57, 9%, 50%)
HSB
hsb(57, 17%, 55%)
CMYK
cmyk(0%, 1%, 17%, 45%)
Oklch
oklch(63.1% 0.033 105.3)

Traditional「Autumn Sage」· Paint「Warm Gray」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

92DEB4
DE91BB

Analogous

95DE91
92DEB4
91DEDA

Triadic

92DEB4
B491DE
DEB491

Split-Comp.

92DEB4
DA91DE
DE9195

Tetradic

92DEB4
9195DE
DE91BB
DEDA91

Contrast Matrix WCAG 2.1 Contrast

92DEB4
F5E89F
D4B64A
B5A776
8C8B74
—
1.3
Fail
1.3
Fail
1.5
Fail
2.2
Fail
1.3
Fail
—
1.6
Fail
1.9
Fail
2.8
Fail
1.3
Fail
1.6
Fail
—
1.2
Fail
1.7
Fail
1.5
Fail
1.9
Fail
1.2
Fail
—
1.4
Fail
2.2
Fail
2.8
Fail
1.7
Fail
1.4
Fail
—
White BG
1.6Fail
1.2Fail
2.0Fail
2.4Fail
3.5AA Large
Black BG
13.3AAA
16.9AAA
10.6AAA
8.8AAA
6.1AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B3B4BE
EFEFB1
C7C764
AFAF82
8C8C7A

Deuteranopia

AFA9C1
F0F1B5
C9CB6A
B0B185
8C8C7B

Tritanopia

96C6C8
F4BFC2
D2797D
B48B8D
8C7E7F

Achromatopsia

C2C2C2
E4E4E4
B3B3B3
A6A6A6
898989

Shades & Tints Shades & Tints

#92DEB4

Dark
Light

#F5E89F

Dark
Light

#D4B64A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #92deb4;
  --color-2: #f5e89f;
  --color-3: #d4b64a;
  --color-4: #b5a776;
  --color-5: #8c8b74;
}

SCSS

$color-1: #92deb4;
$color-2: #f5e89f;
$color-3: #d4b64a;
$color-4: #b5a776;
$color-5: #8c8b74;

TAILWIND

colors: {
  'brand-1': '#92deb4',
  'brand-2': '#f5e89f',
  'brand-3': '#d4b64a',
  'brand-4': '#b5a776',
  'brand-5': '#8c8b74',
}

RGB Array

[146, 222, 180], [245, 232, 159], [212, 182, 74], [181, 167, 118], [140, 139, 116]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #92DEB4, #F5E89F, #D4B64A, #B5A776, #8C8B74 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: #92deb4; --color-2: #f5e89f; --color-3: #d4b64a; --color-4: #b5a776; --color-5: #8c8b74. 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