#B6D2DD + #FCE8C3 + #E3D5BA + #B48F97 + #98B6BE · sea - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#B6D2DD

Sky Blue · LightBlue · Glacier Blue

HEX

#B6D2DD

RGB

rgb(182, 210, 221)

HSL

hsl(197, 36%, 79%)

HSB

hsb(197, 18%, 87%)

CMYK

cmyk(18%, 5%, 0%, 13%)

Oklch

oklch(84.7% 0.034 223.5)

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

#FCE8C3

Goose Yellow · Bisque · Peach Orange

HEX

#FCE8C3

RGB

rgb(252, 232, 195)

HSL

hsl(39, 90%, 88%)

HSB

hsb(39, 23%, 99%)

CMYK

cmyk(0%, 8%, 23%, 1%)

Oklch

oklch(93.8% 0.053 82.9)

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

#E3D5BA

Goose Yellow · Wheat · Lemon Cream

HEX

#E3D5BA

RGB

rgb(227, 213, 186)

HSL

hsl(40, 42%, 81%)

HSB

hsb(40, 18%, 89%)

CMYK

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

Oklch

oklch(87.7% 0.039 83.8)

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

#B48F97

Peach Pink · DarkGray · Coral Red

HEX

#B48F97

RGB

rgb(180, 143, 151)

HSL

hsl(347, 20%, 63%)

HSB

hsb(347, 21%, 71%)

CMYK

cmyk(0%, 21%, 16%, 29%)

Oklch

oklch(68.7% 0.046 3.9)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#98B6BE

Sky Blue · DarkGray · Lake Green

HEX

#98B6BE

RGB

rgb(152, 182, 190)

HSL

hsl(193, 23%, 67%)

HSB

hsb(193, 20%, 75%)

CMYK

cmyk(20%, 4%, 0%, 25%)

Oklch

oklch(75.6% 0.035 215.7)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B6D2DD

DDC1B6

Analogous

B6DDD4

B6D2DD

B6BFDD

Triadic

B6D2DD

DDB6D2

D2DDB6

Split-Comp.

B6D2DD

DDB6BF

DDD4B6

Tetradic

B6D2DD

D4B6DD

DDC1B6

BFDDB6

Contrast Matrix WCAG 2.1 Contrast

B6D2DD	FCE8C3	E3D5BA	B48F97	98B6BE
—	1.3 Fail	1.1 Fail	1.8 Fail	1.4 Fail
1.3 Fail	—	1.2 Fail	2.4 Fail	1.8 Fail
1.1 Fail	1.2 Fail	—	2.0 Fail	1.5 Fail
1.8 Fail	2.4 Fail	2.0 Fail	—	1.3 Fail
1.4 Fail	1.8 Fail	1.5 Fail	1.3 Fail	—

White BG

1.6Fail

1.2Fail

1.4Fail

2.9Fail

2.1Fail

Black BG

13.3AAA

17.5AAA

14.5AAA

7.3AAA

9.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C2C2DA

F3F3CC

DDDDC1

A4A495

A5A5BC

Deuteranopia

C1BEDA

F5F6CE

DEDFC2

A6A995

A3A1BC

Tritanopia

B7D8D8

FBD3D5

E2C6C7

B29493

9ABBBA

Achromatopsia

CBCBCB

EAEAEA

D6D6D6

9B9B9B

AEAEAE

Shades & Tints Shades & Tints

#B6D2DD

Dark

Light

#FCE8C3

Dark

Light

#E3D5BA

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b6d2dd;
  --color-2: #fce8c3;
  --color-3: #e3d5ba;
  --color-4: #b48f97;
  --color-5: #98b6be;
}

SCSS

$color-1: #b6d2dd;
$color-2: #fce8c3;
$color-3: #e3d5ba;
$color-4: #b48f97;
$color-5: #98b6be;

TAILWIND

colors: {
  'brand-1': '#b6d2dd',
  'brand-2': '#fce8c3',
  'brand-3': '#e3d5ba',
  'brand-4': '#b48f97',
  'brand-5': '#98b6be',
}

RGB Array

[182, 210, 221], [252, 232, 195], [227, 213, 186], [180, 143, 151], [152, 182, 190]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #B6D2DD, #FCE8C3, #E3D5BA, #B48F97, #98B6BE 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: #b6d2dd; --color-2: #fce8c3; --color-3: #e3d5ba; --color-4: #b48f97; --color-5: #98b6be. 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