← Back to Editor

#B2C6A1 · #E7E0B2 · #A38972 · #9F6951 · #DF4E51

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

#B2C6A1

Celadon · DarkGray · Apple Green

HEX
#B2C6A1
RGB
rgb(178, 198, 161)
HSL
hsl(92, 25%, 70%)
HSB
hsb(92, 19%, 78%)
CMYK
cmyk(10%, 0%, 19%, 22%)
Oklch
oklch(80.1% 0.055 130.8)

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

#E7E0B2

Fresh Green · Wheat · Lemon Cream

HEX
#E7E0B2
RGB
rgb(231, 224, 178)
HSL
hsl(52, 52%, 80%)
HSB
hsb(52, 23%, 91%)
CMYK
cmyk(0%, 3%, 23%, 9%)
Oklch
oklch(90.1% 0.061 100.3)

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

#A38972

Tangerine · Gray · Warm Sun

HEX
#A38972
RGB
rgb(163, 137, 114)
HSL
hsl(28, 21%, 54%)
HSB
hsb(28, 30%, 64%)
CMYK
cmyk(0%, 16%, 30%, 36%)
Oklch
oklch(64.8% 0.046 63.4)

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

#9F6951

Tangerine · Sienna · Amber Brown

HEX
#9F6951
RGB
rgb(159, 105, 81)
HSL
hsl(18, 33%, 47%)
HSB
hsb(18, 49%, 62%)
CMYK
cmyk(0%, 34%, 49%, 38%)
Oklch
oklch(57.2% 0.078 44.7)

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

#DF4E51

Vermilion · Tomato · Passion Red

HEX
#DF4E51
RGB
rgb(223, 78, 81)
HSL
hsl(359, 69%, 59%)
HSB
hsb(359, 65%, 87%)
CMYK
cmyk(0%, 65%, 64%, 13%)
Oklch
oklch(62.3% 0.181 22.9)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B2C6A1
B49FC6

Analogous

C4C69F
B2C6A1
9FC6A1

Triadic

B2C6A1
9FB1C6
C69FB1

Split-Comp.

B2C6A1
A19FC6
C69FC4

Tetradic

B2C6A1
9FC4C6
B49FC6
C6A19F

Contrast Matrix WCAG 2.1 Contrast

B2C6A1
E7E0B2
A38972
9F6951
DF4E51
—
1.4
Fail
1.8
Fail
2.5
Fail
2.1
Fail
1.4
Fail
—
2.5
Fail
3.4
AA Large
2.9
Fail
1.8
Fail
2.5
Fail
—
1.4
Fail
1.2
Fail
2.5
Fail
3.4
AA Large
1.4
Fail
—
1.2
Fail
2.1
Fail
2.9
Fail
1.2
Fail
1.2
Fail
—
White BG
1.8Fail
1.3Fail
3.3AA Large
4.6AA
3.9AA Large
Black BG
11.5AAA
15.7AAA
6.4AA
4.6AA
5.3AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BBBBAA
E4E4BD
989878
888757
A09F50

Deuteranopia

BAB8AC
E4E5C0
999B79
8B8F58
A9B450

Tritanopia

B3B1B3
E7C6C8
A27C7D
9C5B5C
D85050

Achromatopsia

BCBCBC
DDDDDD
8E8E8E
767676
7A7A7A

Shades & Tints Shades & Tints

#B2C6A1

Dark
Light

#E7E0B2

Dark
Light

#A38972

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b2c6a1;
  --color-2: #e7e0b2;
  --color-3: #a38972;
  --color-4: #9f6951;
  --color-5: #df4e51;
}

SCSS

$color-1: #b2c6a1;
$color-2: #e7e0b2;
$color-3: #a38972;
$color-4: #9f6951;
$color-5: #df4e51;

TAILWIND

colors: {
  'brand-1': '#b2c6a1',
  'brand-2': '#e7e0b2',
  'brand-3': '#a38972',
  'brand-4': '#9f6951',
  'brand-5': '#df4e51',
}

RGB Array

[178, 198, 161], [231, 224, 178], [163, 137, 114], [159, 105, 81], [223, 78, 81]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B2C6A1, #E7E0B2, #A38972, #9F6951, #DF4E51 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: #b2c6a1; --color-2: #e7e0b2; --color-3: #a38972; --color-4: #9f6951; --color-5: #df4e51. 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