#F2ECDE + #B3F2EF + #38FFF5 + #C4C4C6 + #F49294 · sea - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F2ECDE

Goose Yellow · Beige · Lemon Cream

HEX

#F2ECDE

RGB

rgb(242, 236, 222)

HSL

hsl(42, 43%, 91%)

HSB

hsb(42, 8%, 95%)

CMYK

cmyk(0%, 2%, 8%, 5%)

Oklch

oklch(94.4% 0.020 87.5)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#B3F2EF

Jade · LightBlue · Glacier Blue

HEX

#B3F2EF

RGB

rgb(179, 242, 239)

HSL

hsl(177, 71%, 83%)

HSB

hsb(177, 26%, 95%)

CMYK

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

Oklch

oklch(91.8% 0.063 192.4)

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

#38FFF5

Jade · Turquoise · Lake Green

HEX

#38FFF5

RGB

rgb(56, 255, 245)

HSL

hsl(177, 100%, 61%)

HSB

hsb(177, 78%, 100%)

CMYK

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

Oklch

oklch(90.6% 0.148 189.6)

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

#C4C4C6

Silver Gray · Silver · Pearl Gray

HEX

#C4C4C6

RGB

rgb(196, 196, 198)

HSL

hsl(240, 2%, 77%)

HSB

hsb(240, 1%, 78%)

CMYK

cmyk(1%, 1%, 0%, 22%)

Oklch

oklch(82.1% 0.003 286.3)

Traditional「Silver Gray」· Paint「Pearl Gray」· Creative Silver Lining

#F49294

Peach Pink · LightCoral · Coral Red

HEX

#F49294

RGB

rgb(244, 146, 148)

HSL

hsl(359, 82%, 76%)

HSB

hsb(359, 40%, 96%)

CMYK

cmyk(0%, 40%, 39%, 4%)

Oklch

oklch(76.3% 0.119 18.9)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F2ECDE

DEE4F2

Analogous

F2E2DE

F2ECDE

EEF2DE

Triadic

F2ECDE

DEF2EC

ECDEF2

Split-Comp.

F2ECDE

DEEEF2

E2DEF2

Tetradic

F2ECDE

DEF2E2

DEE4F2

F2DEEE

Contrast Matrix WCAG 2.1 Contrast

F2ECDE	B3F2EF	38FFF5	C4C4C6	F49294
—	1.1 Fail	1.1 Fail	1.5 Fail	1.9 Fail
1.1 Fail	—	1.0 Fail	1.4 Fail	1.8 Fail
1.1 Fail	1.0 Fail	—	1.4 Fail	1.8 Fail
1.5 Fail	1.4 Fail	1.4 Fail	—	1.3 Fail
1.9 Fail	1.8 Fail	1.8 Fail	1.3 Fail	—

White BG

1.2Fail

1.3Fail

1.7Fail

2.2Fail

Black BG

17.8AAA

16.9AAA

16.8AAA

12.1AAA

9.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

EFEFE1

CECFF0

8E90F7

C4C4C6

CAC994

Deuteranopia

F0F0E2

CBC6F0

8374F8

C4C4C5

CFD793

Tritanopia

F2E4E5

B6F0F0

42F9FA

C4C5C5

EF9393

Achromatopsia

ECECEC

DFDFDF

C2C2C2

C4C4C4

B0B0B0

Shades & Tints Shades & Tints

#F2ECDE

Dark

Light

#B3F2EF

Dark

Light

#38FFF5

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f2ecde;
  --color-2: #b3f2ef;
  --color-3: #38fff5;
  --color-4: #c4c4c6;
  --color-5: #f49294;
}

SCSS

$color-1: #f2ecde;
$color-2: #b3f2ef;
$color-3: #38fff5;
$color-4: #c4c4c6;
$color-5: #f49294;

TAILWIND

colors: {
  'brand-1': '#f2ecde',
  'brand-2': '#b3f2ef',
  'brand-3': '#38fff5',
  'brand-4': '#c4c4c6',
  'brand-5': '#f49294',
}

RGB Array

[242, 236, 222], [179, 242, 239], [56, 255, 245], [196, 196, 198], [244, 146, 148]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #F2ECDE, #B3F2EF, #38FFF5, #C4C4C6, #F49294 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: #f2ecde; --color-2: #b3f2ef; --color-3: #38fff5; --color-4: #c4c4c6; --color-5: #f49294. 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