#9B5878 + #F87273 + #B6D08E + #0F8693 + #31527D · space - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#9B5878

Dark Violet · Gray · Camellia

HEX

#9B5878

RGB

rgb(155, 88, 120)

HSL

hsl(331, 28%, 48%)

HSB

hsb(331, 43%, 61%)

CMYK

cmyk(0%, 43%, 23%, 39%)

Oklch

oklch(54.7% 0.097 350.7)

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

#F87273

Peach Pink · Salmon · Coral Red

HEX

#F87273

RGB

rgb(248, 114, 115)

HSL

hsl(360, 91%, 71%)

HSB

hsb(360, 54%, 97%)

CMYK

cmyk(0%, 54%, 54%, 3%)

Oklch

oklch(71.2% 0.165 21.7)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Soft Aurora

#B6D08E

Willow Green · Tan · Apple Green

HEX

#B6D08E

RGB

rgb(182, 208, 142)

HSL

hsl(84, 41%, 69%)

HSB

hsb(84, 32%, 82%)

CMYK

cmyk(12%, 0%, 32%, 18%)

Oklch

oklch(82.2% 0.092 125.8)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

#0F8693

Lake Blue · Teal · Mint Ice

HEX

#0F8693

RGB

rgb(15, 134, 147)

HSL

hsl(186, 81%, 32%)

HSB

hsb(186, 90%, 58%)

CMYK

cmyk(90%, 9%, 0%, 42%)

Oklch

oklch(56.8% 0.095 207.1)

Traditional「Lake Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#31527D

Indigo · DarkSlateBlue · Prussian Blue

HEX

#31527D

RGB

rgb(49, 82, 125)

HSL

hsl(214, 44%, 34%)

HSB

hsb(214, 61%, 49%)

CMYK

cmyk(61%, 34%, 0%, 51%)

Oklch

oklch(43.4% 0.082 255.6)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9B5878

589D7C

Analogous

9D589C

9B5878

9D5958

Triadic

9B5878

799D58

58799D

Split-Comp.

9B5878

589D59

589C9D

Tetradic

9B5878

9C9D58

589D7C

59589D

Contrast Matrix WCAG 2.1 Contrast

9B5878	F87273	B6D08E	0F8693	31527D
—	1.9 Fail	3.1 AA Large	1.2 Fail	1.5 Fail
1.9 Fail	—	1.6 Fail	1.6 Fail	2.9 Fail
3.1 AA Large	1.6 Fail	—	2.6 Fail	4.7 AA
1.2 Fail	1.6 Fail	2.6 Fail	—	1.8 Fail
1.5 Fail	2.9 Fail	4.7 AA	1.8 Fail	—

White BG

5.2AA

2.7Fail

1.7Fail

4.3AA Large

8.0AAA

Black BG

4.1AA Large

7.6AAA

12.4AAA

4.9AA

2.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

7E7D70

BEBD73

C1C19E

434490

3F4073

Deuteranopia

82876E

C6D073

C0BEA2

3C338F

3D3B70

Tritanopia

986A69

F17373

B7ABAD

158D8D

336A69

Achromatopsia

707070

9A9A9A

C1C1C1

646464

4D4D4D

Shades & Tints Shades & Tints

#9B5878

Dark

Light

#F87273

Dark

Light

#B6D08E

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9b5878;
  --color-2: #f87273;
  --color-3: #b6d08e;
  --color-4: #0f8693;
  --color-5: #31527d;
}

SCSS

$color-1: #9b5878;
$color-2: #f87273;
$color-3: #b6d08e;
$color-4: #0f8693;
$color-5: #31527d;

TAILWIND

colors: {
  'brand-1': '#9b5878',
  'brand-2': '#f87273',
  'brand-3': '#b6d08e',
  'brand-4': '#0f8693',
  'brand-5': '#31527d',
}

RGB Array

[155, 88, 120], [248, 114, 115], [182, 208, 142], [15, 134, 147], [49, 82, 125]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This space-style palette of #9B5878, #F87273, #B6D08E, #0F8693, #31527D 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: #9b5878; --color-2: #f87273; --color-3: #b6d08e; --color-4: #0f8693; --color-5: #31527d. 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