← Back to Editor

#609096 · #968199 · #BF7187 · #D45F84 · #FF4076

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

#609096

Slate Blue · CadetBlue · Mint Ice

HEX
#609096
RGB
rgb(96, 144, 150)
HSL
hsl(187, 22%, 48%)
HSB
hsb(187, 36%, 59%)
CMYK
cmyk(36%, 4%, 0%, 41%)
Oklch
oklch(62.1% 0.052 205.8)

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

#968199

Dark Plum · LightSlateGray · Violet

HEX
#968199
RGB
rgb(150, 129, 153)
HSL
hsl(293, 11%, 55%)
HSB
hsb(293, 16%, 60%)
CMYK
cmyk(2%, 16%, 0%, 40%)
Oklch
oklch(63.0% 0.043 322.1)

Traditional「Dark Plum」· Paint「Violet」· Creative Blush Sunrise

#BF7187

Dark Violet · LightCoral · Rose Pink

HEX
#BF7187
RGB
rgb(191, 113, 135)
HSL
hsl(343, 38%, 60%)
HSB
hsb(343, 41%, 75%)
CMYK
cmyk(0%, 41%, 29%, 25%)
Oklch
oklch(64.0% 0.102 2.2)

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

#D45F84

Dark Violet · LightCoral · Rose Pink

HEX
#D45F84
RGB
rgb(212, 95, 132)
HSL
hsl(341, 58%, 60%)
HSB
hsb(341, 55%, 83%)
CMYK
cmyk(0%, 55%, 38%, 17%)
Oklch
oklch(64.0% 0.151 2.5)

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

#FF4076

Rouge · DeepPink · Rose Pink

HEX
#FF4076
RGB
rgb(255, 64, 118)
HSL
hsl(343, 100%, 63%)
HSB
hsb(343, 75%, 100%)
CMYK
cmyk(0%, 75%, 54%, 0%)
Oklch
oklch(66.9% 0.226 9.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

609096
95665F

Analogous

5F9581
609096
5F7495

Triadic

609096
955F8F
8F955F

Split-Comp.

609096
955F74
95815F

Tetradic

609096
815F95
95665F
74955F

Contrast Matrix WCAG 2.1 Contrast

609096
968199
BF7187
D45F84
FF4076
—
1.0
Fail
1.0
Fail
1.0
Fail
1.1
Fail
1.0
Fail
—
1.0
Fail
1.0
Fail
1.1
Fail
1.0
Fail
1.0
Fail
—
1.0
Fail
1.1
Fail
1.0
Fail
1.0
Fail
1.0
Fail
—
1.1
Fail
1.1
Fail
1.1
Fail
1.1
Fail
1.1
Fail
—
White BG
3.5AA Large
3.6AA Large
3.5AA Large
3.6AA Large
3.4AA Large
Black BG
5.9AA
5.9AA
5.9AA
5.8AA
6.2AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

757595
8D8D93
9D9D82
A1A07B
ACAB69

Deuteranopia

726E94
8E9092
A2A880
A8B179
B7C666

Tritanopia

629393
958F8E
BB7D7D
CE7472
F55F5C

Achromatopsia

828282
8A8A8A
8B8B8B
868686
7F7F7F

Shades & Tints Shades & Tints

#609096

Dark
Light

#968199

Dark
Light

#BF7187

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #609096;
  --color-2: #968199;
  --color-3: #bf7187;
  --color-4: #d45f84;
  --color-5: #ff4076;
}

SCSS

$color-1: #609096;
$color-2: #968199;
$color-3: #bf7187;
$color-4: #d45f84;
$color-5: #ff4076;

TAILWIND

colors: {
  'brand-1': '#609096',
  'brand-2': '#968199',
  'brand-3': '#bf7187',
  'brand-4': '#d45f84',
  'brand-5': '#ff4076',
}

RGB Array

[96, 144, 150], [150, 129, 153], [191, 113, 135], [212, 95, 132], [255, 64, 118]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #609096, #968199, #BF7187, #D45F84, #FF4076 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: #609096; --color-2: #968199; --color-3: #bf7187; --color-4: #d45f84; --color-5: #ff4076. 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