← Back to Editor

#D80530 · #A32931 · #6D4D4C · #363939 · #FFC20D

A 5-color palette 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

#D80530

Vermilion · Crimson · Passion Red

HEX
#D80530
RGB
rgb(216, 5, 48)
HSL
hsl(348, 95%, 43%)
HSB
hsb(348, 98%, 85%)
CMYK
cmyk(0%, 98%, 78%, 15%)
Oklch
oklch(55.8% 0.223 22.3)

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

#A32931

Crimson · Brown · Wine Red

HEX
#A32931
RGB
rgb(163, 41, 49)
HSL
hsl(356, 60%, 40%)
HSB
hsb(356, 75%, 64%)
CMYK
cmyk(0%, 75%, 70%, 36%)
Oklch
oklch(47.7% 0.158 22.2)

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

#6D4D4C

Crimson · DimGray · Wine Red

HEX
#6D4D4C
RGB
rgb(109, 77, 76)
HSL
hsl(2, 18%, 36%)
HSB
hsb(2, 30%, 43%)
CMYK
cmyk(0%, 29%, 30%, 57%)
Oklch
oklch(45.5% 0.044 20.9)

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

#363939

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#363939
RGB
rgb(54, 57, 57)
HSL
hsl(180, 3%, 22%)
HSB
hsb(180, 5%, 22%)
CMYK
cmyk(5%, 0%, 0%, 78%)
Oklch
oklch(34.2% 0.004 197.0)

Traditional「Dark Cyan」· Paint「Dark Stone」· Creative Midnight Shadow

#FFC20D

Ginger · Gold · Sunflower

HEX
#FFC20D
RGB
rgb(255, 194, 13)
HSL
hsl(45, 100%, 53%)
HSB
hsb(45, 95%, 100%)
CMYK
cmyk(0%, 24%, 95%, 0%)
Oklch
oklch(84.6% 0.172 85.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D80530
05D6AC

Analogous

D60597
D80530
D64405

Triadic

D80530
2FD605
052FD6

Split-Comp.

D80530
05D644
0597D6

Tetradic

D80530
97D605
05D6AC
4405D6

Contrast Matrix WCAG 2.1 Contrast

D80530
A32931
6D4D4C
363939
FFC20D
—
1.4
Fail
1.4
Fail
2.2
Fail
3.3
AA Large
1.4
Fail
—
1.0
Fail
1.6
Fail
4.4
AA Large
1.4
Fail
1.0
Fail
—
1.6
Fail
4.6
AA
2.2
Fail
1.6
Fail
1.6
Fail
—
7.2
AAA
3.3
AA Large
4.4
AA Large
4.6
AA
7.2
AAA
—
White BG
5.3AA
7.2AAA
7.5AAA
11.7AAA
1.6Fail
Black BG
4.0AA Large
2.9Fail
2.8Fail
1.8Fail
13.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7D7B26
6E6D2F
5F5F4C
373739
E5E439

Deuteranopia

899923
757E2F
61634C
373739
E8ED43

Tritanopia

CD1D1C
9D2E2D
6B4C4C
363939
FC5B63

Achromatopsia

494949
4E4E4E
565656
383838
C0C0C0

Shades & Tints Shades & Tints

#D80530

Dark
Light

#A32931

Dark
Light

#6D4D4C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d80530;
  --color-2: #a32931;
  --color-3: #6d4d4c;
  --color-4: #363939;
  --color-5: #ffc20d;
}

SCSS

$color-1: #d80530;
$color-2: #a32931;
$color-3: #6d4d4c;
$color-4: #363939;
$color-5: #ffc20d;

TAILWIND

colors: {
  'brand-1': '#d80530',
  'brand-2': '#a32931',
  'brand-3': '#6d4d4c',
  'brand-4': '#363939',
  'brand-5': '#ffc20d',
}

RGB Array

[216, 5, 48], [163, 41, 49], [109, 77, 76], [54, 57, 57], [255, 194, 13]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D80530, #A32931, #6D4D4C, #363939, #FFC20D is ideal for: tech websites, dark mode UIs, game UIs. 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: #d80530; --color-2: #a32931; --color-3: #6d4d4c; --color-4: #363939; --color-5: #ffc20d. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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