#FCEFE1 + #DAE2D7 + #B5D6CD + #A8CABB + #AFEBDB - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#FCEFE1

Goose Yellow · Linen · Peach Orange

HEX

#FCEFE1

RGB

rgb(252, 239, 225)

HSL

hsl(31, 82%, 94%)

HSB

hsb(31, 11%, 99%)

CMYK

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

Oklch

oklch(95.9% 0.023 69.6)

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

#DAE2D7

Celadon · LightGray · Mint Green

HEX

#DAE2D7

RGB

rgb(218, 226, 215)

HSL

hsl(104, 16%, 86%)

HSB

hsb(104, 5%, 89%)

CMYK

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

Oklch

oklch(90.4% 0.017 137.0)

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

#B5D6CD

Jade · LightSteelBlue · Glacier Blue

HEX

#B5D6CD

RGB

rgb(181, 214, 205)

HSL

hsl(164, 29%, 77%)

HSB

hsb(164, 15%, 84%)

CMYK

cmyk(15%, 0%, 4%, 16%)

Oklch

oklch(84.9% 0.037 177.1)

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

#A8CABB

Jade · Silver · Apple Green

HEX

#A8CABB

RGB

rgb(168, 202, 187)

HSL

hsl(154, 24%, 73%)

HSB

hsb(154, 17%, 79%)

CMYK

cmyk(17%, 0%, 7%, 21%)

Oklch

oklch(81.0% 0.042 166.8)

Traditional「Jade」· Paint「Apple Green」· Creative Arctic Pool

#AFEBDB

Jade · LightBlue · Glacier Blue

HEX

#AFEBDB

RGB

rgb(175, 235, 219)

HSL

hsl(164, 60%, 80%)

HSB

hsb(164, 26%, 92%)

CMYK

cmyk(26%, 0%, 7%, 8%)

Oklch

oklch(89.5% 0.065 176.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FCEFE1

E3EFFC

Analogous

FCE4E3

FCEFE1

FCFCE3

Triadic

FCEFE1

E3FCF0

F0E3FC

Split-Comp.

FCEFE1

E3FCFC

E4E3FC

Tetradic

FCEFE1

E3FCE4

E3EFFC

FCE3FC

Contrast Matrix WCAG 2.1 Contrast

FCEFE1	DAE2D7	B5D6CD	A8CABB	AFEBDB
—	1.2 Fail	1.4 Fail	1.6 Fail	1.2 Fail
1.2 Fail	—	1.2 Fail	1.3 Fail	1.0 Fail
1.4 Fail	1.2 Fail	—	1.1 Fail	1.2 Fail
1.6 Fail	1.3 Fail	1.1 Fail	—	1.3 Fail
1.2 Fail	1.0 Fail	1.2 Fail	1.3 Fail	—

White BG

1.1Fail

1.3Fail

1.6Fail

1.8Fail

1.3Fail

Black BG

18.6AAA

15.8AAA

13.5AAA

11.8AAA

15.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F6F6E4

DDDEDA

C3C4CF

B7B7BF

C9CADF

Deuteranopia

F7F8E5

DDDCDA

C1BFD0

B5B2C0

C6C1E0

Tritanopia

FBE7E8

DADCDC

B7D1D1

AAC1C2

B2E2E3

Achromatopsia

F1F1F1

DEDEDE

CBCBCB

BEBEBE

D7D7D7

Shades & Tints Shades & Tints

#FCEFE1

Dark

Light

#DAE2D7

Dark

Light

#B5D6CD

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fcefe1;
  --color-2: #dae2d7;
  --color-3: #b5d6cd;
  --color-4: #a8cabb;
  --color-5: #afebdb;
}

SCSS

$color-1: #fcefe1;
$color-2: #dae2d7;
$color-3: #b5d6cd;
$color-4: #a8cabb;
$color-5: #afebdb;

TAILWIND

colors: {
  'brand-1': '#fcefe1',
  'brand-2': '#dae2d7',
  'brand-3': '#b5d6cd',
  'brand-4': '#a8cabb',
  'brand-5': '#afebdb',
}

RGB Array

[252, 239, 225], [218, 226, 215], [181, 214, 205], [168, 202, 187], [175, 235, 219]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FCEFE1, #DAE2D7, #B5D6CD, #A8CABB, #AFEBDB 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: #fcefe1; --color-2: #dae2d7; --color-3: #b5d6cd; --color-4: #a8cabb; --color-5: #afebdb. 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