← Back to Editor

#8A758F · #D54F94 · #D68717 · #E18867 · #664E46

A 5-color palette 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

#8A758F

Dark Plum · Gray · Violet

HEX
#8A758F
RGB
rgb(138, 117, 143)
HSL
hsl(288, 10%, 51%)
HSB
hsb(288, 18%, 56%)
CMYK
cmyk(3%, 18%, 0%, 44%)
Oklch
oklch(59.1% 0.046 319.7)

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

#D54F94

Rose Purple · LightCoral · Rose Pink

HEX
#D54F94
RGB
rgb(213, 79, 148)
HSL
hsl(329, 61%, 57%)
HSB
hsb(329, 63%, 84%)
CMYK
cmyk(0%, 63%, 31%, 16%)
Oklch
oklch(62.6% 0.182 351.7)

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

#D68717

Ochre · Chocolate · Amber Brown

HEX
#D68717
RGB
rgb(214, 135, 23)
HSL
hsl(35, 81%, 46%)
HSB
hsb(35, 89%, 84%)
CMYK
cmyk(0%, 37%, 89%, 16%)
Oklch
oklch(69.0% 0.146 67.5)

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

#E18867

Apricot · DarkSalmon · Warm Sun

HEX
#E18867
RGB
rgb(225, 136, 103)
HSL
hsl(16, 67%, 64%)
HSB
hsb(16, 54%, 88%)
CMYK
cmyk(0%, 40%, 54%, 12%)
Oklch
oklch(71.4% 0.119 41.0)

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

#664E46

Tangerine · DarkOliveGreen · Amber Brown

HEX
#664E46
RGB
rgb(102, 78, 70)
HSL
hsl(15, 19%, 34%)
HSB
hsb(15, 31%, 40%)
CMYK
cmyk(0%, 24%, 31%, 60%)
Oklch
oklch(44.7% 0.035 39.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8A758F
7B8F76

Analogous

7D768F
8A758F
8F7687

Triadic

8A758F
8F8A76
768F8A

Split-Comp.

8A758F
878F76
768F7D

Tetradic

8A758F
8F7D76
7B8F76
76878F

Contrast Matrix WCAG 2.1 Contrast

8A758F
D54F94
D68717
E18867
664E46
—
1.1
Fail
1.5
Fail
1.6
Fail
1.8
Fail
1.1
Fail
—
1.4
Fail
1.5
Fail
2.0
Fail
1.5
Fail
1.4
Fail
—
1.1
Fail
2.7
Fail
1.6
Fail
1.5
Fail
1.1
Fail
—
2.9
Fail
1.8
Fail
2.0
Fail
2.7
Fail
2.9
Fail
—
White BG
4.2AA Large
3.9AA Large
2.9Fail
2.7Fail
7.7AAA
Black BG
5.0AA
5.4AA
7.3AAA
7.9AAA
2.7Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

818189
9B9A83
B4B332
BABA6F
5C5B48

Deuteranopia

828487
A3AD7F
B8BE39
C0C671
5D5F48

Tritanopia

898483
CE7673
D2474C
DD7577
65494A

Achromatopsia

7E7E7E
7F7F7F
929292
9F9F9F
545454

Shades & Tints Shades & Tints

#8A758F

Dark
Light

#D54F94

Dark
Light

#D68717

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8a758f;
  --color-2: #d54f94;
  --color-3: #d68717;
  --color-4: #e18867;
  --color-5: #664e46;
}

SCSS

$color-1: #8a758f;
$color-2: #d54f94;
$color-3: #d68717;
$color-4: #e18867;
$color-5: #664e46;

TAILWIND

colors: {
  'brand-1': '#8a758f',
  'brand-2': '#d54f94',
  'brand-3': '#d68717',
  'brand-4': '#e18867',
  'brand-5': '#664e46',
}

RGB Array

[138, 117, 143], [213, 79, 148], [214, 135, 23], [225, 136, 103], [102, 78, 70]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #8A758F, #D54F94, #D68717, #E18867, #664E46 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: #8a758f; --color-2: #d54f94; --color-3: #d68717; --color-4: #e18867; --color-5: #664e46. 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 general-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