← Back to Editor

#B77A94 · #5A454C · #291717 · #72737C · #CCD5D9

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

#B77A94

Dark Violet · DarkGray · Rose Pink

HEX
#B77A94
RGB
rgb(183, 122, 148)
HSL
hsl(334, 30%, 60%)
HSB
hsb(334, 33%, 72%)
CMYK
cmyk(0%, 33%, 19%, 28%)
Oklch
oklch(65.0% 0.083 352.5)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

#5A454C

Dark Violet · DarkSlateGray · Camellia

HEX
#5A454C
RGB
rgb(90, 69, 76)
HSL
hsl(340, 13%, 31%)
HSB
hsb(340, 23%, 35%)
CMYK
cmyk(0%, 23%, 16%, 65%)
Oklch
oklch(41.5% 0.031 356.6)

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

#291717

Crimson · Black · Deep Berry

HEX
#291717
RGB
rgb(41, 23, 23)
HSL
hsl(0, 28%, 13%)
HSB
hsb(0, 44%, 16%)
CMYK
cmyk(0%, 44%, 44%, 84%)
Oklch
oklch(22.9% 0.029 19.6)

Traditional「Crimson」· Paint「Deep Berry」· Creative Blush Sunrise

#72737C

Ink Gray · Gray · Warm Gray

HEX
#72737C
RGB
rgb(114, 115, 124)
HSL
hsl(234, 4%, 47%)
HSB
hsb(234, 8%, 49%)
CMYK
cmyk(8%, 7%, 0%, 51%)
Oklch
oklch(55.8% 0.014 280.9)

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

#CCD5D9

Sky Blue · LightGray · Glacier Blue

HEX
#CCD5D9
RGB
rgb(204, 213, 217)
HSL
hsl(198, 15%, 83%)
HSB
hsb(198, 6%, 85%)
CMYK
cmyk(6%, 2%, 0%, 15%)
Oklch
oklch(86.7% 0.011 226.0)

Traditional「Sky Blue」· Paint「Glacier Blue」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B77A94
7AB89D

Analogous

B87AB4
B77A94
B87E7A

Triadic

B77A94
95B87A
7A95B8

Split-Comp.

B77A94
7AB87E
7AB4B8

Tetradic

B77A94
B4B87A
7AB89D
7E7AB8

Contrast Matrix WCAG 2.1 Contrast

B77A94
5A454C
291717
72737C
CCD5D9
—
2.6
Fail
5.1
AA
1.4
Fail
2.3
Fail
2.6
Fail
—
1.9
Fail
1.9
Fail
5.9
AA
5.1
AA
1.9
Fail
—
3.6
AA Large
11.5
AAA
1.4
Fail
1.9
Fail
3.6
AA Large
—
3.2
AA Large
2.3
Fail
5.9
AA
11.5
AAA
3.2
AA Large
—
White BG
3.4AA Large
8.8AAA
17.1AAA
4.7AA
1.5Fail
Black BG
6.2AA
2.4Fail
1.2Fail
4.5AA Large
14.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9D9C8E
51514A
212117
72727A
D0D0D8

Deuteranopia

A0A58C
52544A
222417
727279
CFCFD8

Tritanopia

B48988
594949
281717
727878
CCD7D7

Achromatopsia

8F8F8F
4C4C4C
1C1C1C
747474
D3D3D3

Shades & Tints Shades & Tints

#B77A94

Dark
Light

#5A454C

Dark
Light

#291717

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b77a94;
  --color-2: #5a454c;
  --color-3: #291717;
  --color-4: #72737c;
  --color-5: #ccd5d9;
}

SCSS

$color-1: #b77a94;
$color-2: #5a454c;
$color-3: #291717;
$color-4: #72737c;
$color-5: #ccd5d9;

TAILWIND

colors: {
  'brand-1': '#b77a94',
  'brand-2': '#5a454c',
  'brand-3': '#291717',
  'brand-4': '#72737c',
  'brand-5': '#ccd5d9',
}

RGB Array

[183, 122, 148], [90, 69, 76], [41, 23, 23], [114, 115, 124], [204, 213, 217]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B77A94, #5A454C, #291717, #72737C, #CCD5D9 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: #b77a94; --color-2: #5a454c; --color-3: #291717; --color-4: #72737c; --color-5: #ccd5d9. 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