← Back to Editor

#D6484C · #B66568 · #968284 · #769FA0 · #56BCBC

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

#D6484C

Vermilion · Tomato · Passion Red

HEX
#D6484C
RGB
rgb(214, 72, 76)
HSL
hsl(358, 63%, 56%)
HSB
hsb(358, 66%, 84%)
CMYK
cmyk(0%, 66%, 64%, 16%)
Oklch
oklch(60.1% 0.178 22.7)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

#B66568

Crimson · Gray · Passion Red

HEX
#B66568
RGB
rgb(182, 101, 104)
HSL
hsl(358, 36%, 55%)
HSB
hsb(358, 45%, 71%)
CMYK
cmyk(0%, 45%, 43%, 29%)
Oklch
oklch(60.0% 0.104 18.3)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

#968284

Crimson · Gray · Warm Gray

HEX
#968284
RGB
rgb(150, 130, 132)
HSL
hsl(354, 9%, 55%)
HSB
hsb(354, 13%, 59%)
CMYK
cmyk(0%, 13%, 12%, 41%)
Oklch
oklch(62.5% 0.025 11.0)

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

#769FA0

Slate Blue · CadetBlue · Lake Green

HEX
#769FA0
RGB
rgb(118, 159, 160)
HSL
hsl(181, 18%, 55%)
HSB
hsb(181, 26%, 63%)
CMYK
cmyk(26%, 1%, 0%, 37%)
Oklch
oklch(67.3% 0.045 198.0)

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

#56BCBC

Slate Blue · MediumAquaMarine · Lake Green

HEX
#56BCBC
RGB
rgb(86, 188, 188)
HSL
hsl(180, 43%, 54%)
HSB
hsb(180, 54%, 74%)
CMYK
cmyk(54%, 0%, 0%, 26%)
Oklch
oklch(73.5% 0.095 195.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D6484C
48D5D1

Analogous

D54894
D6484C
D58A48

Triadic

D6484C
4DD548
484DD5

Split-Comp.

D6484C
48D58A
4894D5

Tetradic

D6484C
94D548
48D5D1
8A48D5

Contrast Matrix WCAG 2.1 Contrast

D6484C
B66568
968284
769FA0
56BCBC
—
1.0
Fail
1.2
Fail
1.5
Fail
1.9
Fail
1.0
Fail
—
1.2
Fail
1.4
Fail
1.8
Fail
1.2
Fail
1.2
Fail
—
1.2
Fail
1.6
Fail
1.5
Fail
1.4
Fail
1.2
Fail
—
1.3
Fail
1.9
Fail
1.8
Fail
1.6
Fail
1.3
Fail
—
White BG
4.3AA Large
4.2AA Large
3.6AA Large
2.9Fail
2.3Fail
Black BG
4.9AA
5.1AA
5.8AA
7.2AAA
9.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

99974B
939267
8D8D84
8888A0
8283BC

Deuteranopia

A1AB4B
989E67
8F9083
8582A0
7C75BC

Tritanopia

CF4A4A
B26767
958383
78A0A0
5BBCBC

Achromatopsia

737373
7E7E7E
888888
939393
9E9E9E

Shades & Tints Shades & Tints

#D6484C

Dark
Light

#B66568

Dark
Light

#968284

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d6484c;
  --color-2: #b66568;
  --color-3: #968284;
  --color-4: #769fa0;
  --color-5: #56bcbc;
}

SCSS

$color-1: #d6484c;
$color-2: #b66568;
$color-3: #968284;
$color-4: #769fa0;
$color-5: #56bcbc;

TAILWIND

colors: {
  'brand-1': '#d6484c',
  'brand-2': '#b66568',
  'brand-3': '#968284',
  'brand-4': '#769fa0',
  'brand-5': '#56bcbc',
}

RGB Array

[214, 72, 76], [182, 101, 104], [150, 130, 132], [118, 159, 160], [86, 188, 188]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D6484C, #B66568, #968284, #769FA0, #56BCBC 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: #d6484c; --color-2: #b66568; --color-3: #968284; --color-4: #769fa0; --color-5: #56bcbc. 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