← Back to Editor

#889162 · #FF85D9 · #DE4289 · #BEBA8A · #885485

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#889162

Grass Green · Gray · Olive Green

HEX
#889162
RGB
rgb(136, 145, 98)
HSL
hsl(71, 19%, 48%)
HSB
hsb(71, 32%, 57%)
CMYK
cmyk(6%, 0%, 32%, 43%)
Oklch
oklch(63.7% 0.067 117.2)

Traditional「Grass Green」· Paint「Olive Green」· Creative Blush Sunrise

#FF85D9

Mauve · Violet · Lilac Purple

HEX
#FF85D9
RGB
rgb(255, 133, 217)
HSL
hsl(319, 100%, 76%)
HSB
hsb(319, 48%, 100%)
CMYK
cmyk(0%, 48%, 15%, 0%)
Oklch
oklch(77.8% 0.176 340.4)

Traditional「Mauve」· Paint「Lilac Purple」· Creative Rose Petal

#DE4289

Dark Violet · MediumVioletRed · Rose Pink

HEX
#DE4289
RGB
rgb(222, 66, 137)
HSL
hsl(333, 70%, 56%)
HSB
hsb(333, 70%, 87%)
CMYK
cmyk(0%, 70%, 38%, 13%)
Oklch
oklch(62.3% 0.201 356.9)

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

#BEBA8A

Fresh Green · Tan · Sunflower

HEX
#BEBA8A
RGB
rgb(190, 186, 138)
HSL
hsl(55, 29%, 64%)
HSB
hsb(55, 27%, 75%)
CMYK
cmyk(0%, 2%, 27%, 25%)
Oklch
oklch(78.0% 0.065 103.8)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#885485

Rose Purple · Gray · Violet

HEX
#885485
RGB
rgb(136, 84, 133)
HSL
hsl(303, 24%, 43%)
HSB
hsb(303, 38%, 53%)
CMYK
cmyk(0%, 38%, 2%, 47%)
Oklch
oklch(52.2% 0.097 328.9)

Traditional「Rose Purple」· Paint「Violet」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

889162
6C6392

Analogous

928363
889162
729263

Triadic

889162
638992
926389

Split-Comp.

889162
637292
836392

Tetradic

889162
639283
6C6392
926372

Contrast Matrix WCAG 2.1 Contrast

889162
FF85D9
DE4289
BEBA8A
885485
—
1.5
Fail
1.2
Fail
1.7
Fail
1.7
Fail
1.5
Fail
—
1.8
Fail
1.1
Fail
2.6
Fail
1.2
Fail
1.8
Fail
—
2.0
Fail
1.4
Fail
1.7
Fail
1.1
Fail
2.0
Fail
—
2.9
Fail
1.7
Fail
2.6
Fail
1.4
Fail
2.9
Fail
—
White BG
3.3AA Large
2.2Fail
4.0AA Large
2.0Fail
5.7AA
Black BG
6.3AA
9.6AAA
5.2AA
10.6AAA
3.7AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

8C8C6D
CAC9C5
9A9978
BCBC96
717179

Deuteranopia

8B8B70
D1DAC0
A4AF74
BDBD98
757876

Tritanopia

887678
F9B5B1
D66A67
BE9FA1
85706E

Achromatopsia

898989
B3B3B3
797979
B6B6B6
696969

Shades & Tints Shades & Tints

#889162

Dark
Light

#FF85D9

Dark
Light

#DE4289

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #889162;
  --color-2: #ff85d9;
  --color-3: #de4289;
  --color-4: #beba8a;
  --color-5: #885485;
}

SCSS

$color-1: #889162;
$color-2: #ff85d9;
$color-3: #de4289;
$color-4: #beba8a;
$color-5: #885485;

TAILWIND

colors: {
  'brand-1': '#889162',
  'brand-2': '#ff85d9',
  'brand-3': '#de4289',
  'brand-4': '#beba8a',
  'brand-5': '#885485',
}

RGB Array

[136, 145, 98], [255, 133, 217], [222, 66, 137], [190, 186, 138], [136, 84, 133]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #889162, #FF85D9, #DE4289, #BEBA8A, #885485 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: #889162; --color-2: #ff85d9; --color-3: #de4289; --color-4: #beba8a; --color-5: #885485. 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