← Back to Editor

#D0D104 · #97A475 · #90706C · #AB4D71 · #E81264

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

#D0D104

Autumn Sage · Gold · Honey Gold

HEX
#D0D104
RGB
rgb(208, 209, 4)
HSL
hsl(60, 96%, 42%)
HSB
hsb(60, 98%, 82%)
CMYK
cmyk(0%, 0%, 98%, 18%)
Oklch
oklch(83.2% 0.181 110.1)

TraditionalAutumn Sage」· PaintHoney Gold」· Creative Blush Sunrise

#97A475

Grass Green · DarkSeaGreen · Olive Green

HEX
#97A475
RGB
rgb(151, 164, 117)
HSL
hsl(77, 21%, 55%)
HSB
hsb(77, 29%, 64%)
CMYK
cmyk(8%, 0%, 29%, 36%)
Oklch
oklch(69.6% 0.067 120.7)

TraditionalGrass Green」· PaintOlive Green」· Creative Blush Sunrise

#90706C

Crimson · Gray · Passion Red

HEX
#90706C
RGB
rgb(144, 112, 108)
HSL
hsl(7, 14%, 49%)
HSB
hsb(7, 25%, 56%)
CMYK
cmyk(0%, 22%, 25%, 44%)
Oklch
oklch(57.5% 0.041 26.6)

TraditionalCrimson」· PaintPassion Red」· Creative Blush Sunrise

#AB4D71

Dark Violet · MediumVioletRed · Camellia

HEX
#AB4D71
RGB
rgb(171, 77, 113)
HSL
hsl(337, 38%, 49%)
HSB
hsb(337, 55%, 67%)
CMYK
cmyk(0%, 55%, 34%, 33%)
Oklch
oklch(55.0% 0.129 358.1)

TraditionalDark Violet」· PaintCamellia」· Creative Blush Sunrise

#E81264

Dark Violet · Crimson · Camellia

HEX
#E81264
RGB
rgb(232, 18, 100)
HSL
hsl(337, 86%, 49%)
HSB
hsb(337, 92%, 91%)
CMYK
cmyk(0%, 92%, 57%, 9%)
Oklch
oklch(60.0% 0.234 8.5)

TraditionalDark Violet」· PaintCamellia」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D0D104
0404D2

Analogous

D26B04
D0D104
6BD204

Triadic

D0D104
04D2D2
D204D2

Split-Comp.

D0D104
046BD2
6B04D2

Tetradic

D0D104
04D26B
0404D2
D2046B

Contrast Matrix WCAG 2.1 Contrast

D0D104
97A475
90706C
AB4D71
E81264
1.6
Fail
2.7
Fail
3.2
AA Large
2.7
Fail
1.6
Fail
1.7
Fail
2.0
Fail
1.7
Fail
2.7
Fail
1.7
Fail
1.2
Fail
1.0
Fail
3.2
AA Large
2.0
Fail
1.2
Fail
1.2
Fail
2.7
Fail
1.7
Fail
1.0
Fail
1.2
Fail
White BG
1.6Fail
2.7Fail
4.4AA Large
5.2AA
4.5AA Large
Black BG
12.8AAA
7.9AAA
4.7AA
4.0AA Large
4.7AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D0D036
9D9D80
82826D
828168
8B8950

Deuteranopia

D0D042
9C9B83
84866D
888F66
98A84B

Tritanopia

D05D65
98898B
8E6E6E
A66160
DD403D

Achromatopsia

B9B9B9
9B9B9B
797979
6D6D6D
5B5B5B

Shades & Tints Shades & Tints

#D0D104

Dark
Light

#97A475

Dark
Light

#90706C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d0d104;
  --color-2: #97a475;
  --color-3: #90706c;
  --color-4: #ab4d71;
  --color-5: #e81264;
}

SCSS

$color-1: #d0d104;
$color-2: #97a475;
$color-3: #90706c;
$color-4: #ab4d71;
$color-5: #e81264;

TAILWIND

colors: {
  'brand-1': '#d0d104',
  'brand-2': '#97a475',
  'brand-3': '#90706c',
  'brand-4': '#ab4d71',
  'brand-5': '#e81264',
}

RGB Array

[208, 209, 4], [151, 164, 117], [144, 112, 108], [171, 77, 113], [232, 18, 100]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D0D104, #97A475, #90706C, #AB4D71, #E81264 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: #d0d104; --color-2: #97a475; --color-3: #90706c; --color-4: #ab4d71; --color-5: #e81264. 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