#9BAB90 + #BFC0A1 + #E0D5B5 + #EFEAD4 + #FFD4B8 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#9BAB90

Celadon · DarkSeaGreen · Apple Green

HEX

#9BAB90

RGB

rgb(155, 171, 144)

HSL

hsl(96, 14%, 62%)

HSB

hsb(96, 16%, 67%)

CMYK

cmyk(9%, 0%, 16%, 33%)

Oklch

oklch(72.1% 0.042 132.5)

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

#BFC0A1

Fresh Green · Tan · Sunflower

HEX

#BFC0A1

RGB

rgb(191, 192, 161)

HSL

hsl(62, 20%, 69%)

HSB

hsb(62, 16%, 75%)

CMYK

cmyk(1%, 0%, 16%, 25%)

Oklch

oklch(79.9% 0.042 108.8)

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

#E0D5B5

Goose Yellow · Wheat · Lemon Cream

HEX

#E0D5B5

RGB

rgb(224, 213, 181)

HSL

hsl(45, 41%, 79%)

HSB

hsb(45, 19%, 88%)

CMYK

cmyk(0%, 5%, 19%, 12%)

Oklch

oklch(87.4% 0.044 91.3)

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

#EFEAD4

Goose Yellow · Beige · Lemon Cream

HEX

#EFEAD4

RGB

rgb(239, 234, 212)

HSL

hsl(49, 46%, 88%)

HSB

hsb(49, 11%, 94%)

CMYK

cmyk(0%, 2%, 11%, 6%)

Oklch

oklch(93.5% 0.030 96.4)

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

#FFD4B8

Apricot · Wheat · Peach Orange

HEX

#FFD4B8

RGB

rgb(255, 212, 184)

HSL

hsl(24, 100%, 86%)

HSB

hsb(24, 28%, 100%)

CMYK

cmyk(0%, 17%, 28%, 0%)

Oklch

oklch(90.0% 0.061 54.8)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9BAB90

A191AC

Analogous

A9AC91

9BAB90

91AC93

Triadic

9BAB90

919BAC

AC919B

Split-Comp.

9BAB90

9391AC

AC91A9

Tetradic

9BAB90

91A9AC

A191AC

AC9391

Contrast Matrix WCAG 2.1 Contrast

9BAB90	BFC0A1	E0D5B5	EFEAD4	FFD4B8
—	1.3 Fail	1.7 Fail	2.0 Fail	1.8 Fail
1.3 Fail	—	1.3 Fail	1.5 Fail	1.4 Fail
1.7 Fail	1.3 Fail	—	1.2 Fail	1.1 Fail
2.0 Fail	1.5 Fail	1.2 Fail	—	1.1 Fail
1.8 Fail	1.4 Fail	1.1 Fail	1.1 Fail	—

White BG

2.4Fail

1.9Fail

1.5Fail

1.2Fail

1.4Fail

Black BG

8.6AAA

11.3AAA

14.4AAA

17.4AAA

15.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A2A297

BFBFA9

DBDBBD

EDEDD9

ECECBF

Deuteranopia

A1A098

BFBFAA

DCDDBF

EDEEDB

EFF2C0

Tritanopia

9C9C9D

BFAEB0

DFC3C4

EFDEDE

FDC4C5

Achromatopsia

A3A3A3

BCBCBC

D5D5D5

E9E9E9

DEDEDE

Shades & Tints Shades & Tints

#9BAB90

Dark

Light

#BFC0A1

Dark

Light

#E0D5B5

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9bab90;
  --color-2: #bfc0a1;
  --color-3: #e0d5b5;
  --color-4: #efead4;
  --color-5: #ffd4b8;
}

SCSS

$color-1: #9bab90;
$color-2: #bfc0a1;
$color-3: #e0d5b5;
$color-4: #efead4;
$color-5: #ffd4b8;

TAILWIND

colors: {
  'brand-1': '#9bab90',
  'brand-2': '#bfc0a1',
  'brand-3': '#e0d5b5',
  'brand-4': '#efead4',
  'brand-5': '#ffd4b8',
}

RGB Array

[155, 171, 144], [191, 192, 161], [224, 213, 181], [239, 234, 212], [255, 212, 184]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9BAB90, #BFC0A1, #E0D5B5, #EFEAD4, #FFD4B8 is ideal for: health products, baby brands, fresh-style blogs. 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: #9bab90; --color-2: #bfc0a1; --color-3: #e0d5b5; --color-4: #efead4; --color-5: #ffd4b8. 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. 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