← Back to Editor

#E9608C · #9A517F · #69597D · #727BA4 · #6887C7

space

A 5-color space palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#E9608C

Rouge · LightCoral · Rose Pink

HEX
#E9608C
RGB
rgb(233, 96, 140)
HSL
hsl(341, 76%, 65%)
HSB
hsb(341, 59%, 91%)
CMYK
cmyk(0%, 59%, 40%, 9%)
Oklch
oklch(67.3% 0.174 2.9)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

#9A517F

Rose Purple · Gray · Camellia

HEX
#9A517F
RGB
rgb(154, 81, 127)
HSL
hsl(322, 31%, 46%)
HSB
hsb(322, 47%, 60%)
CMYK
cmyk(0%, 47%, 18%, 40%)
Oklch
oklch(53.7% 0.113 343.1)

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

#69597D

Deep Indigo · DimGray · Violet

HEX
#69597D
RGB
rgb(105, 89, 125)
HSL
hsl(267, 17%, 42%)
HSB
hsb(267, 29%, 49%)
CMYK
cmyk(16%, 29%, 0%, 51%)
Oklch
oklch(49.4% 0.059 304.6)

Traditional「Deep Indigo」· Paint「Violet」· Creative Blush Sunrise

#727BA4

Azure · LightSlateGray · Navy Blue

HEX
#727BA4
RGB
rgb(114, 123, 164)
HSL
hsl(229, 22%, 55%)
HSB
hsb(229, 30%, 64%)
CMYK
cmyk(30%, 25%, 0%, 36%)
Oklch
oklch(59.1% 0.064 274.7)

Traditional「Azure」· Paint「Navy Blue」· Creative Blush Sunrise

#6887C7

Azure · SteelBlue · Navy Blue

HEX
#6887C7
RGB
rgb(104, 135, 199)
HSL
hsl(220, 46%, 59%)
HSB
hsb(220, 48%, 78%)
CMYK
cmyk(48%, 32%, 0%, 22%)
Oklch
oklch(62.7% 0.103 263.9)

Traditional「Azure」· Paint「Navy Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E9608C
62EABF

Analogous

EA62D1
E9608C
EA7B62

Triadic

E9608C
8DEA62
628DEA

Split-Comp.

E9608C
62EA7B
62D1EA

Tetradic

E9608C
D1EA62
62EABF
7B62EA

Contrast Matrix WCAG 2.1 Contrast

E9608C
9A517F
69597D
727BA4
6887C7
—
1.7
Fail
2.0
Fail
1.3
Fail
1.1
Fail
1.7
Fail
—
1.2
Fail
1.3
Fail
1.5
Fail
2.0
Fail
1.2
Fail
—
1.5
Fail
1.8
Fail
1.3
Fail
1.3
Fail
1.5
Fail
—
1.2
Fail
1.1
Fail
1.5
Fail
1.8
Fail
1.2
Fail
—
White BG
3.2AA Large
5.4AA
6.3AA
4.1AA Large
3.6AA Large
Black BG
6.5AA
3.9AA Large
3.3AA Large
5.1AA
5.9AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

AEAC81
7A7A74
626274
76769A
7576B8

Deuteranopia

B6C07F
7F8471
636472
757598
7471B4

Tritanopia

E27977
966B69
686D6C
729291
6AABA9

Achromatopsia

8E8E8E
6C6C6C
626262
7D7D7D
858585

Shades & Tints Shades & Tints

#E9608C

Dark
Light

#9A517F

Dark
Light

#69597D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e9608c;
  --color-2: #9a517f;
  --color-3: #69597d;
  --color-4: #727ba4;
  --color-5: #6887c7;
}

SCSS

$color-1: #e9608c;
$color-2: #9a517f;
$color-3: #69597d;
$color-4: #727ba4;
$color-5: #6887c7;

TAILWIND

colors: {
  'brand-1': '#e9608c',
  'brand-2': '#9a517f',
  'brand-3': '#69597d',
  'brand-4': '#727ba4',
  'brand-5': '#6887c7',
}

RGB Array

[233, 96, 140], [154, 81, 127], [105, 89, 125], [114, 123, 164], [104, 135, 199]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This space-style palette of #E9608C, #9A517F, #69597D, #727BA4, #6887C7 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: #e9608c; --color-2: #9a517f; --color-3: #69597d; --color-4: #727ba4; --color-5: #6887c7. 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 space-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