← Back to Editor

#D4B704 · #D7D8B0 · #CB5893 · #E07DAC · #9FC6B1

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#D4B704

Autumn Sage · GoldenRod · Honey Gold

HEX
#D4B704
RGB
rgb(212, 183, 4)
HSL
hsl(52, 96%, 42%)
HSB
hsb(52, 98%, 83%)
CMYK
cmyk(0%, 14%, 98%, 17%)
Oklch
oklch(78.1% 0.161 97.6)

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

#D7D8B0

Fresh Green · Wheat · Lemon Cream

HEX
#D7D8B0
RGB
rgb(215, 216, 176)
HSL
hsl(61, 34%, 77%)
HSB
hsb(61, 19%, 85%)
CMYK
cmyk(0%, 0%, 19%, 15%)
Oklch
oklch(87.1% 0.053 108.6)

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

#CB5893

Rose Purple · LightCoral · Rose Pink

HEX
#CB5893
RGB
rgb(203, 88, 147)
HSL
hsl(329, 53%, 57%)
HSB
hsb(329, 57%, 80%)
CMYK
cmyk(0%, 57%, 28%, 20%)
Oklch
oklch(62.3% 0.159 350.8)

Traditional「Rose Purple」· Paint「Rose Pink」· Creative Blush Sunrise

#E07DAC

Rouge · Orchid · Rose Pink

HEX
#E07DAC
RGB
rgb(224, 125, 172)
HSL
hsl(332, 61%, 68%)
HSB
hsb(332, 44%, 88%)
CMYK
cmyk(0%, 44%, 23%, 12%)
Oklch
oklch(71.2% 0.134 351.2)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

#9FC6B1

Celadon · DarkGray · Apple Green

HEX
#9FC6B1
RGB
rgb(159, 198, 177)
HSL
hsl(148, 25%, 70%)
HSB
hsb(148, 20%, 78%)
CMYK
cmyk(20%, 0%, 11%, 22%)
Oklch
oklch(79.2% 0.051 161.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D4B704
0420D2

Analogous

D25004
D4B704
87D204

Triadic

D4B704
04D2B6
B604D2

Split-Comp.

D4B704
0487D2
5004D2

Tetradic

D4B704
04D250
0420D2
D20487

Contrast Matrix WCAG 2.1 Contrast

D4B704
D7D8B0
CB5893
E07DAC
9FC6B1
—
1.4
Fail
2.0
Fail
1.4
Fail
1.1
Fail
1.4
Fail
—
2.7
Fail
1.9
Fail
1.3
Fail
2.0
Fail
2.7
Fail
—
1.4
Fail
2.1
Fail
1.4
Fail
1.9
Fail
1.4
Fail
—
1.5
Fail
1.1
Fail
1.3
Fail
2.1
Fail
1.5
Fail
—
White BG
2.0Fail
1.5Fail
3.9AA Large
2.7Fail
1.9Fail
Black BG
10.6AAA
14.3AAA
5.4AA
7.7AAA
11.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C7C72F
D7D7BA
999885
B5B4A1
B0B0B6

Deuteranopia

C9CB3A
D7D7BC
A0A981
BBC29E
AEABB7

Tritanopia

D35259
D7C1C3
C57977
DB9896
A1BABB

Achromatopsia

ABABAB
D3D3D3
818181
A0A0A0
B8B8B8

Shades & Tints Shades & Tints

#D4B704

Dark
Light

#D7D8B0

Dark
Light

#CB5893

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d4b704;
  --color-2: #d7d8b0;
  --color-3: #cb5893;
  --color-4: #e07dac;
  --color-5: #9fc6b1;
}

SCSS

$color-1: #d4b704;
$color-2: #d7d8b0;
$color-3: #cb5893;
$color-4: #e07dac;
$color-5: #9fc6b1;

TAILWIND

colors: {
  'brand-1': '#d4b704',
  'brand-2': '#d7d8b0',
  'brand-3': '#cb5893',
  'brand-4': '#e07dac',
  'brand-5': '#9fc6b1',
}

RGB Array

[212, 183, 4], [215, 216, 176], [203, 88, 147], [224, 125, 172], [159, 198, 177]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D4B704, #D7D8B0, #CB5893, #E07DAC, #9FC6B1 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: #d4b704; --color-2: #d7d8b0; --color-3: #cb5893; --color-4: #e07dac; --color-5: #9fc6b1. 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 general-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