#C4BC95 + #F2F8D6 + #DAECD2 + #CCE6C9 + #C1E3D3 · sea - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#C4BC95

Fresh Green · Tan · Sunflower

HEX

#C4BC95

RGB

rgb(196, 188, 149)

HSL

hsl(50, 28%, 68%)

HSB

hsb(50, 24%, 77%)

CMYK

cmyk(0%, 4%, 24%, 23%)

Oklch

oklch(79.2% 0.053 97.8)

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

#F2F8D6

Willow Green · Beige · Mint Green

HEX

#F2F8D6

RGB

rgb(242, 248, 214)

HSL

hsl(71, 71%, 91%)

HSB

hsb(71, 14%, 97%)

CMYK

cmyk(2%, 0%, 14%, 3%)

Oklch

oklch(96.6% 0.045 115.4)

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

#DAECD2

Celadon · LightGray · Mint Green

HEX

#DAECD2

RGB

rgb(218, 236, 210)

HSL

hsl(102, 41%, 87%)

HSB

hsb(102, 11%, 93%)

CMYK

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

Oklch

oklch(92.3% 0.040 135.9)

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

#CCE6C9

Celadon · LightGray · Mint Green

HEX

#CCE6C9

RGB

rgb(204, 230, 201)

HSL

hsl(114, 37%, 85%)

HSB

hsb(114, 13%, 90%)

CMYK

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

Oklch

oklch(89.8% 0.048 142.3)

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

#C1E3D3

Jade · LightGray · Mint Green

HEX

#C1E3D3

RGB

rgb(193, 227, 211)

HSL

hsl(152, 38%, 82%)

HSB

hsb(152, 15%, 89%)

CMYK

cmyk(15%, 0%, 7%, 11%)

Oklch

oklch(88.7% 0.042 165.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C4BC95

979EC4

Analogous

C4A697

C4BC95

B5C497

Triadic

C4BC95

97C4BD

BD97C4

Split-Comp.

C4BC95

97B5C4

A697C4

Tetradic

C4BC95

97C4A6

979EC4

C497B5

Contrast Matrix WCAG 2.1 Contrast

C4BC95	F2F8D6	DAECD2	CCE6C9	C1E3D3
—	1.7 Fail	1.5 Fail	1.4 Fail	1.4 Fail
1.7 Fail	—	1.1 Fail	1.2 Fail	1.3 Fail
1.5 Fail	1.1 Fail	—	1.1 Fail	1.1 Fail
1.4 Fail	1.2 Fail	1.1 Fail	—	1.0 Fail
1.4 Fail	1.3 Fail	1.1 Fail	1.0 Fail	—

White BG

1.9Fail

1.1Fail

1.2Fail

1.3Fail

1.4Fail

Black BG

11.0AAA

19.2AAA

16.9AAA

15.7AAA

15.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C1C09E

F5F5DE

E2E2D8

D7D7D0

D0D0D7

Deuteranopia

C1C2A1

F4F4E0

E1DFDA

D6D4D2

CECBD8

Tritanopia

C4A6A8

F2E5E6

DBDDDE

CDD6D7

C3DADB

Achromatopsia

BABABA

F2F2F2

E4E4E4

DBDBDB

D7D7D7

Shades & Tints Shades & Tints

#C4BC95

Dark

Light

#F2F8D6

Dark

Light

#DAECD2

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c4bc95;
  --color-2: #f2f8d6;
  --color-3: #daecd2;
  --color-4: #cce6c9;
  --color-5: #c1e3d3;
}

SCSS

$color-1: #c4bc95;
$color-2: #f2f8d6;
$color-3: #daecd2;
$color-4: #cce6c9;
$color-5: #c1e3d3;

TAILWIND

colors: {
  'brand-1': '#c4bc95',
  'brand-2': '#f2f8d6',
  'brand-3': '#daecd2',
  'brand-4': '#cce6c9',
  'brand-5': '#c1e3d3',
}

RGB Array

[196, 188, 149], [242, 248, 214], [218, 236, 210], [204, 230, 201], [193, 227, 211]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #C4BC95, #F2F8D6, #DAECD2, #CCE6C9, #C1E3D3 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: #c4bc95; --color-2: #f2f8d6; --color-3: #daecd2; --color-4: #cce6c9; --color-5: #c1e3d3. 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