#FFEFE3 + #F2EAE4 + #E8E8E8 + #D5DDE3 + #C5D3DE - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#FFEFE3

Apricot · Linen · Peach Orange

HEX

#FFEFE3

RGB

rgb(255, 239, 227)

HSL

hsl(26, 100%, 95%)

HSB

hsb(26, 11%, 100%)

CMYK

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

Oklch

oklch(96.2% 0.024 59.4)

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

#F2EAE4

Apricot · Linen · Peach Orange

HEX

#F2EAE4

RGB

rgb(242, 234, 228)

HSL

hsl(26, 35%, 92%)

HSB

hsb(26, 6%, 95%)

CMYK

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

Oklch

oklch(94.2% 0.012 59.6)

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

#E8E8E8

Plain White · Lavender · Cloud White

HEX

#E8E8E8

RGB

rgb(232, 232, 232)

HSL

hsl(0, 0%, 91%)

HSB

hsb(0, 0%, 91%)

CMYK

cmyk(0%, 0%, 0%, 9%)

Oklch

oklch(93.1% 0.000 89.9)

Traditional「Plain White」· Paint「Cloud White」· Creative Morning Mist

#D5DDE3

Sky Blue · LightGray · Sky Blue

HEX

#D5DDE3

RGB

rgb(213, 221, 227)

HSL

hsl(206, 20%, 86%)

HSB

hsb(206, 6%, 89%)

CMYK

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

Oklch

oklch(89.3% 0.012 239.9)

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

#C5D3DE

Sky Blue · LightGray · Sky Blue

HEX

#C5D3DE

RGB

rgb(197, 211, 222)

HSL

hsl(206, 27%, 82%)

HSB

hsb(206, 11%, 87%)

CMYK

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

Oklch

oklch(86.0% 0.022 241.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFEFE3

E5F4FF

Analogous

FFE5E7

FFEFE3

FFFDE5

Triadic

FFEFE3

E5FFF1

F1E5FF

Split-Comp.

FFEFE3

E5FFFD

E5E7FF

Tetradic

FFEFE3

E7FFE5

E5F4FF

FDE5FF

Contrast Matrix WCAG 2.1 Contrast

FFEFE3	F2EAE4	E8E8E8	D5DDE3	C5D3DE
—	1.1 Fail	1.1 Fail	1.2 Fail	1.4 Fail
1.1 Fail	—	1.0 Fail	1.2 Fail	1.3 Fail
1.1 Fail	1.0 Fail	—	1.1 Fail	1.2 Fail
1.2 Fail	1.2 Fail	1.1 Fail	—	1.1 Fail
1.4 Fail	1.3 Fail	1.2 Fail	1.1 Fail	—

White BG

1.1Fail

1.2Fail

1.4Fail

1.5Fail

Black BG

18.7AAA

17.7AAA

17.1AAA

15.3AAA

13.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F8F8E6

EFEEE5

E8E8E8

D8D9E2

CBCBDB

Deuteranopia

F9FAE7

EFF0E6

E8E8E8

D8D7E1

CAC9DB

Tritanopia

FEE8E9

F2E7E7

E8E8E8

D5E0E0

C6D9D9

Achromatopsia

F2F2F2

ECECEC

E8E8E8

DBDBDB

D0D0D0

Shades & Tints Shades & Tints

#FFEFE3

Dark

Light

#F2EAE4

Dark

Light

#E8E8E8

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ffefe3;
  --color-2: #f2eae4;
  --color-3: #e8e8e8;
  --color-4: #d5dde3;
  --color-5: #c5d3de;
}

SCSS

$color-1: #ffefe3;
$color-2: #f2eae4;
$color-3: #e8e8e8;
$color-4: #d5dde3;
$color-5: #c5d3de;

TAILWIND

colors: {
  'brand-1': '#ffefe3',
  'brand-2': '#f2eae4',
  'brand-3': '#e8e8e8',
  'brand-4': '#d5dde3',
  'brand-5': '#c5d3de',
}

RGB Array

[255, 239, 227], [242, 234, 228], [232, 232, 232], [213, 221, 227], [197, 211, 222]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FFEFE3, #F2EAE4, #E8E8E8, #D5DDE3, #C5D3DE 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: #ffefe3; --color-2: #f2eae4; --color-3: #e8e8e8; --color-4: #d5dde3; --color-5: #c5d3de. 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