← Back to Editor

#B2AF8E · #9D8D76 · #826152 · #D2916B · #EDD3AE

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

#B2AF8E

Fresh Green · DarkGray · Sunflower

HEX
#B2AF8E
RGB
rgb(178, 175, 142)
HSL
hsl(55, 19%, 63%)
HSB
hsb(55, 20%, 70%)
CMYK
cmyk(0%, 2%, 20%, 30%)
Oklch
oklch(74.8% 0.046 103.1)

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

#9D8D76

Ginger · Gray · Warm Sun

HEX
#9D8D76
RGB
rgb(157, 141, 118)
HSL
hsl(35, 17%, 54%)
HSB
hsb(35, 25%, 62%)
CMYK
cmyk(0%, 10%, 25%, 38%)
Oklch
oklch(65.1% 0.038 76.9)

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

#826152

Tangerine · DimGray · Amber Brown

HEX
#826152
RGB
rgb(130, 97, 82)
HSL
hsl(19, 23%, 42%)
HSB
hsb(19, 37%, 51%)
CMYK
cmyk(0%, 25%, 37%, 49%)
Oklch
oklch(52.2% 0.049 45.6)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

#D2916B

Apricot · DarkSalmon · Warm Sun

HEX
#D2916B
RGB
rgb(210, 145, 107)
HSL
hsl(22, 53%, 62%)
HSB
hsb(22, 49%, 82%)
CMYK
cmyk(0%, 31%, 49%, 18%)
Oklch
oklch(71.2% 0.095 51.0)

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

#EDD3AE

Goose Yellow · Wheat · Peach Orange

HEX
#EDD3AE
RGB
rgb(237, 211, 174)
HSL
hsl(35, 64%, 81%)
HSB
hsb(35, 27%, 93%)
CMYK
cmyk(0%, 11%, 27%, 7%)
Oklch
oklch(87.9% 0.057 76.6)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B2AF8E
8F92B3

Analogous

B39E8F
B2AF8E
A4B38F

Triadic

B2AF8E
8FB3B0
B08FB3

Split-Comp.

B2AF8E
8FA4B3
9E8FB3

Tetradic

B2AF8E
8FB39E
8F92B3
B38FA4

Contrast Matrix WCAG 2.1 Contrast

B2AF8E
9D8D76
826152
D2916B
EDD3AE
—
1.4
Fail
2.5
Fail
1.2
Fail
1.5
Fail
1.4
Fail
—
1.7
Fail
1.2
Fail
2.2
Fail
2.5
Fail
1.7
Fail
—
2.1
Fail
3.8
AA Large
1.2
Fail
1.2
Fail
2.1
Fail
—
1.8
Fail
1.5
Fail
2.2
Fail
3.8
AA Large
1.8
Fail
—
White BG
2.2Fail
3.2AA Large
5.6AA
2.6Fail
1.4Fail
Black BG
9.4AAA
6.5AA
3.8AA Large
8.0AAA
14.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B1B196
96967C
747356
B6B574
E2E2B7

Deuteranopia

B1B198
97987D
767857
BABF76
E3E5B9

Tritanopia

B29C9E
9C8081
805859
CF7B7D
ECBEC0

Achromatopsia

ACACAC
8F8F8F
696969
A0A0A0
D7D7D7

Shades & Tints Shades & Tints

#B2AF8E

Dark
Light

#9D8D76

Dark
Light

#826152

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b2af8e;
  --color-2: #9d8d76;
  --color-3: #826152;
  --color-4: #d2916b;
  --color-5: #edd3ae;
}

SCSS

$color-1: #b2af8e;
$color-2: #9d8d76;
$color-3: #826152;
$color-4: #d2916b;
$color-5: #edd3ae;

TAILWIND

colors: {
  'brand-1': '#b2af8e',
  'brand-2': '#9d8d76',
  'brand-3': '#826152',
  'brand-4': '#d2916b',
  'brand-5': '#edd3ae',
}

RGB Array

[178, 175, 142], [157, 141, 118], [130, 97, 82], [210, 145, 107], [237, 211, 174]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B2AF8E, #9D8D76, #826152, #D2916B, #EDD3AE 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: #b2af8e; --color-2: #9d8d76; --color-3: #826152; --color-4: #d2916b; --color-5: #edd3ae. 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