← Back to Editor

#D76251 · #AD554A · #B59544 · #CCB760 · #EDCC82

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

#D76251

Vermilion · Tomato · Passion Red

HEX
#D76251
RGB
rgb(215, 98, 81)
HSL
hsl(8, 63%, 58%)
HSB
hsb(8, 62%, 84%)
CMYK
cmyk(0%, 54%, 62%, 16%)
Oklch
oklch(63.7% 0.151 30.2)

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

#AD554A

Crimson · Sienna · Passion Red

HEX
#AD554A
RGB
rgb(173, 85, 74)
HSL
hsl(7, 40%, 48%)
HSB
hsb(7, 57%, 68%)
CMYK
cmyk(0%, 51%, 57%, 32%)
Oklch
oklch(55.5% 0.117 28.7)

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

#B59544

Ochre · GoldenRod · Honey Gold

HEX
#B59544
RGB
rgb(181, 149, 68)
HSL
hsl(43, 45%, 49%)
HSB
hsb(43, 62%, 71%)
CMYK
cmyk(0%, 18%, 62%, 29%)
Oklch
oklch(68.3% 0.107 87.7)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#CCB760

Ginger · BurlyWood · Sunflower

HEX
#CCB760
RGB
rgb(204, 183, 96)
HSL
hsl(48, 51%, 59%)
HSB
hsb(48, 53%, 80%)
CMYK
cmyk(0%, 10%, 53%, 20%)
Oklch
oklch(77.9% 0.110 96.1)

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

#EDCC82

Goose Yellow · BurlyWood · Sunflower

HEX
#EDCC82
RGB
rgb(237, 204, 130)
HSL
hsl(41, 75%, 72%)
HSB
hsb(41, 45%, 93%)
CMYK
cmyk(0%, 14%, 45%, 7%)
Oklch
oklch(85.7% 0.100 86.3)

Traditional「Goose Yellow」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D76251
50C5D7

Analogous

D75082
D76251
D7A650

Triadic

D76251
50D762
6250D7

Split-Comp.

D76251
50D7A6
5082D7

Tetradic

D76251
82D750
50C5D7
A650D7

Contrast Matrix WCAG 2.1 Contrast

D76251
AD554A
B59544
CCB760
EDCC82
—
1.4
Fail
1.3
Fail
1.8
Fail
2.4
Fail
1.4
Fail
—
1.8
Fail
2.5
Fail
3.2
AA Large
1.3
Fail
1.8
Fail
—
1.4
Fail
1.8
Fail
1.8
Fail
2.5
Fail
1.4
Fail
—
1.3
Fail
2.4
Fail
3.2
AA Large
1.8
Fail
1.3
Fail
—
White BG
3.6AA Large
5.0AA
2.9Fail
2.0Fail
1.5Fail
Black BG
5.8AA
4.2AA Large
7.3AAA
10.5AAA
13.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A4A355
87864D
A7A758
C3C375
DFDE94

Deuteranopia

ABB456
8C934D
A9AB5C
C4C67A
E1E398

Tritanopia

D15859
A94F4F
B3676A
CB8689
EBA2A5

Achromatopsia

838383
6E6E6E
959595
B3B3B3
CDCDCD

Shades & Tints Shades & Tints

#D76251

Dark
Light

#AD554A

Dark
Light

#B59544

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d76251;
  --color-2: #ad554a;
  --color-3: #b59544;
  --color-4: #ccb760;
  --color-5: #edcc82;
}

SCSS

$color-1: #d76251;
$color-2: #ad554a;
$color-3: #b59544;
$color-4: #ccb760;
$color-5: #edcc82;

TAILWIND

colors: {
  'brand-1': '#d76251',
  'brand-2': '#ad554a',
  'brand-3': '#b59544',
  'brand-4': '#ccb760',
  'brand-5': '#edcc82',
}

RGB Array

[215, 98, 81], [173, 85, 74], [181, 149, 68], [204, 183, 96], [237, 204, 130]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D76251, #AD554A, #B59544, #CCB760, #EDCC82 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: #d76251; --color-2: #ad554a; --color-3: #b59544; --color-4: #ccb760; --color-5: #edcc82. 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