← Back to Editor

#525150 · #866697 · #F705E7 · #F60593 · #867221

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

#525150

Ink Gray · DarkSlateGray · Charcoal

HEX
#525150
RGB
rgb(82, 81, 80)
HSL
hsl(30, 1%, 32%)
HSB
hsb(30, 2%, 32%)
CMYK
cmyk(0%, 1%, 2%, 68%)
Oklch
oklch(43.6% 0.002 67.8)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

#866697

Dark Plum · SlateGray · Violet

HEX
#866697
RGB
rgb(134, 102, 151)
HSL
hsl(279, 19%, 50%)
HSB
hsb(279, 32%, 59%)
CMYK
cmyk(11%, 32%, 0%, 41%)
Oklch
oklch(56.1% 0.082 313.5)

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

#F705E7

Rose Purple · Magenta · Violet

HEX
#F705E7
RGB
rgb(247, 5, 231)
HSL
hsl(304, 96%, 49%)
HSB
hsb(304, 98%, 97%)
CMYK
cmyk(0%, 98%, 6%, 3%)
Oklch
oklch(67.6% 0.304 332.0)

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

#F60593

Rose Purple · DeepPink · Camellia

HEX
#F60593
RGB
rgb(246, 5, 147)
HSL
hsl(325, 96%, 49%)
HSB
hsb(325, 98%, 96%)
CMYK
cmyk(0%, 98%, 40%, 4%)
Oklch
oklch(63.6% 0.260 355.0)

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

#867221

Ochre · Olive · Honey Gold

HEX
#867221
RGB
rgb(134, 114, 33)
HSL
hsl(48, 60%, 33%)
HSB
hsb(48, 75%, 53%)
CMYK
cmyk(0%, 15%, 75%, 47%)
Oklch
oklch(55.6% 0.100 94.7)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

525150
515252

Analogous

525151
525150
525251

Triadic

525150
515252
525152

Split-Comp.

525150
515252
515152

Tetradic

525150
515251
515252
525152

Contrast Matrix WCAG 2.1 Contrast

525150
866697
F705E7
F60593
867221
—
1.6
Fail
2.3
Fail
2.0
Fail
1.7
Fail
1.6
Fail
—
1.4
Fail
1.2
Fail
1.0
Fail
2.3
Fail
1.4
Fail
—
1.1
Fail
1.4
Fail
2.0
Fail
1.2
Fail
1.1
Fail
—
1.2
Fail
1.7
Fail
1.0
Fail
1.4
Fail
1.2
Fail
—
White BG
7.9AAA
4.8AA
3.4AA Large
3.9AA Large
4.7AA
Black BG
2.7Fail
4.4AA Large
6.1AA
5.4AA
4.4AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

525250
78788B
8E8CB0
8E8B71
7D7D35

Deuteranopia

525250
7A7C88
9CAEA3
9CAE68
7F8039

Tritanopia

525050
848280
EB857C
EA5650
854447

Achromatopsia

515151
757575
676767
5D5D5D
6F6F6F

Shades & Tints Shades & Tints

#525150

Dark
Light

#866697

Dark
Light

#F705E7

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #525150;
  --color-2: #866697;
  --color-3: #f705e7;
  --color-4: #f60593;
  --color-5: #867221;
}

SCSS

$color-1: #525150;
$color-2: #866697;
$color-3: #f705e7;
$color-4: #f60593;
$color-5: #867221;

TAILWIND

colors: {
  'brand-1': '#525150',
  'brand-2': '#866697',
  'brand-3': '#f705e7',
  'brand-4': '#f60593',
  'brand-5': '#867221',
}

RGB Array

[82, 81, 80], [134, 102, 151], [247, 5, 231], [246, 5, 147], [134, 114, 33]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #525150, #866697, #F705E7, #F60593, #867221 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: #525150; --color-2: #866697; --color-3: #f705e7; --color-4: #f60593; --color-5: #867221. 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