← Back to Editor

#663961 · #87476A · #D96879 · #F1A37D · #F4D0A5

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 LibraryData Visualization

Color Details Color Details

#663961

Rose Purple · DimGray · Eggplant

HEX
#663961
RGB
rgb(102, 57, 97)
HSL
hsl(307, 28%, 31%)
HSB
hsb(307, 44%, 40%)
CMYK
cmyk(0%, 44%, 5%, 60%)
Oklch
oklch(41.5% 0.086 331.1)

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

#87476A

Rose Purple · DimGray · Camellia

HEX
#87476A
RGB
rgb(135, 71, 106)
HSL
hsl(327, 31%, 40%)
HSB
hsb(327, 47%, 53%)
CMYK
cmyk(0%, 47%, 21%, 47%)
Oklch
oklch(48.7% 0.098 347.4)

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

#D96879

Peach Pink · LightCoral · Coral Red

HEX
#D96879
RGB
rgb(217, 104, 121)
HSL
hsl(351, 60%, 63%)
HSB
hsb(351, 52%, 85%)
CMYK
cmyk(0%, 52%, 44%, 15%)
Oklch
oklch(65.6% 0.142 12.4)

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

#F1A37D

Apricot · LightSalmon · Warm Sun

HEX
#F1A37D
RGB
rgb(241, 163, 125)
HSL
hsl(20, 81%, 72%)
HSB
hsb(20, 48%, 95%)
CMYK
cmyk(0%, 32%, 48%, 5%)
Oklch
oklch(78.3% 0.106 46.7)

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

#F4D0A5

Goose Yellow · Wheat · Peach Orange

HEX
#F4D0A5
RGB
rgb(244, 208, 165)
HSL
hsl(33, 78%, 80%)
HSB
hsb(33, 32%, 96%)
CMYK
cmyk(0%, 15%, 32%, 4%)
Oklch
oklch(87.8% 0.069 71.7)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

663961
39653E

Analogous

543965
663961
65394A

Triadic

663961
606539
396065

Split-Comp.

663961
4A6539
396554

Tetradic

663961
655439
39653E
394A65

Contrast Matrix WCAG 2.1 Contrast

663961
87476A
D96879
F1A37D
F4D0A5
—
1.4
Fail
2.7
Fail
4.4
AA Large
6.2
AA
1.4
Fail
—
2.0
Fail
3.3
AA Large
4.6
AA
2.7
Fail
2.0
Fail
—
1.7
Fail
2.3
Fail
4.4
AA Large
3.3
AA Large
1.7
Fail
—
1.4
Fail
6.2
AA
4.6
AA
2.3
Fail
1.4
Fail
—
White BG
9.0AAA
6.7AA
3.4AA Large
2.0Fail
1.5Fail
Black BG
2.3Fail
3.1AA Large
6.2AA
10.3AAA
14.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

535257
6B6B62
A8A775
CFCF86
E4E4AF

Deuteranopia

555855
6F745F
AFB774
D4DA88
E7E9B2

Tritanopia

64504E
845B59
D37271
ED8D8F
F2B8B9

Achromatopsia

4B4B4B
5E5E5E
8C8C8C
B6B6B6
D6D6D6

Shades & Tints Shades & Tints

#663961

Dark
Light

#87476A

Dark
Light

#D96879

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #663961;
  --color-2: #87476a;
  --color-3: #d96879;
  --color-4: #f1a37d;
  --color-5: #f4d0a5;
}

SCSS

$color-1: #663961;
$color-2: #87476a;
$color-3: #d96879;
$color-4: #f1a37d;
$color-5: #f4d0a5;

TAILWIND

colors: {
  'brand-1': '#663961',
  'brand-2': '#87476a',
  'brand-3': '#d96879',
  'brand-4': '#f1a37d',
  'brand-5': '#f4d0a5',
}

RGB Array

[102, 57, 97], [135, 71, 106], [217, 104, 121], [241, 163, 125], [244, 208, 165]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #663961, #87476A, #D96879, #F1A37D, #F4D0A5 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: #663961; --color-2: #87476a; --color-3: #d96879; --color-4: #f1a37d; --color-5: #f4d0a5. 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 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