#DB4882 + #BB83A2 + #A9A5B4 + #C3E7D0 + #88E1D5 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#DB4882

Dark Violet · MediumVioletRed · Rose Pink

HEX

#DB4882

RGB

rgb(219, 72, 130)

HSL

hsl(336, 67%, 57%)

HSB

hsb(336, 67%, 86%)

CMYK

cmyk(0%, 67%, 41%, 14%)

Oklch

oklch(62.2% 0.189 0.0)

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

#BB83A2

Mauve · DarkGray · Rose Pink

HEX

#BB83A2

RGB

rgb(187, 131, 162)

HSL

hsl(327, 29%, 62%)

HSB

hsb(327, 30%, 73%)

CMYK

cmyk(0%, 30%, 13%, 27%)

Oklch

oklch(67.5% 0.080 345.1)

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

#A9A5B4

Wisteria · DarkGray · Silver Sand

HEX

#A9A5B4

RGB

rgb(169, 165, 180)

HSL

hsl(256, 9%, 68%)

HSB

hsb(256, 8%, 71%)

CMYK

cmyk(6%, 8%, 0%, 29%)

Oklch

oklch(73.0% 0.022 298.0)

Traditional「Wisteria」· Paint「Silver Sand」· Creative Urban Concrete

#C3E7D0

Celadon · LightGray · Mint Green

HEX

#C3E7D0

RGB

rgb(195, 231, 208)

HSL

hsl(142, 43%, 84%)

HSB

hsb(142, 16%, 91%)

CMYK

cmyk(16%, 0%, 10%, 9%)

Oklch

oklch(89.6% 0.049 157.2)

Traditional「Celadon」· Paint「Mint Green」· Creative Mint Breeze

#88E1D5

Jade · SkyBlue · Lake Green

HEX

#88E1D5

RGB

rgb(136, 225, 213)

HSL

hsl(172, 60%, 71%)

HSB

hsb(172, 40%, 88%)

CMYK

cmyk(40%, 0%, 5%, 12%)

Oklch

oklch(85.0% 0.088 184.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DB4882

48DBA0

Analogous

DB48CC

DB4882

DB5748

Triadic

DB4882

83DB48

4883DB

Split-Comp.

DB4882

48DB57

48CCDB

Tetradic

DB4882

CCDB48

48DBA0

5748DB

Contrast Matrix WCAG 2.1 Contrast

DB4882	BB83A2	A9A5B4	C3E7D0	88E1D5
—	1.3 Fail	1.7 Fail	3.0 Fail	2.6 Fail
1.3 Fail	—	1.3 Fail	2.3 Fail	2.0 Fail
1.7 Fail	1.3 Fail	—	1.8 Fail	1.6 Fail
3.0 Fail	2.3 Fail	1.8 Fail	—	1.1 Fail
2.6 Fail	2.0 Fail	1.6 Fail	1.1 Fail	—

White BG

4.0AA Large

3.1AA Large

2.4Fail

1.3Fail

1.5Fail

Black BG

5.3AA

6.9AA

8.7AAA

15.7AAA

13.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9B9A74

A3A29A

A7A7B0

D3D3D6

AFAFD8

Deuteranopia

A4AF71

A6AA99

A8A8B0

D1CED7

A9A3D9

Tritanopia

D46966

B89593

A9AEAD

C5DADB

8CDADB

Achromatopsia

7B7B7B

979797

A8A8A8

DADADA

C5C5C5

Shades & Tints Shades & Tints

#DB4882

Dark

Light

#BB83A2

Dark

Light

#A9A5B4

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #db4882;
  --color-2: #bb83a2;
  --color-3: #a9a5b4;
  --color-4: #c3e7d0;
  --color-5: #88e1d5;
}

SCSS

$color-1: #db4882;
$color-2: #bb83a2;
$color-3: #a9a5b4;
$color-4: #c3e7d0;
$color-5: #88e1d5;

TAILWIND

colors: {
  'brand-1': '#db4882',
  'brand-2': '#bb83a2',
  'brand-3': '#a9a5b4',
  'brand-4': '#c3e7d0',
  'brand-5': '#88e1d5',
}

RGB Array

[219, 72, 130], [187, 131, 162], [169, 165, 180], [195, 231, 208], [136, 225, 213]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DB4882, #BB83A2, #A9A5B4, #C3E7D0, #88E1D5 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: #db4882; --color-2: #bb83a2; --color-3: #a9a5b4; --color-4: #c3e7d0; --color-5: #88e1d5. 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 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