#9C897B + #B0A48E + #CDBE9F + #E3D7AF + #FFF2C1 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#9C897B

Tangerine · Gray · Warm Sun

HEX

#9C897B

RGB

rgb(156, 137, 123)

HSL

hsl(25, 14%, 55%)

HSB

hsb(25, 21%, 61%)

CMYK

cmyk(0%, 12%, 21%, 39%)

Oklch

oklch(64.3% 0.031 58.6)

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

#B0A48E

Ginger · DarkGray · Warm Sun

HEX

#B0A48E

RGB

rgb(176, 164, 142)

HSL

hsl(39, 18%, 62%)

HSB

hsb(39, 19%, 69%)

CMYK

cmyk(0%, 7%, 19%, 31%)

Oklch

oklch(72.3% 0.034 82.7)

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

#CDBE9F

Goose Yellow · Tan · Sunflower

HEX

#CDBE9F

RGB

rgb(205, 190, 159)

HSL

hsl(40, 32%, 71%)

HSB

hsb(40, 22%, 80%)

CMYK

cmyk(0%, 7%, 22%, 20%)

Oklch

oklch(80.6% 0.045 85.2)

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

#E3D7AF

Goose Yellow · Wheat · Lemon Cream

HEX

#E3D7AF

RGB

rgb(227, 215, 175)

HSL

hsl(46, 48%, 79%)

HSB

hsb(46, 23%, 89%)

CMYK

cmyk(0%, 5%, 23%, 11%)

Oklch

oklch(87.9% 0.054 93.3)

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

#FFF2C1

Goose Yellow · Bisque · Lemon Cream

HEX

#FFF2C1

RGB

rgb(255, 242, 193)

HSL

hsl(47, 100%, 88%)

HSB

hsb(47, 24%, 100%)

CMYK

cmyk(0%, 5%, 24%, 0%)

Oklch

oklch(95.9% 0.065 94.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9C897B

7C8F9C

Analogous

9C7C7F

9C897B

9C9A7C

Triadic

9C897B

7C9C8A

8A7C9C

Split-Comp.

9C897B

7C9C9A

7C7F9C

Tetradic

9C897B

7F9C7C

7C8F9C

9A7C9C

Contrast Matrix WCAG 2.1 Contrast

9C897B	B0A48E	CDBE9F	E3D7AF	FFF2C1
—	1.4 Fail	1.8 Fail	2.3 Fail	3.0 Fail
1.4 Fail	—	1.3 Fail	1.7 Fail	2.2 Fail
1.8 Fail	1.3 Fail	—	1.3 Fail	1.6 Fail
2.3 Fail	1.7 Fail	1.3 Fail	—	1.3 Fail
3.0 Fail	2.2 Fail	1.6 Fail	1.3 Fail	—

White BG

3.3AA Large

2.5Fail

1.8Fail

1.4Fail

1.1Fail

Black BG

6.3AA

8.5AAA

11.5AAA

14.6AAA

18.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

94947E

ABAB93

C7C6A7

DEDEB9

F9F9CD

Deuteranopia

95967F

ACAC95

C7C9A8

DFDFBB

FAFBD0

Tritanopia

9B8182

AF9898

CCACAE

E2C0C2

FED6D8

Achromatopsia

8D8D8D

A5A5A5

BFBFBF

D6D6D6

F0F0F0

Shades & Tints Shades & Tints

#9C897B

Dark

Light

#B0A48E

Dark

Light

#CDBE9F

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9c897b;
  --color-2: #b0a48e;
  --color-3: #cdbe9f;
  --color-4: #e3d7af;
  --color-5: #fff2c1;
}

SCSS

$color-1: #9c897b;
$color-2: #b0a48e;
$color-3: #cdbe9f;
$color-4: #e3d7af;
$color-5: #fff2c1;

TAILWIND

colors: {
  'brand-1': '#9c897b',
  'brand-2': '#b0a48e',
  'brand-3': '#cdbe9f',
  'brand-4': '#e3d7af',
  'brand-5': '#fff2c1',
}

RGB Array

[156, 137, 123], [176, 164, 142], [205, 190, 159], [227, 215, 175], [255, 242, 193]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9C897B, #B0A48E, #CDBE9F, #E3D7AF, #FFF2C1 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: #9c897b; --color-2: #b0a48e; --color-3: #cdbe9f; --color-4: #e3d7af; --color-5: #fff2c1. 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