← Back to Editor

#95E4DD · #A1A3B3 · #A76D96 · #AB3C85 · #AD0B70

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 Library

Color Details Color Details

#95E4DD

Jade · LightBlue · Lake Green

HEX
#95E4DD
RGB
rgb(149, 228, 221)
HSL
hsl(175, 59%, 74%)
HSB
hsb(175, 35%, 89%)
CMYK
cmyk(35%, 0%, 3%, 11%)
Oklch
oklch(86.6% 0.078 188.7)

TraditionalJade」· PaintLake Green」· Creative Arctic Pool

#A1A3B3

Azure · DarkGray · Cobalt Blue

HEX
#A1A3B3
RGB
rgb(161, 163, 179)
HSL
hsl(233, 11%, 67%)
HSB
hsb(233, 10%, 70%)
CMYK
cmyk(10%, 9%, 0%, 30%)
Oklch
oklch(71.9% 0.023 280.1)

TraditionalAzure」· PaintCobalt Blue」· Creative Twilight Haze

#A76D96

Rose Purple · Gray · Violet

HEX
#A76D96
RGB
rgb(167, 109, 150)
HSL
hsl(318, 25%, 54%)
HSB
hsb(318, 35%, 65%)
CMYK
cmyk(0%, 35%, 10%, 35%)
Oklch
oklch(60.9% 0.092 338.2)

TraditionalRose Purple」· PaintViolet」· Creative Blush Sunrise

#AB3C85

Rose Purple · MediumVioletRed · Camellia

HEX
#AB3C85
RGB
rgb(171, 60, 133)
HSL
hsl(321, 48%, 45%)
HSB
hsb(321, 65%, 67%)
CMYK
cmyk(0%, 65%, 22%, 33%)
Oklch
oklch(53.6% 0.166 343.8)

TraditionalRose Purple」· PaintCamellia」· Creative Blush Sunrise

#AD0B70

Rose Purple · MediumVioletRed · Camellia

HEX
#AD0B70
RGB
rgb(173, 11, 112)
HSL
hsl(323, 88%, 36%)
HSB
hsb(323, 94%, 68%)
CMYK
cmyk(0%, 94%, 35%, 32%)
Oklch
oklch(49.5% 0.201 350.8)

TraditionalRose Purple」· PaintCamellia」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

95E4DD
E4969C

Analogous

96E4B6
95E4DD
96C3E4

Triadic

95E4DD
DD96E4
E4DD96

Split-Comp.

95E4DD
E496C3
E4B696

Tetradic

95E4DD
B696E4
E4969C
C3E496

Contrast Matrix WCAG 2.1 Contrast

95E4DD
A1A3B3
A76D96
AB3C85
AD0B70
1.7
Fail
2.7
Fail
3.9
AA Large
4.7
AA
1.7
Fail
1.6
Fail
2.3
Fail
2.7
Fail
2.7
Fail
1.6
Fail
1.4
Fail
1.7
Fail
3.9
AA Large
2.3
Fail
1.4
Fail
1.2
Fail
4.7
AA
2.7
Fail
1.7
Fail
1.2
Fail
White BG
1.5Fail
2.5Fail
4.0AA Large
5.7AA
6.9AA
Black BG
14.4AAA
8.4AAA
5.3AA
3.7AA Large
3.1AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

B7B8DF
A2A2AF
8E8D8C
7B7A73
676558

Deuteranopia

B3ADDF
A2A2AE
91968A
818A6F
707C52

Tritanopia

99E0E0
A1ACAB
A48483
A56562
A54440

Achromatopsia

CCCCCC
A4A4A4
838383
666666
474747

Shades & Tints Shades & Tints

#95E4DD

Dark
Light

#A1A3B3

Dark
Light

#A76D96

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #95e4dd;
  --color-2: #a1a3b3;
  --color-3: #a76d96;
  --color-4: #ab3c85;
  --color-5: #ad0b70;
}

SCSS

$color-1: #95e4dd;
$color-2: #a1a3b3;
$color-3: #a76d96;
$color-4: #ab3c85;
$color-5: #ad0b70;

TAILWIND

colors: {
  'brand-1': '#95e4dd',
  'brand-2': '#a1a3b3',
  'brand-3': '#a76d96',
  'brand-4': '#ab3c85',
  'brand-5': '#ad0b70',
}

RGB Array

[149, 228, 221], [161, 163, 179], [167, 109, 150], [171, 60, 133], [173, 11, 112]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #95E4DD, #A1A3B3, #A76D96, #AB3C85, #AD0B70 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: #95e4dd; --color-2: #a1a3b3; --color-3: #a76d96; --color-4: #ab3c85; --color-5: #ad0b70. 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 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