← Back to Editor

#342B22 · #7D3330 · #B83944 · #F06E88 · #A0C0BD

warm

A 5-color warm palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#342B22

Ochre · DarkSlateGray · Cinnamon

HEX
#342B22
RGB
rgb(52, 43, 34)
HSL
hsl(30, 21%, 17%)
HSB
hsb(30, 35%, 20%)
CMYK
cmyk(0%, 17%, 35%, 80%)
Oklch
oklch(29.6% 0.021 66.9)

Traditional「Ochre」· Paint「Cinnamon」· Creative Blush Sunrise

#7D3330

Crimson · Brown · Wine Red

HEX
#7D3330
RGB
rgb(125, 51, 48)
HSL
hsl(2, 45%, 34%)
HSB
hsb(2, 62%, 49%)
CMYK
cmyk(0%, 59%, 62%, 51%)
Oklch
oklch(42.3% 0.104 24.8)

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

#B83944

Crimson · Brown · Passion Red

HEX
#B83944
RGB
rgb(184, 57, 68)
HSL
hsl(355, 53%, 47%)
HSB
hsb(355, 69%, 72%)
CMYK
cmyk(0%, 69%, 63%, 28%)
Oklch
oklch(53.3% 0.163 19.8)

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

#F06E88

Peach Pink · LightCoral · Coral Red

HEX
#F06E88
RGB
rgb(240, 110, 136)
HSL
hsl(348, 81%, 69%)
HSB
hsb(348, 54%, 94%)
CMYK
cmyk(0%, 54%, 43%, 6%)
Oklch
oklch(70.1% 0.161 9.7)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#A0C0BD

Jade · DarkGray · Lake Green

HEX
#A0C0BD
RGB
rgb(160, 192, 189)
HSL
hsl(174, 20%, 69%)
HSB
hsb(174, 17%, 75%)
CMYK
cmyk(17%, 0%, 2%, 25%)
Oklch
oklch(78.3% 0.035 189.5)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

342B22
222B34

Analogous

342222
342B22
343422

Triadic

342B22
22342B
2B2234

Split-Comp.

342B22
223434
222234

Tetradic

342B22
223422
222B34
342234

Contrast Matrix WCAG 2.1 Contrast

342B22
7D3330
B83944
F06E88
A0C0BD
—
1.6
Fail
2.4
Fail
4.8
AA
7.1
AAA
1.6
Fail
—
1.6
Fail
3.1
AA Large
4.5
AA
2.4
Fail
1.6
Fail
—
2.0
Fail
2.9
Fail
4.8
AA
3.1
AA Large
2.0
Fail
—
1.5
Fail
7.1
AAA
4.5
AA
2.9
Fail
1.5
Fail
—
White BG
13.9AAA
8.8AAA
5.7AA
2.9Fail
1.9Fail
Black BG
1.5Fail
2.4Fail
3.7AA Large
7.3AAA
10.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

303024
5D5C31
818041
B8B782
AEAEBE

Deuteranopia

313125
616731
889241
BFC980
ACAABE

Tritanopia

342626
793131
B23F3F
EA7D7C
A2BEBE

Achromatopsia

2D2D2D
494949
606060
989898
B6B6B6

Shades & Tints Shades & Tints

#342B22

Dark
Light

#7D3330

Dark
Light

#B83944

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #342b22;
  --color-2: #7d3330;
  --color-3: #b83944;
  --color-4: #f06e88;
  --color-5: #a0c0bd;
}

SCSS

$color-1: #342b22;
$color-2: #7d3330;
$color-3: #b83944;
$color-4: #f06e88;
$color-5: #a0c0bd;

TAILWIND

colors: {
  'brand-1': '#342b22',
  'brand-2': '#7d3330',
  'brand-3': '#b83944',
  'brand-4': '#f06e88',
  'brand-5': '#a0c0bd',
}

RGB Array

[52, 43, 34], [125, 51, 48], [184, 57, 68], [240, 110, 136], [160, 192, 189]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #342B22, #7D3330, #B83944, #F06E88, #A0C0BD 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: #342b22; --color-2: #7d3330; --color-3: #b83944; --color-4: #f06e88; --color-5: #a0c0bd. 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