← Back to Editor

#D7C9AF · #BDA99E · #778D8A · #4B6272 · #1B2F38

sea

A 5-color sea palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#D7C9AF

Goose Yellow · Silver · Peach Orange

HEX
#D7C9AF
RGB
rgb(215, 201, 175)
HSL
hsl(39, 33%, 76%)
HSB
hsb(39, 19%, 84%)
CMYK
cmyk(0%, 7%, 19%, 16%)
Oklch
oklch(84.1% 0.038 83.0)

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

#BDA99E

Apricot · DarkGray · Warm Sun

HEX
#BDA99E
RGB
rgb(189, 169, 158)
HSL
hsl(21, 19%, 68%)
HSB
hsb(21, 16%, 74%)
CMYK
cmyk(0%, 11%, 16%, 26%)
Oklch
oklch(74.9% 0.028 50.7)

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

#778D8A

Mineral Blue · LightSlateGray · Warm Gray

HEX
#778D8A
RGB
rgb(119, 141, 138)
HSL
hsl(172, 9%, 51%)
HSB
hsb(172, 16%, 55%)
CMYK
cmyk(16%, 0%, 2%, 45%)
Oklch
oklch(62.5% 0.026 186.5)

Traditional「Mineral Blue」· Paint「Warm Gray」· Creative Urban Concrete

#4B6272

Slate Blue · DimGray · Prussian Blue

HEX
#4B6272
RGB
rgb(75, 98, 114)
HSL
hsl(205, 21%, 37%)
HSB
hsb(205, 34%, 45%)
CMYK
cmyk(34%, 14%, 0%, 55%)
Oklch
oklch(48.4% 0.038 238.9)

Traditional「Slate Blue」· Paint「Prussian Blue」· Creative Blush Sunrise

#1B2F38

Slate Blue · DarkSlateGray · Peacock Green

HEX
#1B2F38
RGB
rgb(27, 47, 56)
HSL
hsl(199, 35%, 16%)
HSB
hsb(199, 52%, 22%)
CMYK
cmyk(52%, 16%, 0%, 78%)
Oklch
oklch(29.2% 0.031 228.2)

Traditional「Slate Blue」· Paint「Peacock Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D7C9AF
AEBCD6

Analogous

D6B4AE
D7C9AF
D0D6AE

Triadic

D7C9AF
AED6C8
C8AED6

Split-Comp.

D7C9AF
AED0D6
B4AED6

Tetradic

D7C9AF
AED6B4
AEBCD6
D6AED0

Contrast Matrix WCAG 2.1 Contrast

D7C9AF
BDA99E
778D8A
4B6272
1B2F38
—
1.4
Fail
2.2
Fail
3.9
AA Large
8.5
AAA
1.4
Fail
—
1.6
Fail
2.8
Fail
6.2
AA
2.2
Fail
1.6
Fail
—
1.8
Fail
3.9
AA Large
3.9
AA Large
2.8
Fail
1.8
Fail
—
2.2
Fail
8.5
AAA
6.2
AA
3.9
AA Large
2.2
Fail
—
White BG
1.6Fail
2.3Fail
3.5AA Large
6.4AA
13.9AAA
Black BG
12.9AAA
9.3AAA
6.0AA
3.3AA Large
1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

D1D1B5
B4B4A1
81818B
55556E
242436

Deuteranopia

D2D3B7
B6B7A1
7F7E8B
54526D
232135

Tritanopia

D6BABB
BCA3A3
788B8B
4C6B6A
1C3434

Achromatopsia

CACACA
AEAEAE
868686
5D5D5D
2A2A2A

Shades & Tints Shades & Tints

#D7C9AF

Dark
Light

#BDA99E

Dark
Light

#778D8A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d7c9af;
  --color-2: #bda99e;
  --color-3: #778d8a;
  --color-4: #4b6272;
  --color-5: #1b2f38;
}

SCSS

$color-1: #d7c9af;
$color-2: #bda99e;
$color-3: #778d8a;
$color-4: #4b6272;
$color-5: #1b2f38;

TAILWIND

colors: {
  'brand-1': '#d7c9af',
  'brand-2': '#bda99e',
  'brand-3': '#778d8a',
  'brand-4': '#4b6272',
  'brand-5': '#1b2f38',
}

RGB Array

[215, 201, 175], [189, 169, 158], [119, 141, 138], [75, 98, 114], [27, 47, 56]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #D7C9AF, #BDA99E, #778D8A, #4B6272, #1B2F38 is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #d7c9af; --color-2: #bda99e; --color-3: #778d8a; --color-4: #4b6272; --color-5: #1b2f38. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. High-contrast palettes naturally meet WCAG accessibility standards. 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. Restrained colors convey professionalism and trust. 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