← Back to Editor

#3A100A · #97475A · #CAAB50 · #DCBF8F · #EFE6C0

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

#3A100A

Vermilion · Black · Deep Berry

HEX
#3A100A
RGB
rgb(58, 16, 10)
HSL
hsl(8, 71%, 13%)
HSB
hsb(8, 83%, 23%)
CMYK
cmyk(0%, 72%, 83%, 77%)
Oklch
oklch(24.2% 0.068 30.7)

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

#97475A

Crimson · Sienna · Passion Red

HEX
#97475A
RGB
rgb(151, 71, 90)
HSL
hsl(346, 36%, 44%)
HSB
hsb(346, 53%, 59%)
CMYK
cmyk(0%, 53%, 40%, 41%)
Oklch
oklch(50.5% 0.109 6.8)

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

#CAAB50

Ginger · SandyBrown · Sunflower

HEX
#CAAB50
RGB
rgb(202, 171, 80)
HSL
hsl(45, 54%, 55%)
HSB
hsb(45, 60%, 79%)
CMYK
cmyk(0%, 15%, 60%, 21%)
Oklch
oklch(75.1% 0.116 90.6)

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

#DCBF8F

Goose Yellow · BurlyWood · Warm Sun

HEX
#DCBF8F
RGB
rgb(220, 191, 143)
HSL
hsl(37, 52%, 71%)
HSB
hsb(37, 35%, 86%)
CMYK
cmyk(0%, 13%, 35%, 14%)
Oklch
oklch(81.8% 0.071 80.0)

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

#EFE6C0

Goose Yellow · Wheat · Lemon Cream

HEX
#EFE6C0
RGB
rgb(239, 230, 192)
HSL
hsl(49, 59%, 85%)
HSB
hsb(49, 20%, 94%)
CMYK
cmyk(0%, 4%, 20%, 6%)
Oklch
oklch(92.2% 0.051 96.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3A100A
0A3239

Analogous

390A1B
3A100A
39270A

Triadic

3A100A
0A3910
100A39

Split-Comp.

3A100A
0A3927
0A1B39

Tetradic

3A100A
1B390A
0A3239
270A39

Contrast Matrix WCAG 2.1 Contrast

3A100A
97475A
CAAB50
DCBF8F
EFE6C0
—
2.7
Fail
7.5
AAA
9.5
AAA
13.3
AAA
2.7
Fail
—
2.8
Fail
3.5
AA Large
5.0
AA
7.5
AAA
2.8
Fail
—
1.3
Fail
1.8
Fail
9.5
AAA
3.5
AA Large
1.3
Fail
—
1.4
Fail
13.3
AAA
5.0
AA
1.8
Fail
1.4
Fail
—
White BG
16.7AAA
6.2AA
2.2Fail
1.8Fail
1.3Fail
Black BG
1.3Fail
3.4AA Large
9.5AAA
11.9AAA
16.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

28270B
747455
BDBC66
CFCF9B
EBEBC9

Deuteranopia

2A2D0C
797F54
BEC16B
D1D39D
ECECCB

Tritanopia

380D0D
935251
C8777B
DBA4A6
EFD0D2

Achromatopsia

1C1C1C
616161
AAAAAA
C2C2C2
E4E4E4

Shades & Tints Shades & Tints

#3A100A

Dark
Light

#97475A

Dark
Light

#CAAB50

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3a100a;
  --color-2: #97475a;
  --color-3: #caab50;
  --color-4: #dcbf8f;
  --color-5: #efe6c0;
}

SCSS

$color-1: #3a100a;
$color-2: #97475a;
$color-3: #caab50;
$color-4: #dcbf8f;
$color-5: #efe6c0;

TAILWIND

colors: {
  'brand-1': '#3a100a',
  'brand-2': '#97475a',
  'brand-3': '#caab50',
  'brand-4': '#dcbf8f',
  'brand-5': '#efe6c0',
}

RGB Array

[58, 16, 10], [151, 71, 90], [202, 171, 80], [220, 191, 143], [239, 230, 192]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #3A100A, #97475A, #CAAB50, #DCBF8F, #EFE6C0 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: #3a100a; --color-2: #97475a; --color-3: #caab50; --color-4: #dcbf8f; --color-5: #efe6c0. 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