#C3B394 + #BCCCA8 + #DADDC5 + #FDEDC5 + #ECD3B9 · sea - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#C3B394

Ginger · Tan · Sunflower

HEX

#C3B394

RGB

rgb(195, 179, 148)

HSL

hsl(40, 28%, 67%)

HSB

hsb(40, 24%, 76%)

CMYK

cmyk(0%, 8%, 24%, 24%)

Oklch

oklch(77.2% 0.046 83.9)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#BCCCA8

Willow Green · Silver · Apple Green

HEX

#BCCCA8

RGB

rgb(188, 204, 168)

HSL

hsl(87, 26%, 73%)

HSB

hsb(87, 18%, 80%)

CMYK

cmyk(8%, 0%, 18%, 20%)

Oklch

oklch(82.3% 0.052 127.0)

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

#DADDC5

Fresh Green · LightGray · Lemon Cream

HEX

#DADDC5

RGB

rgb(218, 221, 197)

HSL

hsl(68, 26%, 82%)

HSB

hsb(68, 11%, 87%)

CMYK

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

Oklch

oklch(88.9% 0.032 112.8)

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

#FDEDC5

Goose Yellow · Bisque · Lemon Cream

HEX

#FDEDC5

RGB

rgb(253, 237, 197)

HSL

hsl(43, 93%, 88%)

HSB

hsb(43, 22%, 99%)

CMYK

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

Oklch

oklch(94.9% 0.055 88.8)

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

#ECD3B9

Goose Yellow · Wheat · Peach Orange

HEX

#ECD3B9

RGB

rgb(236, 211, 185)

HSL

hsl(31, 57%, 83%)

HSB

hsb(31, 22%, 93%)

CMYK

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

Oklch

oklch(88.1% 0.045 68.3)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C3B394

93A3C2

Analogous

C29B93

C3B394

BBC293

Triadic

C3B394

93C2B3

B393C2

Split-Comp.

C3B394

93BBC2

9B93C2

Tetradic

C3B394

93C29B

93A3C2

C293BB

Contrast Matrix WCAG 2.1 Contrast

C3B394	BCCCA8	DADDC5	FDEDC5	ECD3B9
—	1.2 Fail	1.5 Fail	1.8 Fail	1.4 Fail
1.2 Fail	—	1.2 Fail	1.5 Fail	1.2 Fail
1.5 Fail	1.2 Fail	—	1.2 Fail	1.0 Fail
1.8 Fail	1.5 Fail	1.2 Fail	—	1.2 Fail
1.4 Fail	1.2 Fail	1.0 Fail	1.2 Fail	—

White BG

2.1Fail

1.7Fail

1.4Fail

1.2Fail

1.4Fail

Black BG

10.2AAA

12.3AAA

15.1AAA

18.1AAA

14.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BCBC9C

C3C3B1

DBDBCB

F6F6CF

E1E1BF

Deuteranopia

BDBE9D

C2C1B3

DBDBCC

F7F8D1

E3E5C1

Tritanopia

C2A1A3

BDB8B9

DACFD0

FCD6D8

EBC4C5

Achromatopsia

B4B4B4

C3C3C3

D9D9D9

EDEDED

D8D8D8

Shades & Tints Shades & Tints

#C3B394

Dark

Light

#BCCCA8

Dark

Light

#DADDC5

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c3b394;
  --color-2: #bccca8;
  --color-3: #daddc5;
  --color-4: #fdedc5;
  --color-5: #ecd3b9;
}

SCSS

$color-1: #c3b394;
$color-2: #bccca8;
$color-3: #daddc5;
$color-4: #fdedc5;
$color-5: #ecd3b9;

TAILWIND

colors: {
  'brand-1': '#c3b394',
  'brand-2': '#bccca8',
  'brand-3': '#daddc5',
  'brand-4': '#fdedc5',
  'brand-5': '#ecd3b9',
}

RGB Array

[195, 179, 148], [188, 204, 168], [218, 221, 197], [253, 237, 197], [236, 211, 185]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #C3B394, #BCCCA8, #DADDC5, #FDEDC5, #ECD3B9 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: #c3b394; --color-2: #bccca8; --color-3: #daddc5; --color-4: #fdedc5; --color-5: #ecd3b9. 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