← Back to Editor

#8C8C8C · #736967 · #E09731 · #D14024 · #CC2B0A

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

#8C8C8C

Ash · Gray · Warm Gray

HEX
#8C8C8C
RGB
rgb(140, 140, 140)
HSL
hsl(0, 0%, 55%)
HSB
hsb(0, 0%, 55%)
CMYK
cmyk(0%, 0%, 0%, 45%)
Oklch
oklch(64.0% 0.000 89.9)

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

#736967

Ink Gray · DimGray · Warm Gray

HEX
#736967
RGB
rgb(115, 105, 103)
HSL
hsl(10, 6%, 43%)
HSB
hsb(10, 10%, 45%)
CMYK
cmyk(0%, 9%, 10%, 55%)
Oklch
oklch(52.9% 0.013 31.1)

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

#E09731

Ginger · GoldenRod · Warm Sun

HEX
#E09731
RGB
rgb(224, 151, 49)
HSL
hsl(35, 74%, 54%)
HSB
hsb(35, 78%, 88%)
CMYK
cmyk(0%, 33%, 78%, 12%)
Oklch
oklch(73.3% 0.141 70.4)

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

#D14024

Vermilion · Chocolate · Passion Red

HEX
#D14024
RGB
rgb(209, 64, 36)
HSL
hsl(10, 71%, 48%)
HSB
hsb(10, 83%, 82%)
CMYK
cmyk(0%, 69%, 83%, 18%)
Oklch
oklch(57.9% 0.186 32.9)

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

#CC2B0A

Vermilion · FireBrick · Passion Red

HEX
#CC2B0A
RGB
rgb(204, 43, 10)
HSL
hsl(10, 91%, 42%)
HSB
hsb(10, 95%, 80%)
CMYK
cmyk(0%, 79%, 95%, 20%)
Oklch
oklch(55.0% 0.200 32.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8C8C8C
8C8C8C

Analogous

8C8C8C
8C8C8C
8C8C8C

Triadic

8C8C8C
8C8C8C
8C8C8C

Split-Comp.

8C8C8C
8C8C8C
8C8C8C

Tetradic

8C8C8C
8C8C8C
8C8C8C
8C8C8C

Contrast Matrix WCAG 2.1 Contrast

8C8C8C
736967
E09731
D14024
CC2B0A
—
1.6
Fail
1.4
Fail
1.4
Fail
1.6
Fail
1.6
Fail
—
2.2
Fail
1.1
Fail
1.0
Fail
1.4
Fail
2.2
Fail
—
1.9
Fail
2.2
Fail
1.4
Fail
1.1
Fail
1.9
Fail
—
1.1
Fail
1.6
Fail
1.0
Fail
2.2
Fail
1.1
Fail
—
White BG
3.4AA Large
5.3AA
2.4Fail
4.7AA
5.4AA
Black BG
6.2AA
3.9AA Large
8.6AAA
4.5AA Large
3.9AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

8C8C8C
6F6F67
C0C04A
92912B
868512

Deuteranopia

8C8C8C
6F7068
C5CA50
9BA52C
909C14

Tritanopia

8C8C8C
736868
DC5D61
CA3031
C4181A

Achromatopsia

8C8C8C
6C6C6C
A1A1A1
686868
575757

Shades & Tints Shades & Tints

#8C8C8C

Dark
Light

#736967

Dark
Light

#E09731

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8c8c8c;
  --color-2: #736967;
  --color-3: #e09731;
  --color-4: #d14024;
  --color-5: #cc2b0a;
}

SCSS

$color-1: #8c8c8c;
$color-2: #736967;
$color-3: #e09731;
$color-4: #d14024;
$color-5: #cc2b0a;

TAILWIND

colors: {
  'brand-1': '#8c8c8c',
  'brand-2': '#736967',
  'brand-3': '#e09731',
  'brand-4': '#d14024',
  'brand-5': '#cc2b0a',
}

RGB Array

[140, 140, 140], [115, 105, 103], [224, 151, 49], [209, 64, 36], [204, 43, 10]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #8C8C8C, #736967, #E09731, #D14024, #CC2B0A 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: #8c8c8c; --color-2: #736967; --color-3: #e09731; --color-4: #d14024; --color-5: #cc2b0a. 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