#FFD3B7 + #E3D6AA + #D9DDC6 + #D2E2D5 + #CAE8F0 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#FFD3B7

Apricot · Wheat · Peach Orange

HEX

#FFD3B7

RGB

rgb(255, 211, 183)

HSL

hsl(23, 100%, 86%)

HSB

hsb(23, 28%, 100%)

CMYK

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

Oklch

oklch(89.8% 0.062 54.2)

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

#E3D6AA

Goose Yellow · Wheat · Lemon Cream

HEX

#E3D6AA

RGB

rgb(227, 214, 170)

HSL

hsl(46, 50%, 78%)

HSB

hsb(46, 25%, 89%)

CMYK

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

Oklch

oklch(87.6% 0.060 93.5)

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

#D9DDC6

Willow Green · LightGray · Mint Green

HEX

#D9DDC6

RGB

rgb(217, 221, 198)

HSL

hsl(70, 25%, 82%)

HSB

hsb(70, 10%, 87%)

CMYK

cmyk(2%, 0%, 10%, 13%)

Oklch

oklch(88.8% 0.031 115.0)

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

#D2E2D5

Celadon · LightGray · Mint Green

HEX

#D2E2D5

RGB

rgb(210, 226, 213)

HSL

hsl(131, 22%, 85%)

HSB

hsb(131, 7%, 89%)

CMYK

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

Oklch

oklch(89.7% 0.024 151.2)

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

#CAE8F0

Sky Blue · Lavender · Glacier Blue

HEX

#CAE8F0

RGB

rgb(202, 232, 240)

HSL

hsl(193, 56%, 87%)

HSB

hsb(193, 16%, 94%)

CMYK

cmyk(16%, 3%, 0%, 6%)

Oklch

oklch(91.2% 0.033 215.6)

Traditional「Sky Blue」· Paint「Glacier Blue」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFD3B7

B8E4FF

Analogous

FFB8C0

FFD3B7

FFF7B8

Triadic

FFD3B7

B8FFD3

D3B8FF

Split-Comp.

FFD3B7

B8FFF7

B8C0FF

Tetradic

FFD3B7

C0FFB8

B8E4FF

F7B8FF

Contrast Matrix WCAG 2.1 Contrast

FFD3B7	E3D6AA	D9DDC6	D2E2D5	CAE8F0
—	1.1 Fail	1.0 Fail	1.0 Fail	1.1 Fail
1.1 Fail	—	1.0 Fail	1.1 Fail	1.1 Fail
1.0 Fail	1.0 Fail	—	1.0 Fail	1.1 Fail
1.0 Fail	1.1 Fail	1.0 Fail	—	1.0 Fail
1.1 Fail	1.1 Fail	1.1 Fail	1.0 Fail	—

White BG

1.4Fail

1.5Fail

1.4Fail

1.3Fail

Black BG

15.3AAA

14.5AAA

15.1AAA

15.6AAA

16.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

ECECBE

DDDDB5

DBDBCC

D9D9D8

D7D7EE

Deuteranopia

EFF2BF

DEDFB7

DBDACD

D8D7D9

D5D3EE

Tritanopia

FDC3C4

E2BDBF

D9D0D1

D3DBDB

CBEDEC

Achromatopsia

DDDDDD

D5D5D5

D9D9D9

DCDCDC

E0E0E0

Shades & Tints Shades & Tints

#FFD3B7

Dark

Light

#E3D6AA

Dark

Light

#D9DDC6

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ffd3b7;
  --color-2: #e3d6aa;
  --color-3: #d9ddc6;
  --color-4: #d2e2d5;
  --color-5: #cae8f0;
}

SCSS

$color-1: #ffd3b7;
$color-2: #e3d6aa;
$color-3: #d9ddc6;
$color-4: #d2e2d5;
$color-5: #cae8f0;

TAILWIND

colors: {
  'brand-1': '#ffd3b7',
  'brand-2': '#e3d6aa',
  'brand-3': '#d9ddc6',
  'brand-4': '#d2e2d5',
  'brand-5': '#cae8f0',
}

RGB Array

[255, 211, 183], [227, 214, 170], [217, 221, 198], [210, 226, 213], [202, 232, 240]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FFD3B7, #E3D6AA, #D9DDC6, #D2E2D5, #CAE8F0 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: #ffd3b7; --color-2: #e3d6aa; --color-3: #d9ddc6; --color-4: #d2e2d5; --color-5: #cae8f0. 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