#A1E7E4 + #AEDDD8 + #BDCFC6 + #D5D3BA + #E7D2B1 · sea - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#A1E7E4

Jade · LightBlue · Glacier Blue

HEX

#A1E7E4

RGB

rgb(161, 231, 228)

HSL

hsl(177, 59%, 77%)

HSB

hsb(177, 30%, 91%)

CMYK

cmyk(30%, 0%, 1%, 9%)

Oklch

oklch(88.1% 0.070 192.6)

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

#AEDDD8

Jade · LightBlue · Glacier Blue

HEX

#AEDDD8

RGB

rgb(174, 221, 216)

HSL

hsl(174, 41%, 77%)

HSB

hsb(174, 21%, 87%)

CMYK

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

Oklch

oklch(86.3% 0.049 188.3)

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

#BDCFC6

Jade · Silver · Apple Green

HEX

#BDCFC6

RGB

rgb(189, 207, 198)

HSL

hsl(150, 16%, 78%)

HSB

hsb(150, 9%, 81%)

CMYK

cmyk(9%, 0%, 4%, 19%)

Oklch

oklch(83.8% 0.023 164.4)

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

#D5D3BA

Fresh Green · LightGray · Lemon Cream

HEX

#D5D3BA

RGB

rgb(213, 211, 186)

HSL

hsl(56, 24%, 78%)

HSB

hsb(56, 13%, 84%)

CMYK

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

Oklch

oklch(86.2% 0.034 103.3)

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

#E7D2B1

Goose Yellow · Wheat · Peach Orange

HEX

#E7D2B1

RGB

rgb(231, 210, 177)

HSL

hsl(37, 53%, 80%)

HSB

hsb(37, 23%, 91%)

CMYK

cmyk(0%, 9%, 23%, 9%)

Oklch

oklch(87.3% 0.050 79.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A1E7E4

E7A2A5

Analogous

A2E7C1

A1E7E4

A2C8E7

Triadic

A1E7E4

E3A2E7

E7E3A2

Split-Comp.

A1E7E4

E7A2C8

E7C1A2

Tetradic

A1E7E4

C1A2E7

E7A2A5

C8E7A2

Contrast Matrix WCAG 2.1 Contrast

A1E7E4	AEDDD8	BDCFC6	D5D3BA	E7D2B1
—	1.1 Fail	1.2 Fail	1.1 Fail	1.1 Fail
1.1 Fail	—	1.1 Fail	1.0 Fail	1.0 Fail
1.2 Fail	1.1 Fail	—	1.1 Fail	1.1 Fail
1.1 Fail	1.0 Fail	1.1 Fail	—	1.0 Fail
1.1 Fail	1.0 Fail	1.1 Fail	1.0 Fail	—

White BG

1.4Fail

1.5Fail

1.6Fail

1.5Fail

Black BG

15.1AAA

14.1AAA

12.9AAA

13.9AAA

14.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BFC0E5

C2C3D9

C5C5C8

D4D4C0

DEDEB9

Deuteranopia

BBB6E5

C0BCDA

C4C2C9

D4D4C2

DFE1BB

Tritanopia

A5E5E5

B0DADA

BECACA

D5C5C6

E6BFC1

Achromatopsia

D2D2D2

CECECE

C9C9C9

D1D1D1

D5D5D5

Shades & Tints Shades & Tints

#A1E7E4

Dark

Light

#AEDDD8

Dark

Light

#BDCFC6

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a1e7e4;
  --color-2: #aeddd8;
  --color-3: #bdcfc6;
  --color-4: #d5d3ba;
  --color-5: #e7d2b1;
}

SCSS

$color-1: #a1e7e4;
$color-2: #aeddd8;
$color-3: #bdcfc6;
$color-4: #d5d3ba;
$color-5: #e7d2b1;

TAILWIND

colors: {
  'brand-1': '#a1e7e4',
  'brand-2': '#aeddd8',
  'brand-3': '#bdcfc6',
  'brand-4': '#d5d3ba',
  'brand-5': '#e7d2b1',
}

RGB Array

[161, 231, 228], [174, 221, 216], [189, 207, 198], [213, 211, 186], [231, 210, 177]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #A1E7E4, #AEDDD8, #BDCFC6, #D5D3BA, #E7D2B1 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: #a1e7e4; --color-2: #aeddd8; --color-3: #bdcfc6; --color-4: #d5d3ba; --color-5: #e7d2b1. 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