← Back to Editor

#8C8174 · #BFBF8F · #DEE388 · #F9F8D6 · #B8DBD4

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#8C8174

Ochre · Gray · Warm Gray

HEX
#8C8174
RGB
rgb(140, 129, 116)
HSL
hsl(32, 9%, 50%)
HSB
hsb(32, 17%, 55%)
CMYK
cmyk(0%, 8%, 17%, 45%)
Oklch
oklch(60.9% 0.023 72.0)

Traditional「Ochre」· Paint「Warm Gray」· Creative Urban Concrete

#BFBF8F

Fresh Green · Tan · Sunflower

HEX
#BFBF8F
RGB
rgb(191, 191, 143)
HSL
hsl(60, 27%, 65%)
HSB
hsb(60, 25%, 75%)
CMYK
cmyk(0%, 0%, 25%, 25%)
Oklch
oklch(79.3% 0.064 107.8)

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

#DEE388

Fresh Green · Khaki · Sunflower

HEX
#DEE388
RGB
rgb(222, 227, 136)
HSL
hsl(63, 62%, 71%)
HSB
hsb(63, 40%, 89%)
CMYK
cmyk(2%, 0%, 40%, 11%)
Oklch
oklch(89.2% 0.114 111.2)

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

#F9F8D6

Fresh Green · Beige · Lemon Cream

HEX
#F9F8D6
RGB
rgb(249, 248, 214)
HSL
hsl(58, 74%, 91%)
HSB
hsb(58, 14%, 98%)
CMYK
cmyk(0%, 0%, 14%, 2%)
Oklch
oklch(97.1% 0.044 105.8)

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

#B8DBD4

Jade · LightBlue · Glacier Blue

HEX
#B8DBD4
RGB
rgb(184, 219, 212)
HSL
hsl(168, 33%, 79%)
HSB
hsb(168, 16%, 86%)
CMYK
cmyk(16%, 0%, 3%, 14%)
Oklch
oklch(86.4% 0.038 181.9)

Traditional「Jade」· Paint「Glacier Blue」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8C8174
747F8B

Analogous

8B7574
8C8174
8A8B74

Triadic

8C8174
748B80
80748B

Split-Comp.

8C8174
748A8B
75748B

Tetradic

8C8174
748B75
747F8B
8B748A

Contrast Matrix WCAG 2.1 Contrast

8C8174
BFBF8F
DEE388
F9F8D6
B8DBD4
—
2.0
Fail
2.8
Fail
3.5
AA Large
2.6
Fail
2.0
Fail
—
1.4
Fail
1.8
Fail
1.3
Fail
2.8
Fail
1.4
Fail
—
1.3
Fail
1.1
Fail
3.5
AA Large
1.8
Fail
1.3
Fail
—
1.4
Fail
2.6
Fail
1.3
Fail
1.1
Fail
1.4
Fail
—
White BG
3.8AA Large
1.9Fail
1.4Fail
1.1Fail
1.5Fail
Black BG
5.5AA
11.1AAA
15.4AAA
19.4AAA
14.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

878777
BFBF9B
E0E09E
F9F9DE
C7C7D6

Deuteranopia

888978
BFBF9D
E0DFA3
F9F9E0
C5C3D6

Tritanopia

8B7A7A
BFA4A6
DEAFB3
F9E5E6
BAD7D7

Achromatopsia

838383
BABABA
D7D7D7
F4F4F4
D0D0D0

Shades & Tints Shades & Tints

#8C8174

Dark
Light

#BFBF8F

Dark
Light

#DEE388

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8c8174;
  --color-2: #bfbf8f;
  --color-3: #dee388;
  --color-4: #f9f8d6;
  --color-5: #b8dbd4;
}

SCSS

$color-1: #8c8174;
$color-2: #bfbf8f;
$color-3: #dee388;
$color-4: #f9f8d6;
$color-5: #b8dbd4;

TAILWIND

colors: {
  'brand-1': '#8c8174',
  'brand-2': '#bfbf8f',
  'brand-3': '#dee388',
  'brand-4': '#f9f8d6',
  'brand-5': '#b8dbd4',
}

RGB Array

[140, 129, 116], [191, 191, 143], [222, 227, 136], [249, 248, 214], [184, 219, 212]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #8C8174, #BFBF8F, #DEE388, #F9F8D6, #B8DBD4 is ideal for: health products, baby brands, fresh-style blogs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #8c8174; --color-2: #bfbf8f; --color-3: #dee388; --color-4: #f9f8d6; --color-5: #b8dbd4. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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 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