#B7E6D6 + #D1CBBB + #DF8AA9 + #FAA4A3 + #F6D6CB · sea - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#B7E6D6

Jade · LightBlue · Glacier Blue

HEX

#B7E6D6

RGB

rgb(183, 230, 214)

HSL

hsl(160, 48%, 81%)

HSB

hsb(160, 20%, 90%)

CMYK

cmyk(20%, 0%, 7%, 10%)

Oklch

oklch(88.7% 0.053 172.3)

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

#D1CBBB

Goose Yellow · Silver · Lemon Cream

HEX

#D1CBBB

RGB

rgb(209, 203, 187)

HSL

hsl(44, 19%, 78%)

HSB

hsb(44, 11%, 82%)

CMYK

cmyk(0%, 3%, 11%, 18%)

Oklch

oklch(84.3% 0.023 89.8)

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

#DF8AA9

Rouge · LightCoral · Rose Pink

HEX

#DF8AA9

RGB

rgb(223, 138, 169)

HSL

hsl(338, 57%, 71%)

HSB

hsb(338, 38%, 87%)

CMYK

cmyk(0%, 38%, 24%, 13%)

Oklch

oklch(73.0% 0.110 356.8)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

#FAA4A3

Peach Pink · LightPink · Cherry Blossom

HEX

#FAA4A3

RGB

rgb(250, 164, 163)

HSL

hsl(1, 90%, 81%)

HSB

hsb(1, 35%, 98%)

CMYK

cmyk(0%, 34%, 35%, 2%)

Oklch

oklch(80.3% 0.102 20.3)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

#F6D6CB

Apricot · Bisque · Peach Orange

HEX

#F6D6CB

RGB

rgb(246, 214, 203)

HSL

hsl(15, 70%, 88%)

HSB

hsb(15, 17%, 96%)

CMYK

cmyk(0%, 13%, 17%, 4%)

Oklch

oklch(90.0% 0.039 39.9)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B7E6D6

E6B7C7

Analogous

B7E6BF

B7E6D6

B7DEE6

Triadic

B7E6D6

D6B7E6

E6D6B7

Split-Comp.

B7E6D6

E6B7DE

E6BFB7

Tetradic

B7E6D6

BFB7E6

E6B7C7

DEE6B7

Contrast Matrix WCAG 2.1 Contrast

B7E6D6	D1CBBB	DF8AA9	FAA4A3	F6D6CB
—	1.2 Fail	1.8 Fail	1.4 Fail	1.0 Fail
1.2 Fail	—	1.6 Fail	1.2 Fail	1.2 Fail
1.8 Fail	1.6 Fail	—	1.3 Fail	1.8 Fail
1.4 Fail	1.2 Fail	1.3 Fail	—	1.4 Fail
1.0 Fail	1.2 Fail	1.8 Fail	1.4 Fail	—

White BG

1.4Fail

1.6Fail

2.5Fail

1.9Fail

1.4Fail

Black BG

15.3AAA

13.0AAA

8.3AAA

10.9AAA

15.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CBCCDA

CECEBF

BAB9A1

D5D4A3

E8E8CE

Deuteranopia

C9C5DB

CFCFC0

BFC6A0

DAE0A3

EAECCE

Tritanopia

B9DDDE

D1C2C3

DB9C9A

F6A3A3

F4D0D0

Achromatopsia

D6D6D6

CBCBCB

A7A7A7

BEBEBE

DEDEDE

Shades & Tints Shades & Tints

#B7E6D6

Dark

Light

#D1CBBB

Dark

Light

#DF8AA9

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b7e6d6;
  --color-2: #d1cbbb;
  --color-3: #df8aa9;
  --color-4: #faa4a3;
  --color-5: #f6d6cb;
}

SCSS

$color-1: #b7e6d6;
$color-2: #d1cbbb;
$color-3: #df8aa9;
$color-4: #faa4a3;
$color-5: #f6d6cb;

TAILWIND

colors: {
  'brand-1': '#b7e6d6',
  'brand-2': '#d1cbbb',
  'brand-3': '#df8aa9',
  'brand-4': '#faa4a3',
  'brand-5': '#f6d6cb',
}

RGB Array

[183, 230, 214], [209, 203, 187], [223, 138, 169], [250, 164, 163], [246, 214, 203]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #B7E6D6, #D1CBBB, #DF8AA9, #FAA4A3, #F6D6CB 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: #b7e6d6; --color-2: #d1cbbb; --color-3: #df8aa9; --color-4: #faa4a3; --color-5: #f6d6cb. 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