#FFF2F1 + #E6E3EC + #DDDFEC + #D5DEED + #C8D9E9 · sea - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#FFF2F1

Peach Pink · SeaShell · Cherry Blossom

HEX

#FFF2F1

RGB

rgb(255, 242, 241)

HSL

hsl(4, 100%, 97%)

HSB

hsb(4, 5%, 100%)

CMYK

cmyk(0%, 5%, 5%, 0%)

Oklch

oklch(97.1% 0.014 22.8)

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

#E6E3EC

Wisteria · Lavender · Lavender

HEX

#E6E3EC

RGB

rgb(230, 227, 236)

HSL

hsl(260, 19%, 91%)

HSB

hsb(260, 4%, 93%)

CMYK

cmyk(3%, 4%, 0%, 7%)

Oklch

oklch(92.1% 0.012 301.3)

Traditional「Wisteria」· Paint「Lavender」· Creative Lavender Dream

#DDDFEC

Azure · Lavender · Sky Blue

HEX

#DDDFEC

RGB

rgb(221, 223, 236)

HSL

hsl(232, 28%, 90%)

HSB

hsb(232, 6%, 93%)

CMYK

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

Oklch

oklch(90.6% 0.018 279.0)

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

#D5DEED

Azure · Lavender · Sky Blue

HEX

#D5DEED

RGB

rgb(213, 222, 237)

HSL

hsl(218, 40%, 88%)

HSB

hsb(218, 10%, 93%)

CMYK

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

Oklch

oklch(89.8% 0.023 260.7)

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

#C8D9E9

Sky Blue · LightGray · Sky Blue

HEX

#C8D9E9

RGB

rgb(200, 217, 233)

HSL

hsl(209, 43%, 85%)

HSB

hsb(209, 14%, 91%)

CMYK

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

Oklch

oklch(87.7% 0.029 246.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFF2F1

F0FEFF

Analogous

FFF0F6

FFF2F1

FFF8F0

Triadic

FFF2F1

F0FFF1

F1F0FF

Split-Comp.

FFF2F1

F0FFF8

F0F6FF

Tetradic

FFF2F1

F6FFF0

F0FEFF

F8F0FF

Contrast Matrix WCAG 2.1 Contrast

FFF2F1	E6E3EC	DDDFEC	D5DEED	C8D9E9
—	1.2 Fail	1.2 Fail	1.2 Fail	1.3 Fail
1.2 Fail	—	1.0 Fail	1.1 Fail	1.1 Fail
1.2 Fail	1.0 Fail	—	1.0 Fail	1.1 Fail
1.2 Fail	1.1 Fail	1.0 Fail	—	1.1 Fail
1.3 Fail	1.1 Fail	1.1 Fail	1.1 Fail	—

White BG

1.1Fail

1.3Fail

1.4Fail

Black BG

19.2AAA

16.6AAA

15.8AAA

15.5AAA

14.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F9F9F1

E5E5EA

DEDEE9

D9D9E9

CFD0E5

Deuteranopia

FAFBF1

E5E5E9

DEDEE8

D8D8E8

CECDE4

Tritanopia

FEF1F1

E6E8E8

DDE6E6

D5E7E6

C9E2E1

Achromatopsia

F6F6F6

E5E5E5

E0E0E0

DDDDDD

D6D6D6

Shades & Tints Shades & Tints

#FFF2F1

Dark

Light

#E6E3EC

Dark

Light

#DDDFEC

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fff2f1;
  --color-2: #e6e3ec;
  --color-3: #dddfec;
  --color-4: #d5deed;
  --color-5: #c8d9e9;
}

SCSS

$color-1: #fff2f1;
$color-2: #e6e3ec;
$color-3: #dddfec;
$color-4: #d5deed;
$color-5: #c8d9e9;

TAILWIND

colors: {
  'brand-1': '#fff2f1',
  'brand-2': '#e6e3ec',
  'brand-3': '#dddfec',
  'brand-4': '#d5deed',
  'brand-5': '#c8d9e9',
}

RGB Array

[255, 242, 241], [230, 227, 236], [221, 223, 236], [213, 222, 237], [200, 217, 233]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #FFF2F1, #E6E3EC, #DDDFEC, #D5DEED, #C8D9E9 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: #fff2f1; --color-2: #e6e3ec; --color-3: #dddfec; --color-4: #d5deed; --color-5: #c8d9e9. 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 sea-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