#FFEDD5 + #D4E7D1 + #BFDAC9 + #C0BDAE + #B49F8C · warm - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#FFEDD5

Goose Yellow · Beige · Peach Orange

HEX

#FFEDD5

RGB

rgb(255, 237, 213)

HSL

hsl(34, 100%, 92%)

HSB

hsb(34, 16%, 100%)

CMYK

cmyk(0%, 7%, 16%, 0%)

Oklch

oklch(95.4% 0.037 75.2)

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

#D4E7D1

Celadon · LightGray · Mint Green

HEX

#D4E7D1

RGB

rgb(212, 231, 209)

HSL

hsl(112, 31%, 86%)

HSB

hsb(112, 10%, 91%)

CMYK

cmyk(8%, 0%, 10%, 9%)

Oklch

oklch(90.8% 0.036 141.4)

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

#BFDAC9

Celadon · LightGray · Apple Green

HEX

#BFDAC9

RGB

rgb(191, 218, 201)

HSL

hsl(142, 27%, 80%)

HSB

hsb(142, 12%, 85%)

CMYK

cmyk(12%, 0%, 8%, 15%)

Oklch

oklch(86.4% 0.037 157.9)

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

#C0BDAE

Fresh Green · Silver · Sunflower

HEX

#C0BDAE

RGB

rgb(192, 189, 174)

HSL

hsl(50, 12%, 72%)

HSB

hsb(50, 9%, 75%)

CMYK

cmyk(0%, 2%, 9%, 25%)

Oklch

oklch(79.7% 0.021 97.6)

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

#B49F8C

Apricot · DarkGray · Warm Sun

HEX

#B49F8C

RGB

rgb(180, 159, 140)

HSL

hsl(28, 21%, 63%)

HSB

hsb(28, 22%, 71%)

CMYK

cmyk(0%, 12%, 22%, 29%)

Oklch

oklch(71.6% 0.037 64.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFEDD5

D6E8FF

Analogous

FFD9D6

FFEDD5

FCFFD6

Triadic

FFEDD5

D6FFED

EDD6FF

Split-Comp.

FFEDD5

D6FCFF

D9D6FF

Tetradic

FFEDD5

D6FFD9

D6E8FF

FFD6FC

Contrast Matrix WCAG 2.1 Contrast

FFEDD5	D4E7D1	BFDAC9	C0BDAE	B49F8C
—	1.1 Fail	1.3 Fail	1.6 Fail	2.2 Fail
1.1 Fail	—	1.1 Fail	1.5 Fail	2.0 Fail
1.3 Fail	1.1 Fail	—	1.3 Fail	1.7 Fail
1.6 Fail	1.5 Fail	1.3 Fail	—	1.3 Fail
2.2 Fail	2.0 Fail	1.7 Fail	1.3 Fail	—

White BG

1.1Fail

1.3Fail

1.5Fail

1.9Fail

2.5Fail

Black BG

18.3AAA

16.2AAA

14.1AAA

11.1AAA

8.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F7F7DB

DCDCD6

CBCBCD

BFBFB2

ABAB91

Deuteranopia

F8FADC

DBDAD8

C9C7CE

BFBFB3

ACAE92

Tritanopia

FEDFE0

D5DBDB

C0D0D1

C0B4B5

B39495

Achromatopsia

F0F0F0

DFDFDF

D0D0D0

BCBCBC

A3A3A3

Shades & Tints Shades & Tints

#FFEDD5

Dark

Light

#D4E7D1

Dark

Light

#BFDAC9

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ffedd5;
  --color-2: #d4e7d1;
  --color-3: #bfdac9;
  --color-4: #c0bdae;
  --color-5: #b49f8c;
}

SCSS

$color-1: #ffedd5;
$color-2: #d4e7d1;
$color-3: #bfdac9;
$color-4: #c0bdae;
$color-5: #b49f8c;

TAILWIND

colors: {
  'brand-1': '#ffedd5',
  'brand-2': '#d4e7d1',
  'brand-3': '#bfdac9',
  'brand-4': '#c0bdae',
  'brand-5': '#b49f8c',
}

RGB Array

[255, 237, 213], [212, 231, 209], [191, 218, 201], [192, 189, 174], [180, 159, 140]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #FFEDD5, #D4E7D1, #BFDAC9, #C0BDAE, #B49F8C 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: #ffedd5; --color-2: #d4e7d1; --color-3: #bfdac9; --color-4: #c0bdae; --color-5: #b49f8c. 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 warm-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