#777380 + #CF9BCA + #9CABC5 + #69BABF + #36CABA · dark - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#777380

Ink Gray · Gray · Warm Gray

HEX

#777380

RGB

rgb(119, 115, 128)

HSL

hsl(258, 5%, 48%)

HSB

hsb(258, 10%, 50%)

CMYK

cmyk(7%, 10%, 0%, 50%)

Oklch

oklch(56.3% 0.020 299.8)

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

#CF9BCA

Mauve · Silver · Lilac Purple

HEX

#CF9BCA

RGB

rgb(207, 155, 202)

HSL

hsl(306, 35%, 71%)

HSB

hsb(306, 25%, 81%)

CMYK

cmyk(0%, 25%, 2%, 19%)

Oklch

oklch(75.3% 0.088 329.7)

Traditional「Mauve」· Paint「Lilac Purple」· Creative Rose Petal

#9CABC5

Azure · DarkGray · Cobalt Blue

HEX

#9CABC5

RGB

rgb(156, 171, 197)

HSL

hsl(218, 26%, 69%)

HSB

hsb(218, 21%, 77%)

CMYK

cmyk(21%, 13%, 0%, 23%)

Oklch

oklch(73.8% 0.041 261.5)

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

#69BABF

Slate Blue · MediumAquaMarine · Lake Green

HEX

#69BABF

RGB

rgb(105, 186, 191)

HSL

hsl(183, 40%, 58%)

HSB

hsb(183, 45%, 75%)

CMYK

cmyk(45%, 3%, 0%, 25%)

Oklch

oklch(73.9% 0.080 200.8)

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

#36CABA

Mineral Blue · MediumTurquoise · Mint Ice

HEX

#36CABA

RGB

rgb(54, 202, 186)

HSL

hsl(174, 58%, 50%)

HSB

hsb(174, 73%, 79%)

CMYK

cmyk(73%, 0%, 8%, 21%)

Oklch

oklch(76.0% 0.123 184.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

777380

7D8174

Analogous

747781

777380

7E7481

Triadic

777380

817874

748178

Split-Comp.

777380

817E74

778174

Tetradic

777380

817477

7D8174

74817E

Contrast Matrix WCAG 2.1 Contrast

777380	CF9BCA	9CABC5	69BABF	36CABA
—	2.0 Fail	2.0 Fail	2.1 Fail	2.3 Fail
2.0 Fail	—	1.0 Fail	1.0 Fail	1.1 Fail
2.0 Fail	1.0 Fail	—	1.0 Fail	1.1 Fail
2.1 Fail	1.0 Fail	1.0 Fail	—	1.1 Fail
2.3 Fail	1.1 Fail	1.1 Fail	1.1 Fail	—

White BG

4.6AA

2.3Fail

2.2Fail

2.0Fail

Black BG

4.5AA

9.2AAA

9.0AAA

9.4AAA

10.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

75757D

B8B8BF

A2A3BF

8C8DBE

7677BE

Deuteranopia

76767C

BCBFBC

A2A1BD

8781BE

6E62BF

Tritanopia

777A7A

CCB6B4

9DBAB9

6DBDBD

3DC1C2

Achromatopsia

767676

B0B0B0

A9A9A9

A2A2A2

9C9C9C

Shades & Tints Shades & Tints

#777380

Dark

Light

#CF9BCA

Dark

Light

#9CABC5

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #777380;
  --color-2: #cf9bca;
  --color-3: #9cabc5;
  --color-4: #69babf;
  --color-5: #36caba;
}

SCSS

$color-1: #777380;
$color-2: #cf9bca;
$color-3: #9cabc5;
$color-4: #69babf;
$color-5: #36caba;

TAILWIND

colors: {
  'brand-1': '#777380',
  'brand-2': '#cf9bca',
  'brand-3': '#9cabc5',
  'brand-4': '#69babf',
  'brand-5': '#36caba',
}

RGB Array

[119, 115, 128], [207, 155, 202], [156, 171, 197], [105, 186, 191], [54, 202, 186]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This dark-style palette of #777380, #CF9BCA, #9CABC5, #69BABF, #36CABA 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: #777380; --color-2: #cf9bca; --color-3: #9cabc5; --color-4: #69babf; --color-5: #36caba. 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 dark-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