← Back to Editor

#F9DFD2 · #FF558D · #5AA5A8 · #8F94AA · #A54163

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

Color Details Color Details

#F9DFD2

Apricot · Bisque · Peach Orange

HEX
#F9DFD2
RGB
rgb(249, 223, 210)
HSL
hsl(20, 76%, 90%)
HSB
hsb(20, 16%, 98%)
CMYK
cmyk(0%, 10%, 16%, 2%)
Oklch
oklch(92.1% 0.034 48.3)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#FF558D

Rouge · LightCoral · Rose Pink

HEX
#FF558D
RGB
rgb(255, 85, 141)
HSL
hsl(340, 100%, 67%)
HSB
hsb(340, 67%, 100%)
CMYK
cmyk(0%, 67%, 45%, 0%)
Oklch
oklch(69.4% 0.209 4.2)

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

#5AA5A8

Slate Blue · CadetBlue · Lake Green

HEX
#5AA5A8
RGB
rgb(90, 165, 168)
HSL
hsl(182, 31%, 51%)
HSB
hsb(182, 46%, 66%)
CMYK
cmyk(46%, 2%, 0%, 34%)
Oklch
oklch(67.5% 0.075 198.9)

Traditional「Slate Blue」· Paint「Lake Green」· Creative Blush Sunrise

#8F94AA

Azure · LightSlateGray · Cobalt Blue

HEX
#8F94AA
RGB
rgb(143, 148, 170)
HSL
hsl(229, 14%, 61%)
HSB
hsb(229, 16%, 67%)
CMYK
cmyk(16%, 13%, 0%, 33%)
Oklch
oklch(67.0% 0.033 275.3)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

#A54163

Dark Violet · Sienna · Camellia

HEX
#A54163
RGB
rgb(165, 65, 99)
HSL
hsl(340, 43%, 45%)
HSB
hsb(340, 61%, 65%)
CMYK
cmyk(0%, 61%, 40%, 35%)
Oklch
oklch(52.0% 0.136 1.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F9DFD2
D2ECF9

Analogous

F9D2D9
F9DFD2
F9F2D2

Triadic

F9DFD2
D2F9DF
DFD2F9

Split-Comp.

F9DFD2
D2F9F2
D2D9F9

Tetradic

F9DFD2
D9F9D2
D2ECF9
F2D2F9

Contrast Matrix WCAG 2.1 Contrast

F9DFD2
FF558D
5AA5A8
8F94AA
A54163
—
2.4
Fail
2.2
Fail
2.4
Fail
4.7
AA
2.4
Fail
—
1.1
Fail
1.0
Fail
2.0
Fail
2.2
Fail
1.1
Fail
—
1.1
Fail
2.1
Fail
2.4
Fail
1.0
Fail
1.1
Fail
—
2.0
Fail
4.7
AA
2.0
Fail
2.1
Fail
2.0
Fail
—
White BG
1.3Fail
3.0AA Large
2.8Fail
3.0AA Large
5.9AA
Black BG
16.5AAA
6.9AA
7.4AAA
7.0AA
3.5AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

EEEED5
B5B47F
7A7BA7
9191A5
7A795B

Deuteranopia

EFF1D6
BFCC7C
7671A7
9191A3
808759

Tritanopia

F8D8D8
F77572
5EA7A7
8FA0A0
A05453

Achromatopsia

E5E5E5
8E8E8E
8F8F8F
959595
636363

Shades & Tints Shades & Tints

#F9DFD2

Dark
Light

#FF558D

Dark
Light

#5AA5A8

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f9dfd2;
  --color-2: #ff558d;
  --color-3: #5aa5a8;
  --color-4: #8f94aa;
  --color-5: #a54163;
}

SCSS

$color-1: #f9dfd2;
$color-2: #ff558d;
$color-3: #5aa5a8;
$color-4: #8f94aa;
$color-5: #a54163;

TAILWIND

colors: {
  'brand-1': '#f9dfd2',
  'brand-2': '#ff558d',
  'brand-3': '#5aa5a8',
  'brand-4': '#8f94aa',
  'brand-5': '#a54163',
}

RGB Array

[249, 223, 210], [255, 85, 141], [90, 165, 168], [143, 148, 170], [165, 65, 99]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This space-style palette of #F9DFD2, #FF558D, #5AA5A8, #8F94AA, #A54163 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: #f9dfd2; --color-2: #ff558d; --color-3: #5aa5a8; --color-4: #8f94aa; --color-5: #a54163. 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 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