← Back to Editor

#DCBC81 · #C6BD86 · #BAAA6E · #889470 · #516C67

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 Library

Color Details Color Details

#DCBC81

Ginger · BurlyWood · Warm Sun

HEX
#DCBC81
RGB
rgb(220, 188, 129)
HSL
hsl(39, 57%, 68%)
HSB
hsb(39, 41%, 86%)
CMYK
cmyk(0%, 15%, 41%, 14%)
Oklch
oklch(80.9% 0.085 82.3)

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

#C6BD86

Fresh Green · Tan · Sunflower

HEX
#C6BD86
RGB
rgb(198, 189, 134)
HSL
hsl(52, 36%, 65%)
HSB
hsb(52, 32%, 78%)
CMYK
cmyk(0%, 5%, 32%, 22%)
Oklch
oklch(79.3% 0.073 100.0)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#BAAA6E

Ginger · Tan · Sunflower

HEX
#BAAA6E
RGB
rgb(186, 170, 110)
HSL
hsl(47, 36%, 58%)
HSB
hsb(47, 41%, 73%)
CMYK
cmyk(0%, 9%, 41%, 27%)
Oklch
oklch(73.8% 0.081 95.0)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#889470

Grass Green · Gray · Olive Green

HEX
#889470
RGB
rgb(136, 148, 112)
HSL
hsl(80, 14%, 51%)
HSB
hsb(80, 24%, 58%)
CMYK
cmyk(8%, 0%, 24%, 42%)
Oklch
oklch(64.7% 0.053 122.9)

Traditional「Grass Green」· Paint「Olive Green」· Creative Blush Sunrise

#516C67

Mineral Blue · DimGray · Mint Ice

HEX
#516C67
RGB
rgb(81, 108, 103)
HSL
hsl(169, 14%, 37%)
HSB
hsb(169, 25%, 42%)
CMYK
cmyk(25%, 0%, 5%, 58%)
Oklch
oklch(50.8% 0.033 182.3)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DCBC81
7F9FDC

Analogous

DC8D7F
DCBC81
CEDC7F

Triadic

DCBC81
7FDCBB
BB7FDC

Split-Comp.

DCBC81
7FCEDC
8D7FDC

Tetradic

DCBC81
7FDC8D
7F9FDC
DC7FCE

Contrast Matrix WCAG 2.1 Contrast

DCBC81
C6BD86
BAAA6E
889470
516C67
—
1.0
Fail
1.3
Fail
1.8
Fail
3.1
AA Large
1.0
Fail
—
1.2
Fail
1.7
Fail
3.0
Fail
1.3
Fail
1.2
Fail
—
1.4
Fail
2.5
Fail
1.8
Fail
1.7
Fail
1.4
Fail
—
1.8
Fail
3.1
AA Large
3.0
Fail
2.5
Fail
1.8
Fail
—
White BG
1.8Fail
1.9Fail
2.3Fail
3.2AA Large
5.7AA
Black BG
11.6AAA
11.0AAA
9.1AAA
6.5AA
3.7AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

CECE8F
C2C293
B3B37D
8D8D79
5D5D68

Deuteranopia

D0D293
C3C397
B4B580
8D8C7B
5B5969

Tritanopia

DA9B9D
C69EA0
B9888B
898081
526969

Achromatopsia

BFBFBF
B9B9B9
A8A8A8
8C8C8C
636363

Shades & Tints Shades & Tints

#DCBC81

Dark
Light

#C6BD86

Dark
Light

#BAAA6E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #dcbc81;
  --color-2: #c6bd86;
  --color-3: #baaa6e;
  --color-4: #889470;
  --color-5: #516c67;
}

SCSS

$color-1: #dcbc81;
$color-2: #c6bd86;
$color-3: #baaa6e;
$color-4: #889470;
$color-5: #516c67;

TAILWIND

colors: {
  'brand-1': '#dcbc81',
  'brand-2': '#c6bd86',
  'brand-3': '#baaa6e',
  'brand-4': '#889470',
  'brand-5': '#516c67',
}

RGB Array

[220, 188, 129], [198, 189, 134], [186, 170, 110], [136, 148, 112], [81, 108, 103]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #DCBC81, #C6BD86, #BAAA6E, #889470, #516C67 is ideal for: corporate websites, product showcases, portfolios. 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: #dcbc81; --color-2: #c6bd86; --color-3: #baaa6e; --color-4: #889470; --color-5: #516c67. 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. 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