← Back to Editor

#342F1A · #9D4A50 · #FF9178 · #E4E3A6 · #A8AA7E

warm

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

#342F1A

Ochre · DarkSlateGray · Amber Gold

HEX
#342F1A
RGB
rgb(52, 47, 26)
HSL
hsl(48, 33%, 15%)
HSB
hsb(48, 50%, 20%)
CMYK
cmyk(0%, 10%, 50%, 80%)
Oklch
oklch(30.5% 0.035 96.4)

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

#9D4A50

Crimson · Sienna · Passion Red

HEX
#9D4A50
RGB
rgb(157, 74, 80)
HSL
hsl(356, 36%, 45%)
HSB
hsb(356, 53%, 62%)
CMYK
cmyk(0%, 53%, 49%, 38%)
Oklch
oklch(51.5% 0.111 17.3)

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

#FF9178

Peach Pink · LightSalmon · Coral Red

HEX
#FF9178
RGB
rgb(255, 145, 120)
HSL
hsl(11, 100%, 74%)
HSB
hsb(11, 53%, 100%)
CMYK
cmyk(0%, 43%, 53%, 0%)
Oklch
oklch(76.9% 0.138 33.8)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#E4E3A6

Fresh Green · Wheat · Lemon Cream

HEX
#E4E3A6
RGB
rgb(228, 227, 166)
HSL
hsl(59, 53%, 77%)
HSB
hsb(59, 27%, 89%)
CMYK
cmyk(0%, 0%, 27%, 11%)
Oklch
oklch(90.2% 0.079 107.1)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#A8AA7E

Autumn Sage · DarkSeaGreen · Sunflower

HEX
#A8AA7E
RGB
rgb(168, 170, 126)
HSL
hsl(63, 21%, 58%)
HSB
hsb(63, 26%, 67%)
CMYK
cmyk(1%, 0%, 26%, 33%)
Oklch
oklch(72.5% 0.060 110.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

342F1A
1A1F33

Analogous

33211A
342F1A
2B331A

Triadic

342F1A
1A332E
2E1A33

Split-Comp.

342F1A
1A2B33
211A33

Tetradic

342F1A
1A3321
1A1F33
331A2B

Contrast Matrix WCAG 2.1 Contrast

342F1A
9D4A50
FF9178
E4E3A6
A8AA7E
—
2.3
Fail
6.1
AA
10.1
AAA
5.6
AA
2.3
Fail
—
2.7
Fail
4.5
AA Large
2.5
Fail
6.1
AA
2.7
Fail
—
1.7
Fail
1.1
Fail
10.1
AAA
4.5
AA Large
1.7
Fail
—
1.8
Fail
5.6
AA
2.5
Fail
1.1
Fail
1.8
Fail
—
White BG
13.4AAA
6.0AA
2.2Fail
1.3Fail
2.4Fail
Black BG
1.6Fail
3.5AA Large
9.6AAA
15.8AAA
8.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

32321F
79784F
CFCE7E
E4E4B5
A9A989

Deuteranopia

323320
7E844E
D6DE80
E4E4B8
A9A98B

Tritanopia

342324
994D4D
FA8384
E4C0C3
A89193

Achromatopsia

2E2E2E
646464
AFAFAF
DCDCDC
A4A4A4

Shades & Tints Shades & Tints

#342F1A

Dark
Light

#9D4A50

Dark
Light

#FF9178

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #342f1a;
  --color-2: #9d4a50;
  --color-3: #ff9178;
  --color-4: #e4e3a6;
  --color-5: #a8aa7e;
}

SCSS

$color-1: #342f1a;
$color-2: #9d4a50;
$color-3: #ff9178;
$color-4: #e4e3a6;
$color-5: #a8aa7e;

TAILWIND

colors: {
  'brand-1': '#342f1a',
  'brand-2': '#9d4a50',
  'brand-3': '#ff9178',
  'brand-4': '#e4e3a6',
  'brand-5': '#a8aa7e',
}

RGB Array

[52, 47, 26], [157, 74, 80], [255, 145, 120], [228, 227, 166], [168, 170, 126]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #342F1A, #9D4A50, #FF9178, #E4E3A6, #A8AA7E 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: #342f1a; --color-2: #9d4a50; --color-3: #ff9178; --color-4: #e4e3a6; --color-5: #a8aa7e. 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 warm-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