#B7CBBF + #8C886F + #F9A799 + #F4BFAD + #F5DABD · sea - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#B7CBBF

Celadon · Silver · Apple Green

HEX

#B7CBBF

RGB

rgb(183, 203, 191)

HSL

hsl(144, 16%, 76%)

HSB

hsb(144, 10%, 80%)

CMYK

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

Oklch

oklch(82.4% 0.027 159.5)

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

#8C886F

Autumn Sage · Gray · Honey Gold

HEX

#8C886F

RGB

rgb(140, 136, 111)

HSL

hsl(52, 12%, 49%)

HSB

hsb(52, 21%, 55%)

CMYK

cmyk(0%, 3%, 21%, 45%)

Oklch

oklch(62.3% 0.036 99.8)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#F9A799

Peach Pink · LightSalmon · Coral Red

HEX

#F9A799

RGB

rgb(249, 167, 153)

HSL

hsl(9, 89%, 79%)

HSB

hsb(9, 39%, 98%)

CMYK

cmyk(0%, 33%, 39%, 2%)

Oklch

oklch(80.5% 0.100 30.1)

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

#F4BFAD

Apricot · LightPink · Peach Orange

HEX

#F4BFAD

RGB

rgb(244, 191, 173)

HSL

hsl(15, 76%, 82%)

HSB

hsb(15, 29%, 96%)

CMYK

cmyk(0%, 22%, 29%, 4%)

Oklch

oklch(84.7% 0.066 39.6)

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

#F5DABD

Goose Yellow · Wheat · Peach Orange

HEX

#F5DABD

RGB

rgb(245, 218, 189)

HSL

hsl(31, 74%, 85%)

HSB

hsb(31, 23%, 96%)

CMYK

cmyk(0%, 11%, 23%, 4%)

Oklch

oklch(90.3% 0.049 69.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B7CBBF

CCB8C4

Analogous

BACCB8

B7CBBF

B8CCCA

Triadic

B7CBBF

C0B8CC

CCC0B8

Split-Comp.

B7CBBF

CAB8CC

CCB8BA

Tetradic

B7CBBF

B8BACC

CCB8C4

CCCAB8

Contrast Matrix WCAG 2.1 Contrast

B7CBBF	8C886F	F9A799	F4BFAD	F5DABD
—	2.1 Fail	1.1 Fail	1.0 Fail	1.3 Fail
2.1 Fail	—	1.9 Fail	2.2 Fail	2.7 Fail
1.1 Fail	1.9 Fail	—	1.2 Fail	1.4 Fail
1.0 Fail	2.2 Fail	1.2 Fail	—	1.2 Fail
1.3 Fail	2.7 Fail	1.4 Fail	1.2 Fail	—

White BG

1.7Fail

3.6AA Large

1.9Fail

1.6Fail

1.3Fail

Black BG

12.3AAA

5.9AA

11.0AAA

12.9AAA

15.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C0C0C2

8A8A75

D5D59C

DDDDB1

E9E9C4

Deuteranopia

BFBDC3

8B8B76

DAE09D

E0E4B2

EBEDC6

Tritanopia

B8C4C5

8C7A7B

F59FA0

F1B5B6

F4CACB

Achromatopsia

C4C4C4

868686

BEBEBE

CDCDCD

DFDFDF

Shades & Tints Shades & Tints

#B7CBBF

Dark

Light

#8C886F

Dark

Light

#F9A799

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b7cbbf;
  --color-2: #8c886f;
  --color-3: #f9a799;
  --color-4: #f4bfad;
  --color-5: #f5dabd;
}

SCSS

$color-1: #b7cbbf;
$color-2: #8c886f;
$color-3: #f9a799;
$color-4: #f4bfad;
$color-5: #f5dabd;

TAILWIND

colors: {
  'brand-1': '#b7cbbf',
  'brand-2': '#8c886f',
  'brand-3': '#f9a799',
  'brand-4': '#f4bfad',
  'brand-5': '#f5dabd',
}

RGB Array

[183, 203, 191], [140, 136, 111], [249, 167, 153], [244, 191, 173], [245, 218, 189]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #B7CBBF, #8C886F, #F9A799, #F4BFAD, #F5DABD 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: #b7cbbf; --color-2: #8c886f; --color-3: #f9a799; --color-4: #f4bfad; --color-5: #f5dabd. 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