← Back to Editor

#7D40BC · #9B5F91 · #B97D66 · #DEA431 · #FEC503

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

#7D40BC

Dark Plum · DarkOrchid · Violet

HEX
#7D40BC
RGB
rgb(125, 64, 188)
HSL
hsl(270, 49%, 49%)
HSB
hsb(270, 66%, 74%)
CMYK
cmyk(34%, 66%, 0%, 26%)
Oklch
oklch(51.0% 0.187 302.9)

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

#9B5F91

Rose Purple · Gray · Violet

HEX
#9B5F91
RGB
rgb(155, 95, 145)
HSL
hsl(310, 24%, 49%)
HSB
hsb(310, 39%, 61%)
CMYK
cmyk(0%, 39%, 6%, 39%)
Oklch
oklch(56.9% 0.103 333.1)

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

#B97D66

Tangerine · DarkSalmon · Warm Sun

HEX
#B97D66
RGB
rgb(185, 125, 102)
HSL
hsl(17, 37%, 56%)
HSB
hsb(17, 45%, 73%)
CMYK
cmyk(0%, 32%, 45%, 27%)
Oklch
oklch(64.6% 0.082 41.8)

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

#DEA431

Ginger · GoldenRod · Sunflower

HEX
#DEA431
RGB
rgb(222, 164, 49)
HSL
hsl(40, 72%, 53%)
HSB
hsb(40, 78%, 87%)
CMYK
cmyk(0%, 26%, 78%, 13%)
Oklch
oklch(75.5% 0.141 79.9)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#FEC503

Ochre · Gold · Honey Gold

HEX
#FEC503
RGB
rgb(254, 197, 3)
HSL
hsl(46, 99%, 50%)
HSB
hsb(46, 99%, 100%)
CMYK
cmyk(0%, 22%, 99%, 0%)
Oklch
oklch(85.1% 0.174 87.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

7D40BC
7DBA40

Analogous

4040BA
7D40BC
BA40BA

Triadic

7D40BC
BA7D40
40BA7D

Split-Comp.

7D40BC
BABA40
40BA40

Tetradic

7D40BC
BA4040
7DBA40
40BABA

Contrast Matrix WCAG 2.1 Contrast

7D40BC
9B5F91
B97D66
DEA431
FEC503
—
1.3
Fail
1.9
Fail
2.8
Fail
4.0
AA Large
1.3
Fail
—
1.4
Fail
2.1
Fail
3.0
Fail
1.9
Fail
1.4
Fail
—
1.5
Fail
2.1
Fail
2.8
Fail
2.1
Fail
1.5
Fail
—
1.4
Fail
4.0
AA Large
3.0
Fail
2.1
Fail
1.4
Fail
—
White BG
6.3AA
4.7AA
3.4AA Large
2.2Fail
1.6Fail
Black BG
3.3AA Large
4.4AA Large
6.2AA
9.5AAA
13.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

63629E
818085
9F9E6C
C5C44D
E5E532

Deuteranopia

666B97
858982
A3A76D
C8CD54
E9ED3D

Tritanopia

7A8681
987B79
B67071
DB6368
FB575F

Achromatopsia

606060
777777
8C8C8C
A8A8A8
C0C0C0

Shades & Tints Shades & Tints

#7D40BC

Dark
Light

#9B5F91

Dark
Light

#B97D66

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #7d40bc;
  --color-2: #9b5f91;
  --color-3: #b97d66;
  --color-4: #dea431;
  --color-5: #fec503;
}

SCSS

$color-1: #7d40bc;
$color-2: #9b5f91;
$color-3: #b97d66;
$color-4: #dea431;
$color-5: #fec503;

TAILWIND

colors: {
  'brand-1': '#7d40bc',
  'brand-2': '#9b5f91',
  'brand-3': '#b97d66',
  'brand-4': '#dea431',
  'brand-5': '#fec503',
}

RGB Array

[125, 64, 188], [155, 95, 145], [185, 125, 102], [222, 164, 49], [254, 197, 3]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #7D40BC, #9B5F91, #B97D66, #DEA431, #FEC503 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: #7d40bc; --color-2: #9b5f91; --color-3: #b97d66; --color-4: #dea431; --color-5: #fec503. 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