← Back to Editor

#5E544E · #D24635 · #86786F · #F28052 · #AD9C90

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 Library

Color Details Color Details

#5E544E

Tangerine · DimGray · Charcoal

HEX
#5E544E
RGB
rgb(94, 84, 78)
HSL
hsl(22, 9%, 34%)
HSB
hsb(22, 17%, 37%)
CMYK
cmyk(0%, 11%, 17%, 63%)
Oklch
oklch(45.4% 0.016 53.1)

Traditional「Tangerine」· Paint「Charcoal」· Creative Midnight Shadow

#D24635

Vermilion · Chocolate · Passion Red

HEX
#D24635
RGB
rgb(210, 70, 53)
HSL
hsl(6, 64%, 52%)
HSB
hsb(6, 75%, 82%)
CMYK
cmyk(0%, 67%, 75%, 18%)
Oklch
oklch(58.9% 0.179 30.2)

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

#86786F

Tangerine · Gray · Warm Gray

HEX
#86786F
RGB
rgb(134, 120, 111)
HSL
hsl(23, 9%, 48%)
HSB
hsb(23, 17%, 53%)
CMYK
cmyk(0%, 10%, 17%, 47%)
Oklch
oklch(58.3% 0.022 54.9)

Traditional「Tangerine」· Paint「Warm Gray」· Creative Urban Concrete

#F28052

Apricot · Coral · Warm Sun

HEX
#F28052
RGB
rgb(242, 128, 82)
HSL
hsl(17, 86%, 64%)
HSB
hsb(17, 66%, 95%)
CMYK
cmyk(0%, 47%, 66%, 5%)
Oklch
oklch(71.9% 0.153 42.0)

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

#AD9C90

Apricot · DarkGray · Warm Sun

HEX
#AD9C90
RGB
rgb(173, 156, 144)
HSL
hsl(25, 15%, 62%)
HSB
hsb(25, 17%, 68%)
CMYK
cmyk(0%, 10%, 17%, 32%)
Oklch
oklch(70.4% 0.026 57.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5E544E
4F595F

Analogous

5F4F51
5E544E
5F5C4F

Triadic

5E544E
4F5F55
554F5F

Split-Comp.

5E544E
4F5F5C
4F515F

Tetradic

5E544E
515F4F
4F595F
5C4F5F

Contrast Matrix WCAG 2.1 Contrast

5E544E
D24635
86786F
F28052
AD9C90
—
1.6
Fail
1.7
Fail
2.8
Fail
2.8
Fail
1.6
Fail
—
1.1
Fail
1.7
Fail
1.7
Fail
1.7
Fail
1.1
Fail
—
1.6
Fail
1.6
Fail
2.8
Fail
1.7
Fail
1.6
Fail
—
1.0
Fail
2.8
Fail
1.7
Fail
1.6
Fail
1.0
Fail
—
White BG
7.4AAA
4.5AA Large
4.3AA Large
2.6Fail
2.6Fail
Black BG
2.9Fail
4.7AA
4.9AA
8.0AAA
7.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

5A5A4F
959439
808071
C1C05D
A6A593

Deuteranopia

5A5B50
9EA83A
818272
C7D060
A7A894

Tritanopia

5E5151
CB3C3D
857373
EC6668
AC9596

Achromatopsia

565656
6E6E6E
7B7B7B
9D9D9D
A0A0A0

Shades & Tints Shades & Tints

#5E544E

Dark
Light

#D24635

Dark
Light

#86786F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5e544e;
  --color-2: #d24635;
  --color-3: #86786f;
  --color-4: #f28052;
  --color-5: #ad9c90;
}

SCSS

$color-1: #5e544e;
$color-2: #d24635;
$color-3: #86786f;
$color-4: #f28052;
$color-5: #ad9c90;

TAILWIND

colors: {
  'brand-1': '#5e544e',
  'brand-2': '#d24635',
  'brand-3': '#86786f',
  'brand-4': '#f28052',
  'brand-5': '#ad9c90',
}

RGB Array

[94, 84, 78], [210, 70, 53], [134, 120, 111], [242, 128, 82], [173, 156, 144]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #5E544E, #D24635, #86786F, #F28052, #AD9C90 is ideal for: corporate websites, product showcases, portfolios. 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: #5e544e; --color-2: #d24635; --color-3: #86786f; --color-4: #f28052; --color-5: #ad9c90. 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. 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