← Back to Editor

#87A3BD · #170D07 · #910431 · #2F1D37 · #DEE84F

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

#87A3BD

Sky Blue · DarkGray · Cobalt Blue

HEX
#87A3BD
RGB
rgb(135, 163, 189)
HSL
hsl(209, 29%, 64%)
HSB
hsb(209, 29%, 74%)
CMYK
cmyk(29%, 14%, 0%, 26%)
Oklch
oklch(70.3% 0.049 246.6)

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

#170D07

Tangerine · Black · Cinnamon

HEX
#170D07
RGB
rgb(23, 13, 7)
HSL
hsl(23, 53%, 6%)
HSB
hsb(23, 70%, 9%)
CMYK
cmyk(0%, 43%, 70%, 91%)
Oklch
oklch(17.1% 0.021 53.1)

Traditional「Tangerine」· Paint「Cinnamon」· Creative Blush Sunrise

#910431

Dark Violet · Brown · Camellia

HEX
#910431
RGB
rgb(145, 4, 49)
HSL
hsl(341, 95%, 29%)
HSB
hsb(341, 97%, 57%)
CMYK
cmyk(0%, 97%, 66%, 43%)
Oklch
oklch(42.0% 0.165 13.7)

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

#2F1D37

Dark Plum · DarkSlateGray · Dark Purple

HEX
#2F1D37
RGB
rgb(47, 29, 55)
HSL
hsl(282, 31%, 16%)
HSB
hsb(282, 47%, 22%)
CMYK
cmyk(15%, 47%, 0%, 78%)
Oklch
oklch(26.6% 0.053 314.9)

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

#DEE84F

Fresh Green · GreenYellow · Sunflower

HEX
#DEE84F
RGB
rgb(222, 232, 79)
HSL
hsl(64, 77%, 61%)
HSB
hsb(64, 66%, 91%)
CMYK
cmyk(4%, 0%, 66%, 9%)
Oklch
oklch(89.6% 0.171 113.0)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

87A3BD
BEA289

Analogous

89BEBD
87A3BD
8989BE

Triadic

87A3BD
BE89A4
A4BE89

Split-Comp.

87A3BD
BE8989
BEBD89

Tetradic

87A3BD
BD89BE
BEA289
89BE89

Contrast Matrix WCAG 2.1 Contrast

87A3BD
170D07
910431
2F1D37
DEE84F
—
7.3
AAA
3.5
AA Large
5.9
AA
2.0
Fail
7.3
AAA
—
2.1
Fail
1.2
Fail
14.4
AAA
3.5
AA Large
2.1
Fail
—
1.7
Fail
7.0
AA
5.9
AA
1.2
Fail
1.7
Fail
—
11.7
AAA
2.0
Fail
14.4
AAA
7.0
AA
11.7
AAA
—
White BG
2.6Fail
19.1AAA
9.3AAA
15.5AAA
1.3Fail
Black BG
8.0AAA
1.1Fail
2.3Fail
1.4Fail
15.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9393B7
131308
545326
272731
E2E274

Deuteranopia

928FB5
131409
5C6724
282A2F
E2E17D

Tritanopia

88B2B1
160A0A
8A1E1C
2E2C2B
DE9198

Achromatopsia

9E9E9E
0F0F0F
333333
252525
D4D4D4

Shades & Tints Shades & Tints

#87A3BD

Dark
Light

#170D07

Dark
Light

#910431

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #87a3bd;
  --color-2: #170d07;
  --color-3: #910431;
  --color-4: #2f1d37;
  --color-5: #dee84f;
}

SCSS

$color-1: #87a3bd;
$color-2: #170d07;
$color-3: #910431;
$color-4: #2f1d37;
$color-5: #dee84f;

TAILWIND

colors: {
  'brand-1': '#87a3bd',
  'brand-2': '#170d07',
  'brand-3': '#910431',
  'brand-4': '#2f1d37',
  'brand-5': '#dee84f',
}

RGB Array

[135, 163, 189], [23, 13, 7], [145, 4, 49], [47, 29, 55], [222, 232, 79]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #87A3BD, #170D07, #910431, #2F1D37, #DEE84F is ideal for: tech websites, dark mode UIs, game UIs, 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: #87a3bd; --color-2: #170d07; --color-3: #910431; --color-4: #2f1d37; --color-5: #dee84f. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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