← Back to Editor

#D13F6D · #AD6680 · #938794 · #98AAAB · #B4B8AE

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

#D13F6D

Dark Violet · MediumVioletRed · Rose Pink

HEX
#D13F6D
RGB
rgb(209, 63, 109)
HSL
hsl(341, 61%, 53%)
HSB
hsb(341, 70%, 82%)
CMYK
cmyk(0%, 70%, 48%, 18%)
Oklch
oklch(59.1% 0.184 5.8)

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

#AD6680

Dark Violet · Gray · Rose Pink

HEX
#AD6680
RGB
rgb(173, 102, 128)
HSL
hsl(338, 30%, 54%)
HSB
hsb(338, 41%, 68%)
CMYK
cmyk(0%, 41%, 26%, 32%)
Oklch
oklch(59.7% 0.096 357.0)

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

#938794

Ash · Gray · Warm Gray

HEX
#938794
RGB
rgb(147, 135, 148)
HSL
hsl(295, 6%, 55%)
HSB
hsb(295, 9%, 58%)
CMYK
cmyk(1%, 9%, 0%, 42%)
Oklch
oklch(63.8% 0.024 323.5)

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

#98AAAB

Sky Blue · DarkGray · Lake Green

HEX
#98AAAB
RGB
rgb(152, 170, 171)
HSL
hsl(183, 10%, 63%)
HSB
hsb(183, 11%, 67%)
CMYK
cmyk(11%, 1%, 0%, 33%)
Oklch
oklch(72.4% 0.020 200.8)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#B4B8AE

Ash · DarkGray · Silver Sand

HEX
#B4B8AE
RGB
rgb(180, 184, 174)
HSL
hsl(84, 7%, 70%)
HSB
hsb(84, 5%, 72%)
CMYK
cmyk(2%, 0%, 5%, 28%)
Oklch
oklch(77.7% 0.015 124.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D13F6D
3ED0A2

Analogous

D03EB5
D13F6D
D0593E

Triadic

D13F6D
6CD03E
3E6CD0

Split-Comp.

D13F6D
3ED059
3EB5D0

Tetradic

D13F6D
B5D03E
3ED0A2
593ED0

Contrast Matrix WCAG 2.1 Contrast

D13F6D
AD6680
938794
98AAAB
B4B8AE
—
1.1
Fail
1.3
Fail
1.9
Fail
2.2
Fail
1.1
Fail
—
1.2
Fail
1.7
Fail
2.1
Fail
1.3
Fail
1.2
Fail
—
1.4
Fail
1.7
Fail
1.9
Fail
1.7
Fail
1.4
Fail
—
1.2
Fail
2.2
Fail
2.1
Fail
1.7
Fail
1.2
Fail
—
White BG
4.5AA
4.2AA Large
3.4AA Large
2.4Fail
2.0Fail
Black BG
4.6AA
5.0AA
6.1AA
8.7AAA
10.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

929062
8E8E7A
8E8E91
A0A0AB
B6B6B0

Deuteranopia

9AA55F
929878
8F8F90
9F9DAB
B6B5B1

Tritanopia

CA5957
A97574
928E8E
99ABAB
B4B2B3

Achromatopsia

707070
7E7E7E
8C8C8C
A5A5A5
B6B6B6

Shades & Tints Shades & Tints

#D13F6D

Dark
Light

#AD6680

Dark
Light

#938794

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d13f6d;
  --color-2: #ad6680;
  --color-3: #938794;
  --color-4: #98aaab;
  --color-5: #b4b8ae;
}

SCSS

$color-1: #d13f6d;
$color-2: #ad6680;
$color-3: #938794;
$color-4: #98aaab;
$color-5: #b4b8ae;

TAILWIND

colors: {
  'brand-1': '#d13f6d',
  'brand-2': '#ad6680',
  'brand-3': '#938794',
  'brand-4': '#98aaab',
  'brand-5': '#b4b8ae',
}

RGB Array

[209, 63, 109], [173, 102, 128], [147, 135, 148], [152, 170, 171], [180, 184, 174]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D13F6D, #AD6680, #938794, #98AAAB, #B4B8AE is ideal for: brand design, premium product pages, magazine layouts. Low-saturation colors convey a sophisticated, premium feel. 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: #d13f6d; --color-2: #ad6680; --color-3: #938794; --color-4: #98aaab; --color-5: #b4b8ae. 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. 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