#F63757 + #F1F5D4 + #DEE9D1 + #C7DFCD + #ADD9CE · sea - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F63757

Vermilion · Tomato · Passion Red

HEX

#F63757

RGB

rgb(246, 55, 87)

HSL

hsl(350, 91%, 59%)

HSB

hsb(350, 78%, 96%)

CMYK

cmyk(0%, 78%, 65%, 4%)

Oklch

oklch(64.1% 0.224 17.7)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

#F1F5D4

Fresh Green · Beige · Lemon Cream

HEX

#F1F5D4

RGB

rgb(241, 245, 212)

HSL

hsl(67, 62%, 90%)

HSB

hsb(67, 13%, 96%)

CMYK

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

Oklch

oklch(95.9% 0.043 112.8)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#DEE9D1

Willow Green · LightGray · Mint Green

HEX

#DEE9D1

RGB

rgb(222, 233, 209)

HSL

hsl(87, 35%, 87%)

HSB

hsb(87, 10%, 91%)

CMYK

cmyk(5%, 0%, 10%, 9%)

Oklch

oklch(91.9% 0.034 127.2)

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

#C7DFCD

Celadon · LightGray · Mint Green

HEX

#C7DFCD

RGB

rgb(199, 223, 205)

HSL

hsl(135, 27%, 83%)

HSB

hsb(135, 11%, 87%)

CMYK

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

Oklch

oklch(88.1% 0.035 153.2)

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

#ADD9CE

Jade · LightBlue · Glacier Blue

HEX

#ADD9CE

RGB

rgb(173, 217, 206)

HSL

hsl(165, 37%, 76%)

HSB

hsb(165, 20%, 85%)

CMYK

cmyk(20%, 0%, 5%, 15%)

Oklch

oklch(85.1% 0.048 178.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F63757

37F6D6

Analogous

F637B6

F63757

F67737

Triadic

F63757

57F637

3757F6

Split-Comp.

F63757

37F677

37B6F6

Tetradic

F63757

B6F637

37F6D6

7737F6

Contrast Matrix WCAG 2.1 Contrast

F63757	F1F5D4	DEE9D1	C7DFCD	ADD9CE
—	3.3 AA Large	3.0 Fail	2.7 Fail	2.4 Fail
3.3 AA Large	—	1.1 Fail	1.3 Fail	1.4 Fail
3.0 Fail	1.1 Fail	—	1.1 Fail	1.2 Fail
2.7 Fail	1.3 Fail	1.1 Fail	—	1.1 Fail
2.4 Fail	1.4 Fail	1.2 Fail	1.1 Fail	—

White BG

3.7AA Large

1.1Fail

1.3Fail

1.4Fail

1.5Fail

Black BG

5.6AA

18.8AAA

16.7AAA

14.9AAA

13.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A3A24F

F3F3DC

E3E3D7

D1D2D1

C0C0D1

Deuteranopia

AEBD4D

F3F2DE

E2E1D8

D0CED2

BEBAD1

Tritanopia

EC4948

F1E2E4

DFDBDC

C8D5D6

AFD3D3

Achromatopsia

747474

F0F0F0

E3E3E3

D6D6D6

CBCBCB

Shades & Tints Shades & Tints

#F63757

Dark

Light

#F1F5D4

Dark

Light

#DEE9D1

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f63757;
  --color-2: #f1f5d4;
  --color-3: #dee9d1;
  --color-4: #c7dfcd;
  --color-5: #add9ce;
}

SCSS

$color-1: #f63757;
$color-2: #f1f5d4;
$color-3: #dee9d1;
$color-4: #c7dfcd;
$color-5: #add9ce;

TAILWIND

colors: {
  'brand-1': '#f63757',
  'brand-2': '#f1f5d4',
  'brand-3': '#dee9d1',
  'brand-4': '#c7dfcd',
  'brand-5': '#add9ce',
}

RGB Array

[246, 55, 87], [241, 245, 212], [222, 233, 209], [199, 223, 205], [173, 217, 206]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #F63757, #F1F5D4, #DEE9D1, #C7DFCD, #ADD9CE 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: #f63757; --color-2: #f1f5d4; --color-3: #dee9d1; --color-4: #c7dfcd; --color-5: #add9ce. 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