← Back to Editor

#27140E · #B04624 · #D17331 · #F2B386 · #7CA18B

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

#27140E

Crimson · Black · Deep Berry

HEX
#27140E
RGB
rgb(39, 20, 14)
HSL
hsl(14, 47%, 10%)
HSB
hsb(14, 64%, 15%)
CMYK
cmyk(0%, 49%, 64%, 85%)
Oklch
oklch(21.6% 0.034 38.3)

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

#B04624

Tangerine · Sienna · Amber Brown

HEX
#B04624
RGB
rgb(176, 70, 36)
HSL
hsl(15, 66%, 42%)
HSB
hsb(15, 80%, 69%)
CMYK
cmyk(0%, 60%, 80%, 31%)
Oklch
oklch(53.2% 0.146 37.7)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

#D17331

Tangerine · Chocolate · Warm Sun

HEX
#D17331
RGB
rgb(209, 115, 49)
HSL
hsl(25, 63%, 51%)
HSB
hsb(25, 77%, 82%)
CMYK
cmyk(0%, 45%, 77%, 18%)
Oklch
oklch(65.1% 0.141 52.1)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#F2B386

Apricot · BurlyWood · Warm Sun

HEX
#F2B386
RGB
rgb(242, 179, 134)
HSL
hsl(25, 81%, 74%)
HSB
hsb(25, 45%, 95%)
CMYK
cmyk(0%, 26%, 45%, 5%)
Oklch
oklch(81.5% 0.095 56.5)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#7CA18B

Celadon · LightSlateGray · Olive Green

HEX
#7CA18B
RGB
rgb(124, 161, 139)
HSL
hsl(144, 16%, 56%)
HSB
hsb(144, 23%, 63%)
CMYK
cmyk(23%, 0%, 14%, 37%)
Oklch
oklch(67.5% 0.052 158.6)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

27140E
0E2025

Analogous

250E14
27140E
251F0E

Triadic

27140E
0E2513
130E25

Split-Comp.

27140E
0E251F
0E1425

Tetradic

27140E
14250E
0E2025
1F0E25

Contrast Matrix WCAG 2.1 Contrast

27140E
B04624
D17331
F2B386
7CA18B
—
3.1
AA Large
5.2
AA
9.7
AAA
6.1
AA
3.1
AA Large
—
1.7
Fail
3.1
AA Large
2.0
Fail
5.2
AA
1.7
Fail
—
1.9
Fail
1.2
Fail
9.7
AAA
3.1
AA Large
1.9
Fail
—
1.6
Fail
6.1
AA
2.0
Fail
1.2
Fail
1.6
Fail
—
White BG
17.6AAA
5.6AA
3.4AA Large
1.8Fail
2.9Fail
Black BG
1.2Fail
3.7AA Large
6.2AA
11.6AAA
7.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

1F1F0F
82812C
A8A741
D7D691
8C8C90

Deuteranopia

202110
88902E
AEB545
DADF94
8A8792

Tritanopia

261111
AB3334
CC4E50
EF999B
7E9595

Achromatopsia

191919
626262
888888
C1C1C1
939393

Shades & Tints Shades & Tints

#27140E

Dark
Light

#B04624

Dark
Light

#D17331

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #27140e;
  --color-2: #b04624;
  --color-3: #d17331;
  --color-4: #f2b386;
  --color-5: #7ca18b;
}

SCSS

$color-1: #27140e;
$color-2: #b04624;
$color-3: #d17331;
$color-4: #f2b386;
$color-5: #7ca18b;

TAILWIND

colors: {
  'brand-1': '#27140e',
  'brand-2': '#b04624',
  'brand-3': '#d17331',
  'brand-4': '#f2b386',
  'brand-5': '#7ca18b',
}

RGB Array

[39, 20, 14], [176, 70, 36], [209, 115, 49], [242, 179, 134], [124, 161, 139]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #27140E, #B04624, #D17331, #F2B386, #7CA18B 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: #27140e; --color-2: #b04624; --color-3: #d17331; --color-4: #f2b386; --color-5: #7ca18b. 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