← Back to Editor

#648784 · #CF5744 · #DE9247 · #F4CF89 · #574031

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

#648784

Mineral Blue · SlateGray · Mint Ice

HEX
#648784
RGB
rgb(100, 135, 132)
HSL
hsl(175, 15%, 46%)
HSB
hsb(175, 26%, 53%)
CMYK
cmyk(26%, 0%, 2%, 47%)
Oklch
oklch(59.6% 0.040 189.6)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#CF5744

Crimson · Chocolate · Passion Red

HEX
#CF5744
RGB
rgb(207, 87, 68)
HSL
hsl(8, 59%, 54%)
HSB
hsb(8, 67%, 81%)
CMYK
cmyk(0%, 58%, 67%, 19%)
Oklch
oklch(60.7% 0.156 31.1)

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

#DE9247

Ginger · SandyBrown · Warm Sun

HEX
#DE9247
RGB
rgb(222, 146, 71)
HSL
hsl(30, 70%, 57%)
HSB
hsb(30, 68%, 87%)
CMYK
cmyk(0%, 34%, 68%, 13%)
Oklch
oklch(72.3% 0.129 62.8)

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

#F4CF89

Goose Yellow · Khaki · Warm Sun

HEX
#F4CF89
RGB
rgb(244, 207, 137)
HSL
hsl(39, 83%, 75%)
HSB
hsb(39, 44%, 96%)
CMYK
cmyk(0%, 15%, 44%, 4%)
Oklch
oklch(87.1% 0.097 82.7)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

#574031

Tangerine · DarkOliveGreen · Amber Brown

HEX
#574031
RGB
rgb(87, 64, 49)
HSL
hsl(24, 28%, 27%)
HSB
hsb(24, 44%, 34%)
CMYK
cmyk(0%, 26%, 44%, 66%)
Oklch
oklch(39.3% 0.040 54.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

648784
876467

Analogous

648772
648784
647887

Triadic

648784
846487
878464

Split-Comp.

648784
876478
877264

Tetradic

648784
726487
876467
788764

Contrast Matrix WCAG 2.1 Contrast

648784
CF5744
DE9247
F4CF89
574031
—
1.0
Fail
1.6
Fail
2.6
Fail
2.4
Fail
1.0
Fail
—
1.6
Fail
2.8
Fail
2.3
Fail
1.6
Fail
1.6
Fail
—
1.7
Fail
3.8
AA Large
2.6
Fail
2.8
Fail
1.7
Fail
—
6.5
AA
2.4
Fail
2.3
Fail
3.8
AA Large
6.5
AA
—
White BG
3.9AA Large
4.1AA Large
2.5Fail
1.5Fail
9.6AAA
Black BG
5.3AA
5.1AA
8.3AAA
14.1AAA
2.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

737385
9B9A49
BDBC59
E4E49A
4D4D35

Deuteranopia

716F85
A2AB4A
C2C75E
E6E99E
4E5036

Tritanopia

668585
C94C4D
DA676B
F2A7AA
563738

Achromatopsia

7C7C7C
797979
A0A0A0
D2D2D2
454545

Shades & Tints Shades & Tints

#648784

Dark
Light

#CF5744

Dark
Light

#DE9247

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #648784;
  --color-2: #cf5744;
  --color-3: #de9247;
  --color-4: #f4cf89;
  --color-5: #574031;
}

SCSS

$color-1: #648784;
$color-2: #cf5744;
$color-3: #de9247;
$color-4: #f4cf89;
$color-5: #574031;

TAILWIND

colors: {
  'brand-1': '#648784',
  'brand-2': '#cf5744',
  'brand-3': '#de9247',
  'brand-4': '#f4cf89',
  'brand-5': '#574031',
}

RGB Array

[100, 135, 132], [207, 87, 68], [222, 146, 71], [244, 207, 137], [87, 64, 49]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #648784, #CF5744, #DE9247, #F4CF89, #574031 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: #648784; --color-2: #cf5744; --color-3: #de9247; --color-4: #f4cf89; --color-5: #574031. 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