← Back to Editor

#727181 · #BCB9E4 · #27283C · #36394D · #BFC2E2

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#727181

Ink Gray · Gray · Warm Gray

HEX
#727181
RGB
rgb(114, 113, 129)
HSL
hsl(244, 7%, 47%)
HSB
hsb(244, 12%, 51%)
CMYK
cmyk(12%, 12%, 0%, 49%)
Oklch
oklch(55.5% 0.025 288.4)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

#BCB9E4

Wisteria · LightSteelBlue · Sky Blue

HEX
#BCB9E4
RGB
rgb(188, 185, 228)
HSL
hsl(244, 44%, 81%)
HSB
hsb(244, 19%, 89%)
CMYK
cmyk(18%, 19%, 0%, 11%)
Oklch
oklch(80.3% 0.060 288.2)

Traditional「Wisteria」· Paint「Sky Blue」· Creative Lavender Dream

#27283C

Indigo · DarkSlateGray · Deep Sea Blue

HEX
#27283C
RGB
rgb(39, 40, 60)
HSL
hsl(237, 21%, 19%)
HSB
hsb(237, 35%, 24%)
CMYK
cmyk(35%, 33%, 0%, 76%)
Oklch
oklch(28.5% 0.037 281.6)

Traditional「Indigo」· Paint「Deep Sea Blue」· Creative Blush Sunrise

#36394D

Indigo · DarkSlateGray · Prussian Blue

HEX
#36394D
RGB
rgb(54, 57, 77)
HSL
hsl(232, 18%, 26%)
HSB
hsb(232, 30%, 30%)
CMYK
cmyk(30%, 26%, 0%, 70%)
Oklch
oklch(35.0% 0.035 277.8)

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

#BFC2E2

Azure · LightSteelBlue · Sky Blue

HEX
#BFC2E2
RGB
rgb(191, 194, 226)
HSL
hsl(235, 38%, 82%)
HSB
hsb(235, 15%, 89%)
CMYK
cmyk(15%, 14%, 0%, 11%)
Oklch
oklch(82.2% 0.045 281.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

727181
7F806F

Analogous

6F7780
727181
796F80

Triadic

727181
80716F
6F8071

Split-Comp.

727181
80796F
77806F

Tetradic

727181
806F77
7F806F
6F8079

Contrast Matrix WCAG 2.1 Contrast

727181
BCB9E4
27283C
36394D
BFC2E2
—
2.5
Fail
3.0
AA Large
2.4
Fail
2.7
Fail
2.5
Fail
—
7.7
AAA
6.1
AA
1.1
Fail
3.0
AA Large
7.7
AAA
—
1.3
Fail
8.3
AAA
2.4
Fail
6.1
AA
1.3
Fail
—
6.5
AA
2.7
Fail
1.1
Fail
8.3
AAA
6.5
AA
—
White BG
4.8AA
1.9Fail
14.4AAA
11.4AAA
1.7Fail
Black BG
4.4AA Large
11.2AAA
1.5Fail
1.8Fail
12.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

72727D
BBBBDA
272737
373748
C0C0DA

Deuteranopia

72727C
BBBBD7
272736
373747
C0C0D8

Tritanopia

727A79
BCD1D0
273333
364444
BFD4D3

Achromatopsia

737373
BFBFBF
2A2A2A
3A3A3A
C5C5C5

Shades & Tints Shades & Tints

#727181

Dark
Light

#BCB9E4

Dark
Light

#27283C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #727181;
  --color-2: #bcb9e4;
  --color-3: #27283c;
  --color-4: #36394d;
  --color-5: #bfc2e2;
}

SCSS

$color-1: #727181;
$color-2: #bcb9e4;
$color-3: #27283c;
$color-4: #36394d;
$color-5: #bfc2e2;

TAILWIND

colors: {
  'brand-1': '#727181',
  'brand-2': '#bcb9e4',
  'brand-3': '#27283c',
  'brand-4': '#36394d',
  'brand-5': '#bfc2e2',
}

RGB Array

[114, 113, 129], [188, 185, 228], [39, 40, 60], [54, 57, 77], [191, 194, 226]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #727181, #BCB9E4, #27283C, #36394D, #BFC2E2 is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #727181; --color-2: #bcb9e4; --color-3: #27283c; --color-4: #36394d; --color-5: #bfc2e2. 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. Restrained colors convey professionalism and trust. 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