#FF6CCD + #CF9BCA + #A0CAC8 + #70F9C5 + #777380 · dark - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#FF6CCD

Mauve · Orchid · Rose Pink

HEX

#FF6CCD

RGB

rgb(255, 108, 205)

HSL

hsl(320, 100%, 71%)

HSB

hsb(320, 58%, 100%)

CMYK

cmyk(0%, 58%, 20%, 0%)

Oklch

oklch(74.1% 0.207 342.9)

Traditional「Mauve」· Paint「Rose Pink」· Creative Rose Petal

#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

#A0CAC8

Jade · LightSteelBlue · Lake Green

HEX

#A0CAC8

RGB

rgb(160, 202, 200)

HSL

hsl(177, 28%, 71%)

HSB

hsb(177, 21%, 79%)

CMYK

cmyk(21%, 0%, 1%, 21%)

Oklch

oklch(80.8% 0.044 192.7)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#70F9C5

Jade · MediumAquaMarine · Apple Green

HEX

#70F9C5

RGB

rgb(112, 249, 197)

HSL

hsl(157, 92%, 71%)

HSB

hsb(157, 55%, 98%)

CMYK

cmyk(55%, 0%, 21%, 2%)

Oklch

oklch(89.2% 0.142 165.6)

Traditional「Jade」· Paint「Apple Green」· Creative Arctic Pool

#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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FF6CCD

6BFF9C

Analogous

E66BFF

FF6CCD

FF6B84

Triadic

FF6CCD

CEFF6B

6BCEFF

Split-Comp.

FF6CCD

84FF6B

6BFFE6

Tetradic

FF6CCD

FFE66B

6BFF9C

6B84FF

Contrast Matrix WCAG 2.1 Contrast

FF6CCD	CF9BCA	A0CAC8	70F9C5	777380
—	1.1 Fail	1.4 Fail	1.9 Fail	1.8 Fail
1.1 Fail	—	1.3 Fail	1.7 Fail	2.0 Fail
1.4 Fail	1.3 Fail	—	1.4 Fail	2.6 Fail
1.9 Fail	1.7 Fail	1.4 Fail	—	3.5 AA Large
1.8 Fail	2.0 Fail	2.6 Fail	3.5 AA Large	—

White BG

2.5Fail

2.3Fail

1.8Fail

1.3Fail

4.6AA

Black BG

8.3AAA

9.2AAA

11.8AAA

16.0AAA

4.5AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BFBEB6

B8B8BF

B2B3C8

ABADD2

75757D

Deuteranopia

C8D3B0

BCBFBC

B0ADC9

A399D5

76767C

Tritanopia

F8A39F

CCB6B4

A2C9C9

77DCDE

777A7A

Achromatopsia

A3A3A3

B0B0B0

BDBDBD

CACACA

767676

Shades & Tints Shades & Tints

#FF6CCD

Dark

Light

#CF9BCA

Dark

Light

#A0CAC8

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ff6ccd;
  --color-2: #cf9bca;
  --color-3: #a0cac8;
  --color-4: #70f9c5;
  --color-5: #777380;
}

SCSS

$color-1: #ff6ccd;
$color-2: #cf9bca;
$color-3: #a0cac8;
$color-4: #70f9c5;
$color-5: #777380;

TAILWIND

colors: {
  'brand-1': '#ff6ccd',
  'brand-2': '#cf9bca',
  'brand-3': '#a0cac8',
  'brand-4': '#70f9c5',
  'brand-5': '#777380',
}

RGB Array

[255, 108, 205], [207, 155, 202], [160, 202, 200], [112, 249, 197], [119, 115, 128]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This dark-style palette of #FF6CCD, #CF9BCA, #A0CAC8, #70F9C5, #777380 is ideal for: health products, baby brands, fresh-style blogs. 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: #ff6ccd; --color-2: #cf9bca; --color-3: #a0cac8; --color-4: #70f9c5; --color-5: #777380. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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