#FCEBE4 + #EFE1E1 + #BFCEE3 + #7CB1D1 + #CDE0EE · sunset - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#FCEBE4

Apricot · Linen · Peach Orange

HEX

#FCEBE4

RGB

rgb(252, 235, 228)

HSL

hsl(17, 80%, 94%)

HSB

hsb(17, 10%, 99%)

CMYK

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

Oklch

oklch(95.2% 0.021 43.9)

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

#EFE1E1

Peach Pink · Linen · Cherry Blossom

HEX

#EFE1E1

RGB

rgb(239, 225, 225)

HSL

hsl(0, 30%, 91%)

HSB

hsb(0, 6%, 94%)

CMYK

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

Oklch

oklch(92.1% 0.015 17.4)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

#BFCEE3

Azure · LightSteelBlue · Sky Blue

HEX

#BFCEE3

RGB

rgb(191, 206, 227)

HSL

hsl(215, 39%, 82%)

HSB

hsb(215, 16%, 89%)

CMYK

cmyk(16%, 9%, 0%, 11%)

Oklch

oklch(84.7% 0.034 256.8)

Traditional「Azure」· Paint「Sky Blue」· Creative Twilight Haze

#7CB1D1

Sky Blue · SkyBlue · Cobalt Blue

HEX

#7CB1D1

RGB

rgb(124, 177, 209)

HSL

hsl(203, 48%, 65%)

HSB

hsb(203, 41%, 82%)

CMYK

cmyk(41%, 15%, 0%, 18%)

Oklch

oklch(73.5% 0.073 235.6)

Traditional「Sky Blue」· Paint「Cobalt Blue」· Creative Twilight Haze

#CDE0EE

Sky Blue · Lavender · Sky Blue

HEX

#CDE0EE

RGB

rgb(205, 224, 238)

HSL

hsl(205, 49%, 87%)

HSB

hsb(205, 14%, 93%)

CMYK

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

Oklch

oklch(89.7% 0.028 239.7)

Traditional「Sky Blue」· Paint「Sky Blue」· Creative Twilight Haze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FCEBE4

E3F5FC

Analogous

FCE3E9

FCEBE4

FCF7E3

Triadic

FCEBE4

E3FCEA

EAE3FC

Split-Comp.

FCEBE4

E3FCF7

E3E9FC

Tetradic

FCEBE4

E9FCE3

E3F5FC

F7E3FC

Contrast Matrix WCAG 2.1 Contrast

FCEBE4	EFE1E1	BFCEE3	7CB1D1	CDE0EE
—	1.1 Fail	1.4 Fail	2.0 Fail	1.2 Fail
1.1 Fail	—	1.3 Fail	1.8 Fail	1.1 Fail
1.4 Fail	1.3 Fail	—	1.5 Fail	1.2 Fail
2.0 Fail	1.8 Fail	1.5 Fail	—	1.7 Fail
1.2 Fail	1.1 Fail	1.2 Fail	1.7 Fail	—

White BG

1.2Fail

1.3Fail

1.6Fail

2.3Fail

1.4Fail

Black BG

18.1AAA

16.5AAA

13.2AAA

9.1AAA

15.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F5F4E6

E9E9E1

C5C6DE

9393C9

D5D5EB

Deuteranopia

F6F7E6

EAEBE1

C5C4DD

908CC7

D4D3EA

Tritanopia

FBE7E7

EEE1E1

C0DAD9

7FC3C2

CEE8E7

Achromatopsia

EFEFEF

E5E5E5

CCCCCC

A5A5A5

DCDCDC

Shades & Tints Shades & Tints

#FCEBE4

Dark

Light

#EFE1E1

Dark

Light

#BFCEE3

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fcebe4;
  --color-2: #efe1e1;
  --color-3: #bfcee3;
  --color-4: #7cb1d1;
  --color-5: #cde0ee;
}

SCSS

$color-1: #fcebe4;
$color-2: #efe1e1;
$color-3: #bfcee3;
$color-4: #7cb1d1;
$color-5: #cde0ee;

TAILWIND

colors: {
  'brand-1': '#fcebe4',
  'brand-2': '#efe1e1',
  'brand-3': '#bfcee3',
  'brand-4': '#7cb1d1',
  'brand-5': '#cde0ee',
}

RGB Array

[252, 235, 228], [239, 225, 225], [191, 206, 227], [124, 177, 209], [205, 224, 238]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sunset-style palette of #FCEBE4, #EFE1E1, #BFCEE3, #7CB1D1, #CDE0EE 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: #fcebe4; --color-2: #efe1e1; --color-3: #bfcee3; --color-4: #7cb1d1; --color-5: #cde0ee. 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 sunset-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