← Back to Editor

#866792 · #9C738D · #C28486 · #DE9971 · #F9AB59

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

#866792

Dark Plum · Gray · Violet

HEX
#866792
RGB
rgb(134, 103, 146)
HSL
hsl(283, 17%, 49%)
HSB
hsb(283, 29%, 57%)
CMYK
cmyk(8%, 29%, 0%, 43%)
Oklch
oklch(56.0% 0.074 316.4)

Traditional「Dark Plum」· Paint「Violet」· Creative Blush Sunrise

#9C738D

Rose Purple · Gray · Rose Pink

HEX
#9C738D
RGB
rgb(156, 115, 141)
HSL
hsl(322, 17%, 53%)
HSB
hsb(322, 26%, 61%)
CMYK
cmyk(0%, 26%, 10%, 39%)
Oklch
oklch(60.5% 0.063 340.8)

Traditional「Rose Purple」· Paint「Rose Pink」· Creative Blush Sunrise

#C28486

Peach Pink · DarkSalmon · Coral Red

HEX
#C28486
RGB
rgb(194, 132, 134)
HSL
hsl(358, 34%, 64%)
HSB
hsb(358, 32%, 76%)
CMYK
cmyk(0%, 32%, 31%, 24%)
Oklch
oklch(67.6% 0.077 17.2)

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

#DE9971

Apricot · DarkSalmon · Warm Sun

HEX
#DE9971
RGB
rgb(222, 153, 113)
HSL
hsl(22, 62%, 66%)
HSB
hsb(22, 49%, 87%)
CMYK
cmyk(0%, 31%, 49%, 13%)
Oklch
oklch(74.2% 0.099 50.8)

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

#F9AB59

Ginger · SandyBrown · Warm Sun

HEX
#F9AB59
RGB
rgb(249, 171, 89)
HSL
hsl(31, 93%, 66%)
HSB
hsb(31, 64%, 98%)
CMYK
cmyk(0%, 31%, 64%, 2%)
Oklch
oklch(80.1% 0.134 65.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

866792
749268

Analogous

716892
866792
926889

Triadic

866792
928668
689286

Split-Comp.

866792
899268
689271

Tetradic

866792
927168
749268
688992

Contrast Matrix WCAG 2.1 Contrast

866792
9C738D
C28486
DE9971
F9AB59
—
1.2
Fail
1.6
Fail
2.0
Fail
2.5
Fail
1.2
Fail
—
1.3
Fail
1.7
Fail
2.1
Fail
1.6
Fail
1.3
Fail
—
1.3
Fail
1.6
Fail
2.0
Fail
1.7
Fail
1.3
Fail
—
1.2
Fail
2.5
Fail
2.1
Fail
1.6
Fail
1.2
Fail
—
White BG
4.8AA
4.0AA Large
3.0AA Large
2.4Fail
1.9Fail
Black BG
4.4AA Large
5.3AA
6.9AA
8.9AAA
11.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

797888
8A8A87
A7A786
C0C07B
D7D76D

Deuteranopia

7A7D85
8D9085
ABAF85
C4C97D
DCE272

Tritanopia

847F7E
9A8281
BF8585
DB8284
F57D80

Achromatopsia

757575
828282
979797
A9A9A9
B9B9B9

Shades & Tints Shades & Tints

#866792

Dark
Light

#9C738D

Dark
Light

#C28486

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #866792;
  --color-2: #9c738d;
  --color-3: #c28486;
  --color-4: #de9971;
  --color-5: #f9ab59;
}

SCSS

$color-1: #866792;
$color-2: #9c738d;
$color-3: #c28486;
$color-4: #de9971;
$color-5: #f9ab59;

TAILWIND

colors: {
  'brand-1': '#866792',
  'brand-2': '#9c738d',
  'brand-3': '#c28486',
  'brand-4': '#de9971',
  'brand-5': '#f9ab59',
}

RGB Array

[134, 103, 146], [156, 115, 141], [194, 132, 134], [222, 153, 113], [249, 171, 89]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #866792, #9C738D, #C28486, #DE9971, #F9AB59 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: #866792; --color-2: #9c738d; --color-3: #c28486; --color-4: #de9971; --color-5: #f9ab59. 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