#FDE3C2 + #B4BEB5 + #BAA091 + #997368 + #E09C85 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#FDE3C2

Goose Yellow · Bisque · Peach Orange

HEX

#FDE3C2

RGB

rgb(253, 227, 194)

HSL

hsl(34, 94%, 88%)

HSB

hsb(34, 23%, 99%)

CMYK

cmyk(0%, 10%, 23%, 1%)

Oklch

oklch(92.9% 0.052 73.7)

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

#B4BEB5

Silver Gray · Silver · Pearl Gray

HEX

#B4BEB5

RGB

rgb(180, 190, 181)

HSL

hsl(126, 7%, 73%)

HSB

hsb(126, 5%, 75%)

CMYK

cmyk(5%, 0%, 5%, 25%)

Oklch

oklch(79.1% 0.017 148.4)

Traditional「Silver Gray」· Paint「Pearl Gray」· Creative Silver Lining

#BAA091

Apricot · DarkGray · Warm Sun

HEX

#BAA091

RGB

rgb(186, 160, 145)

HSL

hsl(22, 23%, 65%)

HSB

hsb(22, 22%, 73%)

CMYK

cmyk(0%, 14%, 22%, 27%)

Oklch

oklch(72.5% 0.037 51.8)

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

#997368

Crimson · Gray · Passion Red

HEX

#997368

RGB

rgb(153, 115, 104)

HSL

hsl(13, 19%, 50%)

HSB

hsb(13, 32%, 60%)

CMYK

cmyk(0%, 25%, 32%, 40%)

Oklch

oklch(59.0% 0.051 36.8)

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

#E09C85

Apricot · DarkSalmon · Warm Sun

HEX

#E09C85

RGB

rgb(224, 156, 133)

HSL

hsl(15, 59%, 70%)

HSB

hsb(15, 41%, 88%)

CMYK

cmyk(0%, 30%, 41%, 12%)

Oklch

oklch(75.3% 0.088 39.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FDE3C2

C4DDFD

Analogous

FDC7C4

FDE3C2

F9FDC4

Triadic

FDE3C2

C4FDE4

E4C4FD

Split-Comp.

FDE3C2

C4F9FD

C7C4FD

Tetradic

FDE3C2

C4FDC7

C4DDFD

FDC4F9

Contrast Matrix WCAG 2.1 Contrast

FDE3C2	B4BEB5	BAA091	997368	E09C85
—	1.5 Fail	2.0 Fail	3.4 AA Large	1.8 Fail
1.5 Fail	—	1.3 Fail	2.2 Fail	1.2 Fail
2.0 Fail	1.3 Fail	—	1.7 Fail	1.1 Fail
3.4 AA Large	2.2 Fail	1.7 Fail	—	1.9 Fail
1.8 Fail	1.2 Fail	1.1 Fail	1.9 Fail	—

White BG

1.2Fail

1.9Fail

2.5Fail

4.2AA Large

2.3Fail

Black BG

16.9AAA

11.0AAA

8.5AAA

5.0AA

9.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F2F2CA

B8B8B7

AFAF95

89886B

C3C28B

Deuteranopia

F3F5CC

B8B7B8

B0B296

8B8E6B

C7CC8C

Tritanopia

FCD0D2

B5B9B9

B99798

976D6D

DD8F90

Achromatopsia

E7E7E7

BABABA

A6A6A6

7D7D7D

AEAEAE

Shades & Tints Shades & Tints

#FDE3C2

Dark

Light

#B4BEB5

Dark

Light

#BAA091

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fde3c2;
  --color-2: #b4beb5;
  --color-3: #baa091;
  --color-4: #997368;
  --color-5: #e09c85;
}

SCSS

$color-1: #fde3c2;
$color-2: #b4beb5;
$color-3: #baa091;
$color-4: #997368;
$color-5: #e09c85;

TAILWIND

colors: {
  'brand-1': '#fde3c2',
  'brand-2': '#b4beb5',
  'brand-3': '#baa091',
  'brand-4': '#997368',
  'brand-5': '#e09c85',
}

RGB Array

[253, 227, 194], [180, 190, 181], [186, 160, 145], [153, 115, 104], [224, 156, 133]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FDE3C2, #B4BEB5, #BAA091, #997368, #E09C85 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: #fde3c2; --color-2: #b4beb5; --color-3: #baa091; --color-4: #997368; --color-5: #e09c85. 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