← Back to Editor

#B1C0A1 · #CED0A9 · #E7DFBB · #202731 · #4D8A8F

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 LibraryData Visualization

Color Details Color Details

#B1C0A1

Willow Green · DarkGray · Apple Green

HEX
#B1C0A1
RGB
rgb(177, 192, 161)
HSL
hsl(89, 20%, 69%)
HSB
hsb(89, 16%, 75%)
CMYK
cmyk(8%, 0%, 16%, 25%)
Oklch
oklch(78.8% 0.046 128.5)

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

#CED0A9

Fresh Green · Silver · Sunflower

HEX
#CED0A9
RGB
rgb(206, 208, 169)
HSL
hsl(63, 29%, 74%)
HSB
hsb(63, 19%, 82%)
CMYK
cmyk(1%, 0%, 19%, 18%)
Oklch
oklch(84.6% 0.052 109.9)

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

#E7DFBB

Goose Yellow · Wheat · Lemon Cream

HEX
#E7DFBB
RGB
rgb(231, 223, 187)
HSL
hsl(49, 48%, 82%)
HSB
hsb(49, 19%, 91%)
CMYK
cmyk(0%, 3%, 19%, 9%)
Oklch
oklch(90.1% 0.048 96.9)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#202731

Indigo · DarkSlateGray · Deep Sea Blue

HEX
#202731
RGB
rgb(32, 39, 49)
HSL
hsl(215, 21%, 16%)
HSB
hsb(215, 35%, 19%)
CMYK
cmyk(35%, 20%, 0%, 81%)
Oklch
oklch(27.0% 0.021 257.3)

Traditional「Indigo」· Paint「Deep Sea Blue」· Creative Blush Sunrise

#4D8A8F

Slate Blue · CadetBlue · Mint Ice

HEX
#4D8A8F
RGB
rgb(77, 138, 143)
HSL
hsl(185, 30%, 43%)
HSB
hsb(185, 46%, 56%)
CMYK
cmyk(46%, 3%, 0%, 44%)
Oklch
oklch(59.4% 0.064 202.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B1C0A1
AFA0C0

Analogous

C0BFA0
B1C0A1
A1C0A0

Triadic

B1C0A1
A0B0C0
C0A0B0

Split-Comp.

B1C0A1
A0A1C0
BFA0C0

Tetradic

B1C0A1
A0C0BF
AFA0C0
C0A0A1

Contrast Matrix WCAG 2.1 Contrast

B1C0A1
CED0A9
E7DFBB
202731
4D8A8F
—
1.2
Fail
1.4
Fail
7.8
AAA
2.0
Fail
1.2
Fail
—
1.2
Fail
9.5
AAA
2.5
Fail
1.4
Fail
1.2
Fail
—
11.2
AAA
2.9
Fail
7.8
AAA
9.5
AAA
11.2
AAA
—
3.8
AA Large
2.0
Fail
2.5
Fail
2.9
Fail
3.8
AA Large
—
White BG
1.9Fail
1.6Fail
1.3Fail
15.0AAA
3.9AA Large
Black BG
10.9AAA
13.2AAA
15.7AAA
1.4Fail
5.3AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B7B8A9
CFCFB2
E4E3C4
23232F
67688E

Deuteranopia

B7B6AA
CFCFB5
E4E5C6
23222E
645F8E

Tritanopia

B2AEB0
CEBABC
E7CBCC
202D2C
508D8D

Achromatopsia

B8B8B8
CBCBCB
DDDDDD
262626
787878

Shades & Tints Shades & Tints

#B1C0A1

Dark
Light

#CED0A9

Dark
Light

#E7DFBB

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b1c0a1;
  --color-2: #ced0a9;
  --color-3: #e7dfbb;
  --color-4: #202731;
  --color-5: #4d8a8f;
}

SCSS

$color-1: #b1c0a1;
$color-2: #ced0a9;
$color-3: #e7dfbb;
$color-4: #202731;
$color-5: #4d8a8f;

TAILWIND

colors: {
  'brand-1': '#b1c0a1',
  'brand-2': '#ced0a9',
  'brand-3': '#e7dfbb',
  'brand-4': '#202731',
  'brand-5': '#4d8a8f',
}

RGB Array

[177, 192, 161], [206, 208, 169], [231, 223, 187], [32, 39, 49], [77, 138, 143]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B1C0A1, #CED0A9, #E7DFBB, #202731, #4D8A8F is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #b1c0a1; --color-2: #ced0a9; --color-3: #e7dfbb; --color-4: #202731; --color-5: #4d8a8f. 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. 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. Restrained colors convey professionalism and trust. 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