#B9AFA5 + #D3B497 + #DFA796 + #F4A49D + #63C3B8 · sea - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#B9AFA5

Ginger · DarkGray · Warm Sun

HEX

#B9AFA5

RGB

rgb(185, 175, 165)

HSL

hsl(30, 12%, 69%)

HSB

hsb(30, 11%, 73%)

CMYK

cmyk(0%, 5%, 11%, 27%)

Oklch

oklch(76.0% 0.018 67.5)

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

#D3B497

Apricot · Tan · Warm Sun

HEX

#D3B497

RGB

rgb(211, 180, 151)

HSL

hsl(29, 41%, 71%)

HSB

hsb(29, 28%, 83%)

CMYK

cmyk(0%, 15%, 28%, 17%)

Oklch

oklch(79.0% 0.053 65.0)

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

#DFA796

Peach Pink · Tan · Coral Red

HEX

#DFA796

RGB

rgb(223, 167, 150)

HSL

hsl(14, 53%, 73%)

HSB

hsb(14, 33%, 87%)

CMYK

cmyk(0%, 25%, 33%, 13%)

Oklch

oklch(77.6% 0.071 37.6)

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

#F4A49D

Peach Pink · LightSalmon · Coral Red

HEX

#F4A49D

RGB

rgb(244, 164, 157)

HSL

hsl(5, 80%, 79%)

HSB

hsb(5, 36%, 96%)

CMYK

cmyk(0%, 33%, 36%, 4%)

Oklch

oklch(79.5% 0.096 25.0)

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

#63C3B8

Mineral Blue · MediumAquaMarine · Lake Green

HEX

#63C3B8

RGB

rgb(99, 195, 184)

HSL

hsl(173, 44%, 58%)

HSB

hsb(173, 49%, 76%)

CMYK

cmyk(49%, 0%, 6%, 24%)

Oklch

oklch(75.6% 0.093 185.7)

Traditional「Mineral Blue」· Paint「Lake Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B9AFA5

A6B0B9

Analogous

B9A6A6

B9AFA5

B9B9A6

Triadic

B9AFA5

A6B9B0

B0A6B9

Split-Comp.

B9AFA5

A6B9B9

A6A6B9

Tetradic

B9AFA5

A6B9A6

A6B0B9

B9A6B9

Contrast Matrix WCAG 2.1 Contrast

B9AFA5	D3B497	DFA796	F4A49D	63C3B8
—	1.1 Fail	1.0 Fail	1.1 Fail	1.0 Fail
1.1 Fail	—	1.1 Fail	1.0 Fail	1.1 Fail
1.0 Fail	1.1 Fail	—	1.1 Fail	1.0 Fail
1.1 Fail	1.0 Fail	1.1 Fail	—	1.1 Fail
1.0 Fail	1.1 Fail	1.0 Fail	1.1 Fail	—

White BG

2.2Fail

2.0Fail

2.1Fail

2.0Fail

2.1Fail

Black BG

9.7AAA

10.7AAA

10.1AAA

10.6AAA

10.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B5B5A7

C6C59E

C7C69A

D1D19F

8D8DBB

Deuteranopia

B5B6A8

C7CAA0

CACE9B

D6DC9F

8780BB

Tritanopia

B9A9AA

D1A4A5

DC9D9E

F0A0A0

68BDBD

Achromatopsia

B1B1B1

BABABA

B6B6B6

BBBBBB

A5A5A5

Shades & Tints Shades & Tints

#B9AFA5

Dark

Light

#D3B497

Dark

Light

#DFA796

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b9afa5;
  --color-2: #d3b497;
  --color-3: #dfa796;
  --color-4: #f4a49d;
  --color-5: #63c3b8;
}

SCSS

$color-1: #b9afa5;
$color-2: #d3b497;
$color-3: #dfa796;
$color-4: #f4a49d;
$color-5: #63c3b8;

TAILWIND

colors: {
  'brand-1': '#b9afa5',
  'brand-2': '#d3b497',
  'brand-3': '#dfa796',
  'brand-4': '#f4a49d',
  'brand-5': '#63c3b8',
}

RGB Array

[185, 175, 165], [211, 180, 151], [223, 167, 150], [244, 164, 157], [99, 195, 184]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #B9AFA5, #D3B497, #DFA796, #F4A49D, #63C3B8 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: #b9afa5; --color-2: #d3b497; --color-3: #dfa796; --color-4: #f4a49d; --color-5: #63c3b8. 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