← Back to Editor

#CF422E · #FAE5B8 · #A59D4A · #3B3831 · #73766F

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 LibraryData Visualization

Color Details Color Details

#CF422E

Vermilion · Chocolate · Passion Red

HEX
#CF422E
RGB
rgb(207, 66, 46)
HSL
hsl(7, 64%, 50%)
HSB
hsb(7, 78%, 81%)
CMYK
cmyk(0%, 68%, 78%, 19%)
Oklch
oklch(57.9% 0.181 31.1)

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

#FAE5B8

Goose Yellow · Wheat · Lemon Cream

HEX
#FAE5B8
RGB
rgb(250, 229, 184)
HSL
hsl(41, 87%, 85%)
HSB
hsb(41, 26%, 98%)
CMYK
cmyk(0%, 8%, 26%, 2%)
Oklch
oklch(92.8% 0.063 85.9)

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

#A59D4A

Autumn Sage · GoldenRod · Honey Gold

HEX
#A59D4A
RGB
rgb(165, 157, 74)
HSL
hsl(55, 38%, 47%)
HSB
hsb(55, 55%, 65%)
CMYK
cmyk(0%, 5%, 55%, 35%)
Oklch
oklch(68.5% 0.105 103.8)

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

#3B3831

Ochre · DarkSlateGray · Dark Stone

HEX
#3B3831
RGB
rgb(59, 56, 49)
HSL
hsl(42, 9%, 21%)
HSB
hsb(42, 17%, 23%)
CMYK
cmyk(0%, 5%, 17%, 77%)
Oklch
oklch(34.1% 0.013 87.6)

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

#73766F

Ink Gray · DimGray · Warm Gray

HEX
#73766F
RGB
rgb(115, 118, 111)
HSL
hsl(86, 3%, 45%)
HSB
hsb(86, 6%, 46%)
CMYK
cmyk(3%, 0%, 6%, 54%)
Oklch
oklch(56.1% 0.011 125.8)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CF422E
2EBED1

Analogous

D12E6C
CF422E
D1932E

Triadic

CF422E
2ED141
412ED1

Split-Comp.

CF422E
2ED193
2E6CD1

Tetradic

CF422E
6CD12E
2EBED1
932ED1

Contrast Matrix WCAG 2.1 Contrast

CF422E
FAE5B8
A59D4A
3B3831
73766F
—
3.8
AA Large
1.7
Fail
2.5
Fail
1.0
Fail
3.8
AA Large
—
2.3
Fail
9.4
AAA
3.7
AA Large
1.7
Fail
2.3
Fail
—
4.2
AA Large
1.7
Fail
2.5
Fail
9.4
AAA
4.2
AA Large
—
2.5
Fail
1.0
Fail
3.7
AA Large
1.7
Fail
2.5
Fail
—
White BG
4.7AA
1.2Fail
2.8Fail
11.7AAA
4.6AA
Black BG
4.5AA Large
17.0AAA
7.5AAA
1.8Fail
4.5AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

929133
F1F1C3
A2A15E
3A3A33
747471

Deuteranopia

9AA534
F2F4C6
A2A363
3A3A33
747471

Tritanopia

C83738
F9CBCD
A56E71
3B3434
737272

Achromatopsia

6A6A6A
E6E6E6
969696
383838
747474

Shades & Tints Shades & Tints

#CF422E

Dark
Light

#FAE5B8

Dark
Light

#A59D4A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cf422e;
  --color-2: #fae5b8;
  --color-3: #a59d4a;
  --color-4: #3b3831;
  --color-5: #73766f;
}

SCSS

$color-1: #cf422e;
$color-2: #fae5b8;
$color-3: #a59d4a;
$color-4: #3b3831;
$color-5: #73766f;

TAILWIND

colors: {
  'brand-1': '#cf422e',
  'brand-2': '#fae5b8',
  'brand-3': '#a59d4a',
  'brand-4': '#3b3831',
  'brand-5': '#73766f',
}

RGB Array

[207, 66, 46], [250, 229, 184], [165, 157, 74], [59, 56, 49], [115, 118, 111]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CF422E, #FAE5B8, #A59D4A, #3B3831, #73766F is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #cf422e; --color-2: #fae5b8; --color-3: #a59d4a; --color-4: #3b3831; --color-5: #73766f. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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