← Back to Editor

#CD2F14 · #D64E1A · #CAA54D · #716B55 · #9D9C66

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

#CD2F14

Vermilion · FireBrick · Passion Red

HEX
#CD2F14
RGB
rgb(205, 47, 20)
HSL
hsl(9, 82%, 44%)
HSB
hsb(9, 90%, 80%)
CMYK
cmyk(0%, 77%, 90%, 20%)
Oklch
oklch(55.5% 0.198 32.0)

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

#D64E1A

Tangerine · Chocolate · Amber Brown

HEX
#D64E1A
RGB
rgb(214, 78, 26)
HSL
hsl(17, 78%, 47%)
HSB
hsb(17, 88%, 84%)
CMYK
cmyk(0%, 64%, 88%, 16%)
Oklch
oklch(60.3% 0.181 38.7)

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

#CAA54D

Ginger · SandyBrown · Sunflower

HEX
#CAA54D
RGB
rgb(202, 165, 77)
HSL
hsl(42, 54%, 55%)
HSB
hsb(42, 62%, 79%)
CMYK
cmyk(0%, 18%, 62%, 21%)
Oklch
oklch(73.8% 0.115 86.4)

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

#716B55

Ochre · DimGray · Honey Gold

HEX
#716B55
RGB
rgb(113, 107, 85)
HSL
hsl(47, 14%, 39%)
HSB
hsb(47, 25%, 44%)
CMYK
cmyk(0%, 5%, 25%, 56%)
Oklch
oklch(52.7% 0.034 94.6)

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

#9D9C66

Autumn Sage · Gray · Sunflower

HEX
#9D9C66
RGB
rgb(157, 156, 102)
HSL
hsl(59, 22%, 51%)
HSB
hsb(59, 35%, 62%)
CMYK
cmyk(0%, 1%, 35%, 38%)
Oklch
oklch(68.0% 0.074 107.3)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CD2F14
14B1CC

Analogous

CC1455
CD2F14
CC8C14

Triadic

CD2F14
14CC30
3014CC

Split-Comp.

CD2F14
14CC8C
1455CC

Tetradic

CD2F14
55CC14
14B1CC
8C14CC

Contrast Matrix WCAG 2.1 Contrast

CD2F14
D64E1A
CAA54D
716B55
9D9C66
—
1.2
Fail
2.2
Fail
1.0
Fail
1.8
Fail
1.2
Fail
—
1.8
Fail
1.3
Fail
1.5
Fail
2.2
Fail
1.8
Fail
—
2.3
Fail
1.2
Fail
1.0
Fail
1.3
Fail
2.3
Fail
—
1.9
Fail
1.8
Fail
1.5
Fail
1.2
Fail
1.9
Fail
—
White BG
5.2AA
4.2AA Large
2.3Fail
5.3AA
2.8Fail
Black BG
4.0AA Large
5.0AA
9.0AAA
3.9AA Large
7.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

89871B
9B9A27
BABA62
6E6E5A
9D9D73

Deuteranopia

929E1C
A3AD2A
BCBF67
6F6F5C
9D9D76

Tritanopia

C52021
CF3133
C87377
715F5F
9D7D80

Achromatopsia

5B5B5B
717171
A6A6A6
6A6A6A
969696

Shades & Tints Shades & Tints

#CD2F14

Dark
Light

#D64E1A

Dark
Light

#CAA54D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cd2f14;
  --color-2: #d64e1a;
  --color-3: #caa54d;
  --color-4: #716b55;
  --color-5: #9d9c66;
}

SCSS

$color-1: #cd2f14;
$color-2: #d64e1a;
$color-3: #caa54d;
$color-4: #716b55;
$color-5: #9d9c66;

TAILWIND

colors: {
  'brand-1': '#cd2f14',
  'brand-2': '#d64e1a',
  'brand-3': '#caa54d',
  'brand-4': '#716b55',
  'brand-5': '#9d9c66',
}

RGB Array

[205, 47, 20], [214, 78, 26], [202, 165, 77], [113, 107, 85], [157, 156, 102]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CD2F14, #D64E1A, #CAA54D, #716B55, #9D9C66 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: #cd2f14; --color-2: #d64e1a; --color-3: #caa54d; --color-4: #716b55; --color-5: #9d9c66. 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