#A2CBAA + #87615D + #D7DBC4 + #D0A57C + #E77065 · sea - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#A2CBAA

Celadon · DarkGray · Apple Green

HEX

#A2CBAA

RGB

rgb(162, 203, 170)

HSL

hsl(132, 28%, 72%)

HSB

hsb(132, 20%, 80%)

CMYK

cmyk(20%, 0%, 16%, 20%)

Oklch

oklch(80.4% 0.063 150.6)

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

#87615D

Crimson · DimGray · Passion Red

HEX

#87615D

RGB

rgb(135, 97, 93)

HSL

hsl(6, 18%, 45%)

HSB

hsb(6, 31%, 53%)

CMYK

cmyk(0%, 28%, 31%, 47%)

Oklch

oklch(53.1% 0.050 25.7)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

#D7DBC4

Willow Green · LightGray · Mint Green

HEX

#D7DBC4

RGB

rgb(215, 219, 196)

HSL

hsl(70, 24%, 81%)

HSB

hsb(70, 11%, 86%)

CMYK

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

Oklch

oklch(88.2% 0.031 115.0)

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

#D0A57C

Apricot · Tan · Warm Sun

HEX

#D0A57C

RGB

rgb(208, 165, 124)

HSL

hsl(29, 47%, 65%)

HSB

hsb(29, 40%, 82%)

CMYK

cmyk(0%, 21%, 40%, 18%)

Oklch

oklch(75.1% 0.075 64.9)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#E77065

Peach Pink · Salmon · Coral Red

HEX

#E77065

RGB

rgb(231, 112, 101)

HSL

hsl(5, 73%, 65%)

HSB

hsb(5, 56%, 91%)

CMYK

cmyk(0%, 52%, 56%, 9%)

Oklch

oklch(68.3% 0.150 27.1)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A2CBAA

CCA4C4

Analogous

B0CCA4

A2CBAA

A4CCC0

Triadic

A2CBAA

ACA4CC

CCACA4

Split-Comp.

A2CBAA

C0A4CC

CCA4B0

Tetradic

A2CBAA

A4B0CC

CCA4C4

CCC0A4

Contrast Matrix WCAG 2.1 Contrast

A2CBAA	87615D	D7DBC4	D0A57C	E77065
—	3.0 Fail	1.3 Fail	1.2 Fail	1.7 Fail
3.0 Fail	—	3.8 AA Large	2.4 Fail	1.8 Fail
1.3 Fail	3.8 AA Large	—	1.6 Fail	2.1 Fail
1.2 Fail	2.4 Fail	1.6 Fail	—	1.4 Fail
1.7 Fail	1.8 Fail	2.1 Fail	1.4 Fail	—

White BG

1.8Fail

5.4AA

1.4Fail

2.2Fail

3.0AA Large

Black BG

11.7AAA

3.9AA Large

14.8AAA

9.4AAA

6.9AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B4B4B2

77765E

D9D9CA

BDBD86

B3B268

Deuteranopia

B1AEB4

797C5E

D9D8CB

C0C388

BAC368

Tritanopia

A4B8BA

855F5F

D7CECF

CE8E8F

E16A6A

Achromatopsia

BBBBBB

6C6C6C

D7D7D7

ADADAD

929292

Shades & Tints Shades & Tints

#A2CBAA

Dark

Light

#87615D

Dark

Light

#D7DBC4

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a2cbaa;
  --color-2: #87615d;
  --color-3: #d7dbc4;
  --color-4: #d0a57c;
  --color-5: #e77065;
}

SCSS

$color-1: #a2cbaa;
$color-2: #87615d;
$color-3: #d7dbc4;
$color-4: #d0a57c;
$color-5: #e77065;

TAILWIND

colors: {
  'brand-1': '#a2cbaa',
  'brand-2': '#87615d',
  'brand-3': '#d7dbc4',
  'brand-4': '#d0a57c',
  'brand-5': '#e77065',
}

RGB Array

[162, 203, 170], [135, 97, 93], [215, 219, 196], [208, 165, 124], [231, 112, 101]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #A2CBAA, #87615D, #D7DBC4, #D0A57C, #E77065 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: #a2cbaa; --color-2: #87615d; --color-3: #d7dbc4; --color-4: #d0a57c; --color-5: #e77065. 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