← Back to Editor

#60898B · #D5BEB6 · #BEA457 · #DD578C · #D789BB

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

#60898B

Slate Blue · SlateGray · Mint Ice

HEX
#60898B
RGB
rgb(96, 137, 139)
HSL
hsl(183, 18%, 46%)
HSB
hsb(183, 31%, 55%)
CMYK
cmyk(31%, 1%, 0%, 45%)
Oklch
oklch(60.1% 0.045 199.8)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#D5BEB6

Apricot · Silver · Peach Orange

HEX
#D5BEB6
RGB
rgb(213, 190, 182)
HSL
hsl(15, 27%, 77%)
HSB
hsb(15, 15%, 84%)
CMYK
cmyk(0%, 11%, 15%, 16%)
Oklch
oklch(81.9% 0.029 40.2)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#BEA457

Ginger · SandyBrown · Sunflower

HEX
#BEA457
RGB
rgb(190, 164, 87)
HSL
hsl(45, 44%, 54%)
HSB
hsb(45, 54%, 75%)
CMYK
cmyk(0%, 14%, 54%, 25%)
Oklch
oklch(72.6% 0.102 91.1)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#DD578C

Dark Violet · LightCoral · Rose Pink

HEX
#DD578C
RGB
rgb(221, 87, 140)
HSL
hsl(336, 66%, 60%)
HSB
hsb(336, 61%, 87%)
CMYK
cmyk(0%, 61%, 37%, 13%)
Oklch
oklch(64.5% 0.174 358.6)

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

#D789BB

Mauve · Orchid · Rose Pink

HEX
#D789BB
RGB
rgb(215, 137, 187)
HSL
hsl(322, 49%, 69%)
HSB
hsb(322, 36%, 84%)
CMYK
cmyk(0%, 36%, 13%, 16%)
Oklch
oklch(72.5% 0.114 341.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

60898B
8A6260

Analogous

608A77
60898B
60738A

Triadic

60898B
8A6088
888A60

Split-Comp.

60898B
8A6073
8A7760

Tetradic

60898B
77608A
8A6260
738A60

Contrast Matrix WCAG 2.1 Contrast

60898B
D5BEB6
BEA457
DD578C
D789BB
—
2.2
Fail
1.6
Fail
1.1
Fail
1.5
Fail
2.2
Fail
—
1.4
Fail
2.0
Fail
1.5
Fail
1.6
Fail
1.4
Fail
—
1.5
Fail
1.1
Fail
1.1
Fail
2.0
Fail
1.5
Fail
—
1.4
Fail
1.5
Fail
1.5
Fail
1.1
Fail
1.4
Fail
—
White BG
3.9AA Large
1.8Fail
2.4Fail
3.6AA Large
2.6Fail
Black BG
5.4AA
11.9AAA
8.6AAA
5.8AA
8.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

72728B
CBCBB8
B3B36A
A3A27F
B5B5AF

Deuteranopia

6F6C8A
CCCEB8
B4B66E
ABB57C
BAC0AC

Tritanopia

628A8A
D4B9BA
BD787C
D67573
D3A5A3

Achromatopsia

7D7D7D
C4C4C4
A3A3A3
858585
A6A6A6

Shades & Tints Shades & Tints

#60898B

Dark
Light

#D5BEB6

Dark
Light

#BEA457

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #60898b;
  --color-2: #d5beb6;
  --color-3: #bea457;
  --color-4: #dd578c;
  --color-5: #d789bb;
}

SCSS

$color-1: #60898b;
$color-2: #d5beb6;
$color-3: #bea457;
$color-4: #dd578c;
$color-5: #d789bb;

TAILWIND

colors: {
  'brand-1': '#60898b',
  'brand-2': '#d5beb6',
  'brand-3': '#bea457',
  'brand-4': '#dd578c',
  'brand-5': '#d789bb',
}

RGB Array

[96, 137, 139], [213, 190, 182], [190, 164, 87], [221, 87, 140], [215, 137, 187]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #60898B, #D5BEB6, #BEA457, #DD578C, #D789BB 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: #60898b; --color-2: #d5beb6; --color-3: #bea457; --color-4: #dd578c; --color-5: #d789bb. 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