#FFF0D9 + #FFC6A3 + #D9C69C + #B4ABBA + #B893B5 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#FFF0D9

Goose Yellow · Beige · Peach Orange

HEX

#FFF0D9

RGB

rgb(255, 240, 217)

HSL

hsl(36, 100%, 93%)

HSB

hsb(36, 15%, 100%)

CMYK

cmyk(0%, 6%, 15%, 0%)

Oklch

oklch(96.1% 0.034 78.7)

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

#FFC6A3

Apricot · Wheat · Peach Orange

HEX

#FFC6A3

RGB

rgb(255, 198, 163)

HSL

hsl(23, 100%, 82%)

HSB

hsb(23, 36%, 100%)

CMYK

cmyk(0%, 22%, 36%, 0%)

Oklch

oklch(86.9% 0.080 52.9)

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

#D9C69C

Goose Yellow · Tan · Sunflower

HEX

#D9C69C

RGB

rgb(217, 198, 156)

HSL

hsl(41, 45%, 73%)

HSB

hsb(41, 28%, 85%)

CMYK

cmyk(0%, 9%, 28%, 15%)

Oklch

oklch(83.2% 0.060 86.5)

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

#B4ABBA

Lilac · DarkGray · Lilac Purple

HEX

#B4ABBA

RGB

rgb(180, 171, 186)

HSL

hsl(276, 10%, 70%)

HSB

hsb(276, 8%, 73%)

CMYK

cmyk(3%, 8%, 0%, 27%)

Oklch

oklch(75.3% 0.023 312.1)

Traditional「Lilac」· Paint「Lilac Purple」· Creative Lavender Dream

#B893B5

Mauve · DarkGray · Lilac Purple

HEX

#B893B5

RGB

rgb(184, 147, 181)

HSL

hsl(305, 21%, 65%)

HSB

hsb(305, 20%, 72%)

CMYK

cmyk(0%, 20%, 2%, 28%)

Oklch

oklch(70.8% 0.064 328.9)

Traditional「Mauve」· Paint「Lilac Purple」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFF0D9

DBEAFF

Analogous

FFDFDB

FFF0D9

FBFFDB

Triadic

FFF0D9

DBFFF1

F1DBFF

Split-Comp.

FFF0D9

DBFBFF

DFDBFF

Tetradic

FFF0D9

DBFFDF

DBEAFF

FFDBFB

Contrast Matrix WCAG 2.1 Contrast

FFF0D9	FFC6A3	D9C69C	B4ABBA	B893B5
—	1.4 Fail	1.5 Fail	2.0 Fail	2.4 Fail
1.4 Fail	—	1.1 Fail	1.5 Fail	1.8 Fail
1.5 Fail	1.1 Fail	—	1.3 Fail	1.6 Fail
2.0 Fail	1.5 Fail	1.3 Fail	—	1.2 Fail
2.4 Fail	1.8 Fail	1.6 Fail	1.2 Fail	—

White BG

1.1Fail

1.5Fail

1.7Fail

2.2Fail

2.7Fail

Black BG

18.7AAA

13.9AAA

12.5AAA

9.5AAA

7.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F9F8DF

E6E6AB

D1D1A6

B0B0B6

A8A8AD

Deuteranopia

F9FBE0

EAEEAE

D2D3A9

B1B1B6

AAADAB

Tritanopia

FEE3E4

FCB2B4

D8AEB0

B4B4B3

B6A6A5

Achromatopsia

F2F2F2

D3D3D3

C7C7C7

AFAFAF

A2A2A2

Shades & Tints Shades & Tints

#FFF0D9

Dark

Light

#FFC6A3

Dark

Light

#D9C69C

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fff0d9;
  --color-2: #ffc6a3;
  --color-3: #d9c69c;
  --color-4: #b4abba;
  --color-5: #b893b5;
}

SCSS

$color-1: #fff0d9;
$color-2: #ffc6a3;
$color-3: #d9c69c;
$color-4: #b4abba;
$color-5: #b893b5;

TAILWIND

colors: {
  'brand-1': '#fff0d9',
  'brand-2': '#ffc6a3',
  'brand-3': '#d9c69c',
  'brand-4': '#b4abba',
  'brand-5': '#b893b5',
}

RGB Array

[255, 240, 217], [255, 198, 163], [217, 198, 156], [180, 171, 186], [184, 147, 181]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FFF0D9, #FFC6A3, #D9C69C, #B4ABBA, #B893B5 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: #fff0d9; --color-2: #ffc6a3; --color-3: #d9c69c; --color-4: #b4abba; --color-5: #b893b5. 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