← Back to Editor

#3F2C26 · #DD423E · #A2A384 · #EAC388 · #C5AD4B

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

#3F2C26

Crimson · DarkSlateGray · Deep Berry

HEX
#3F2C26
RGB
rgb(63, 44, 38)
HSL
hsl(14, 25%, 20%)
HSB
hsb(14, 40%, 25%)
CMYK
cmyk(0%, 30%, 40%, 75%)
Oklch
oklch(31.4% 0.030 38.3)

Traditional「Crimson」· Paint「Deep Berry」· Creative Blush Sunrise

#DD423E

Vermilion · Crimson · Passion Red

HEX
#DD423E
RGB
rgb(221, 66, 62)
HSL
hsl(2, 70%, 55%)
HSB
hsb(2, 72%, 87%)
CMYK
cmyk(0%, 70%, 72%, 13%)
Oklch
oklch(60.4% 0.193 26.3)

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

#A2A384

Autumn Sage · DarkSeaGreen · Sunflower

HEX
#A2A384
RGB
rgb(162, 163, 132)
HSL
hsl(62, 14%, 58%)
HSB
hsb(62, 19%, 64%)
CMYK
cmyk(1%, 0%, 19%, 36%)
Oklch
oklch(70.6% 0.043 109.0)

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

#EAC388

Goose Yellow · BurlyWood · Warm Sun

HEX
#EAC388
RGB
rgb(234, 195, 136)
HSL
hsl(36, 70%, 73%)
HSB
hsb(36, 42%, 92%)
CMYK
cmyk(0%, 17%, 42%, 8%)
Oklch
oklch(83.8% 0.088 77.4)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

#C5AD4B

Ginger · GoldenRod · Sunflower

HEX
#C5AD4B
RGB
rgb(197, 173, 75)
HSL
hsl(48, 51%, 53%)
HSB
hsb(48, 62%, 77%)
CMYK
cmyk(0%, 12%, 62%, 23%)
Oklch
oklch(75.0% 0.121 95.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3F2C26
263A40

Analogous

40262D
3F2C26
403926

Triadic

3F2C26
26402C
2C2640

Split-Comp.

3F2C26
264039
262D40

Tetradic

3F2C26
2D4026
263A40
392640

Contrast Matrix WCAG 2.1 Contrast

3F2C26
DD423E
A2A384
EAC388
C5AD4B
—
3.1
AA Large
5.1
AA
7.9
AAA
5.9
AA
3.1
AA Large
—
1.6
Fail
2.6
Fail
1.9
Fail
5.1
AA
1.6
Fail
—
1.6
Fail
1.2
Fail
7.9
AAA
2.6
Fail
1.6
Fail
—
1.3
Fail
5.9
AA
1.9
Fail
1.2
Fail
1.3
Fail
—
White BG
13.1AAA
4.3AA Large
2.6Fail
1.7Fail
2.2Fail
Black BG
1.6Fail
4.9AA
8.1AAA
12.7AAA
9.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

373727
9A983F
A2A28C
D9D996
BBBA63

Deuteranopia

383928
A3AF3F
A2A28D
DBDE9A
BCBE68

Tritanopia

3E2929
D54040
A29193
E8A2A4
C4757A

Achromatopsia

313131
707070
9F9F9F
C8C8C8
A9A9A9

Shades & Tints Shades & Tints

#3F2C26

Dark
Light

#DD423E

Dark
Light

#A2A384

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3f2c26;
  --color-2: #dd423e;
  --color-3: #a2a384;
  --color-4: #eac388;
  --color-5: #c5ad4b;
}

SCSS

$color-1: #3f2c26;
$color-2: #dd423e;
$color-3: #a2a384;
$color-4: #eac388;
$color-5: #c5ad4b;

TAILWIND

colors: {
  'brand-1': '#3f2c26',
  'brand-2': '#dd423e',
  'brand-3': '#a2a384',
  'brand-4': '#eac388',
  'brand-5': '#c5ad4b',
}

RGB Array

[63, 44, 38], [221, 66, 62], [162, 163, 132], [234, 195, 136], [197, 173, 75]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #3F2C26, #DD423E, #A2A384, #EAC388, #C5AD4B 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: #3f2c26; --color-2: #dd423e; --color-3: #a2a384; --color-4: #eac388; --color-5: #c5ad4b. 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