#A4DCD6 + #BDD8CD + #CCD7C4 + #DBCDBC + #ECD3B9 · sea - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#A4DCD6

Jade · LightBlue · Lake Green

HEX

#A4DCD6

RGB

rgb(164, 220, 214)

HSL

hsl(174, 44%, 75%)

HSB

hsb(174, 25%, 86%)

CMYK

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

Oklch

oklch(85.4% 0.058 187.9)

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

#BDD8CD

Jade · LightGray · Apple Green

HEX

#BDD8CD

RGB

rgb(189, 216, 205)

HSL

hsl(156, 26%, 79%)

HSB

hsb(156, 12%, 85%)

CMYK

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

Oklch

oklch(85.9% 0.033 169.1)

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

#CCD7C4

Celadon · LightGray · Mint Green

HEX

#CCD7C4

RGB

rgb(204, 215, 196)

HSL

hsl(95, 19%, 81%)

HSB

hsb(95, 9%, 84%)

CMYK

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

Oklch

oklch(86.6% 0.028 131.8)

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

#DBCDBC

Goose Yellow · LightGray · Peach Orange

HEX

#DBCDBC

RGB

rgb(219, 205, 188)

HSL

hsl(33, 30%, 80%)

HSB

hsb(33, 14%, 86%)

CMYK

cmyk(0%, 6%, 14%, 14%)

Oklch

oklch(85.5% 0.028 72.8)

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

#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

A4DCD6

DBA3A9

Analogous

A3DBBA

A4DCD6

A3C5DB

Triadic

A4DCD6

D6A3DB

DBD6A3

Split-Comp.

A4DCD6

DBA3C5

DBBAA3

Tetradic

A4DCD6

BAA3DB

DBA3A9

C5DBA3

Contrast Matrix WCAG 2.1 Contrast

A4DCD6	BDD8CD	CCD7C4	DBCDBC	ECD3B9
—	1.0 Fail	1.0 Fail	1.0 Fail	1.1 Fail
1.0 Fail	—	1.0 Fail	1.0 Fail	1.1 Fail
1.0 Fail	1.0 Fail	—	1.0 Fail	1.0 Fail
1.0 Fail	1.0 Fail	1.0 Fail	—	1.1 Fail
1.1 Fail	1.1 Fail	1.0 Fail	1.1 Fail	—

White BG

1.5Fail

1.6Fail

1.4Fail

Black BG

13.8AAA

13.9AAA

14.1AAA

13.5AAA

14.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BCBDD7

C9C9D0

D1D1C9

D5D5C0

E1E1BF

Deuteranopia

B9B5D8

C7C5D0

D0CFCA

D6D7C1

E3E5C1

Tritanopia

A7D9D9

BED2D2

CDCCCD

DAC3C4

EBC4C5

Achromatopsia

CBCBCB

CFCFCF

D2D2D2

CFCFCF

D8D8D8

Shades & Tints Shades & Tints

#A4DCD6

Dark

Light

#BDD8CD

Dark

Light

#CCD7C4

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a4dcd6;
  --color-2: #bdd8cd;
  --color-3: #ccd7c4;
  --color-4: #dbcdbc;
  --color-5: #ecd3b9;
}

SCSS

$color-1: #a4dcd6;
$color-2: #bdd8cd;
$color-3: #ccd7c4;
$color-4: #dbcdbc;
$color-5: #ecd3b9;

TAILWIND

colors: {
  'brand-1': '#a4dcd6',
  'brand-2': '#bdd8cd',
  'brand-3': '#ccd7c4',
  'brand-4': '#dbcdbc',
  'brand-5': '#ecd3b9',
}

RGB Array

[164, 220, 214], [189, 216, 205], [204, 215, 196], [219, 205, 188], [236, 211, 185]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #A4DCD6, #BDD8CD, #CCD7C4, #DBCDBC, #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: #a4dcd6; --color-2: #bdd8cd; --color-3: #ccd7c4; --color-4: #dbcdbc; --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