#D4C369 + #8B5742 + #A65E49 + #BF5C5A + #DC5564 · sea - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#D4C369

Fresh Green · BurlyWood · Sunflower

HEX

#D4C369

RGB

rgb(212, 195, 105)

HSL

hsl(50, 55%, 62%)

HSB

hsb(50, 50%, 83%)

CMYK

cmyk(0%, 8%, 50%, 17%)

Oklch

oklch(81.3% 0.113 98.8)

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

#8B5742

Tangerine · Sienna · Amber Brown

HEX

#8B5742

RGB

rgb(139, 87, 66)

HSL

hsl(17, 36%, 40%)

HSB

hsb(17, 53%, 55%)

CMYK

cmyk(0%, 37%, 53%, 45%)

Oklch

oklch(51.0% 0.076 42.7)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

#A65E49

Crimson · Sienna · Passion Red

HEX

#A65E49

RGB

rgb(166, 94, 73)

HSL

hsl(14, 39%, 47%)

HSB

hsb(14, 56%, 65%)

CMYK

cmyk(0%, 43%, 56%, 35%)

Oklch

oklch(56.0% 0.100 37.1)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

#BF5C5A

Crimson · Sienna · Passion Red

HEX

#BF5C5A

RGB

rgb(191, 92, 90)

HSL

hsl(1, 44%, 55%)

HSB

hsb(1, 53%, 75%)

CMYK

cmyk(0%, 52%, 53%, 25%)

Oklch

oklch(59.5% 0.128 22.9)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

#DC5564

Vermilion · Tomato · Passion Red

HEX

#DC5564

RGB

rgb(220, 85, 100)

HSL

hsl(353, 66%, 60%)

HSB

hsb(353, 61%, 86%)

CMYK

cmyk(0%, 61%, 55%, 14%)

Oklch

oklch(63.0% 0.169 16.8)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D4C369

697BD3

Analogous

D38C69

D4C369

B0D369

Triadic

D4C369

69D3C2

C269D3

Split-Comp.

D4C369

69B0D3

8C69D3

Tetradic

D4C369

69D38C

697BD3

D369B0

Contrast Matrix WCAG 2.1 Contrast

D4C369	8B5742	A65E49	BF5C5A	DC5564
—	3.3 AA Large	2.7 Fail	2.4 Fail	2.1 Fail
3.3 AA Large	—	1.2 Fail	1.4 Fail	1.6 Fail
2.7 Fail	1.2 Fail	—	1.1 Fail	1.3 Fail
2.4 Fail	1.4 Fail	1.1 Fail	—	1.1 Fail
2.1 Fail	1.6 Fail	1.3 Fail	1.1 Fail	—

White BG

1.8Fail

5.9AA

4.9AA

4.3AA Large

3.8AA Large

Black BG

11.8AAA

3.5AA Large

4.3AA Large

4.9AA

5.5AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CDCC7F

747447

87864E

94935A

A2A060

Deuteranopia

CECF84

787B48

8B904F

9AA15B

A9B460

Tritanopia

D39094

884B4C

A25253

BA5B5B

D55E5D

Achromatopsia

BEBEBE

646464

717171

797979

7F7F7F

Shades & Tints Shades & Tints

#D4C369

Dark

Light

#8B5742

Dark

Light

#A65E49

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d4c369;
  --color-2: #8b5742;
  --color-3: #a65e49;
  --color-4: #bf5c5a;
  --color-5: #dc5564;
}

SCSS

$color-1: #d4c369;
$color-2: #8b5742;
$color-3: #a65e49;
$color-4: #bf5c5a;
$color-5: #dc5564;

TAILWIND

colors: {
  'brand-1': '#d4c369',
  'brand-2': '#8b5742',
  'brand-3': '#a65e49',
  'brand-4': '#bf5c5a',
  'brand-5': '#dc5564',
}

RGB Array

[212, 195, 105], [139, 87, 66], [166, 94, 73], [191, 92, 90], [220, 85, 100]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sea-style palette of #D4C369, #8B5742, #A65E49, #BF5C5A, #DC5564 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: #d4c369; --color-2: #8b5742; --color-3: #a65e49; --color-4: #bf5c5a; --color-5: #dc5564. 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