← Back to Editor

#B8AB81 · #E7C643 · #B8BD97 · #80AB99 · #357E87

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#B8AB81

Ginger · Tan · Sunflower

HEX
#B8AB81
RGB
rgb(184, 171, 129)
HSL
hsl(46, 28%, 61%)
HSB
hsb(46, 30%, 72%)
CMYK
cmyk(0%, 7%, 30%, 28%)
Oklch
oklch(74.2% 0.059 92.9)

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

#E7C643

Ginger · SandyBrown · Sunflower

HEX
#E7C643
RGB
rgb(231, 198, 67)
HSL
hsl(48, 77%, 58%)
HSB
hsb(48, 71%, 91%)
CMYK
cmyk(0%, 14%, 71%, 9%)
Oklch
oklch(83.2% 0.148 94.6)

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

#B8BD97

Fresh Green · Tan · Sunflower

HEX
#B8BD97
RGB
rgb(184, 189, 151)
HSL
hsl(68, 22%, 67%)
HSB
hsb(68, 20%, 74%)
CMYK
cmyk(3%, 0%, 20%, 26%)
Oklch
oklch(78.4% 0.052 113.7)

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

#80AB99

Mineral Blue · DarkSeaGreen · Olive Green

HEX
#80AB99
RGB
rgb(128, 171, 153)
HSL
hsl(155, 20%, 59%)
HSB
hsb(155, 25%, 67%)
CMYK
cmyk(25%, 0%, 11%, 33%)
Oklch
oklch(70.5% 0.053 167.2)

Traditional「Mineral Blue」· Paint「Olive Green」· Creative Blush Sunrise

#357E87

Slate Blue · SteelBlue · Mint Ice

HEX
#357E87
RGB
rgb(53, 126, 135)
HSL
hsl(187, 44%, 37%)
HSB
hsb(187, 61%, 53%)
CMYK
cmyk(61%, 7%, 0%, 47%)
Oklch
oklch(55.1% 0.073 206.3)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B8AB81
808DB7

Analogous

B78F80
B8AB81
A9B780

Triadic

B8AB81
80B7AA
AA80B7

Split-Comp.

B8AB81
80A9B7
8F80B7

Tetradic

B8AB81
80B78F
808DB7
B780A9

Contrast Matrix WCAG 2.1 Contrast

B8AB81
E7C643
B8BD97
80AB99
357E87
—
1.4
Fail
1.2
Fail
1.1
Fail
2.0
Fail
1.4
Fail
—
1.2
Fail
1.5
Fail
2.8
Fail
1.2
Fail
1.2
Fail
—
1.3
Fail
2.4
Fail
1.1
Fail
1.5
Fail
1.3
Fail
—
1.8
Fail
2.0
Fail
2.8
Fail
2.4
Fail
1.8
Fail
—
White BG
2.3Fail
1.7Fail
2.0Fail
2.6Fail
4.7AA
Black BG
9.2AAA
12.6AAA
10.8AAA
8.2AAA
4.5AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

B2B28B
D9D863
BABAA0
93939D
555585

Deuteranopia

B3B48E
DBDD6A
BAB9A2
908D9E
504B84

Tritanopia

B79395
E57C81
B8A7A9
82A1A2
398383

Achromatopsia

AAAAAA
C1C1C1
B7B7B7
9C9C9C
696969

Shades & Tints Shades & Tints

#B8AB81

Dark
Light

#E7C643

Dark
Light

#B8BD97

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b8ab81;
  --color-2: #e7c643;
  --color-3: #b8bd97;
  --color-4: #80ab99;
  --color-5: #357e87;
}

SCSS

$color-1: #b8ab81;
$color-2: #e7c643;
$color-3: #b8bd97;
$color-4: #80ab99;
$color-5: #357e87;

TAILWIND

colors: {
  'brand-1': '#b8ab81',
  'brand-2': '#e7c643',
  'brand-3': '#b8bd97',
  'brand-4': '#80ab99',
  'brand-5': '#357e87',
}

RGB Array

[184, 171, 129], [231, 198, 67], [184, 189, 151], [128, 171, 153], [53, 126, 135]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B8AB81, #E7C643, #B8BD97, #80AB99, #357E87 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: #b8ab81; --color-2: #e7c643; --color-3: #b8bd97; --color-4: #80ab99; --color-5: #357e87. 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