← Back to Editor

#495468 · #86C0B4 · #D5E276 · #C85284

A 4-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

#495468

Indigo · DarkSlateGray · Prussian Blue

HEX
#495468
RGB
rgb(73, 84, 104)
HSL
hsl(219, 18%, 35%)
HSB
hsb(219, 30%, 41%)
CMYK
cmyk(30%, 19%, 0%, 59%)
Oklch
oklch(44.4% 0.036 262.3)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

#86C0B4

Jade · MediumAquaMarine · Lake Green

HEX
#86C0B4
RGB
rgb(134, 192, 180)
HSL
hsl(168, 32%, 64%)
HSB
hsb(168, 30%, 75%)
CMYK
cmyk(30%, 0%, 6%, 25%)
Oklch
oklch(76.4% 0.063 180.2)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#D5E276

Fresh Green · Khaki · Sunflower

HEX
#D5E276
RGB
rgb(213, 226, 118)
HSL
hsl(67, 65%, 67%)
HSB
hsb(67, 48%, 89%)
CMYK
cmyk(6%, 0%, 48%, 11%)
Oklch
oklch(88.0% 0.134 114.8)

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

#C85284

Dark Violet · MediumVioletRed · Rose Pink

HEX
#C85284
RGB
rgb(200, 82, 132)
HSL
hsl(335, 52%, 55%)
HSB
hsb(335, 59%, 78%)
CMYK
cmyk(0%, 59%, 34%, 22%)
Oklch
oklch(60.5% 0.158 356.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

495468
695E49

Analogous

496469
495468
4E4969

Triadic

495468
694954
546949

Split-Comp.

495468
694E49
646949

Tetradic

495468
694964
695E49
49694E

Contrast Matrix WCAG 2.1 Contrast

495468
86C0B4
D5E276
C85284
—
3.7
AA Large
5.4
AA
1.8
Fail
3.7
AA Large
—
1.5
Fail
2.0
Fail
5.4
AA
1.5
Fail
—
3.0
Fail
1.8
Fail
2.0
Fail
3.0
Fail
—
White BG
7.6AAA
2.1Fail
1.4Fail
4.2AA Large
Black BG
2.8Fail
10.2AAA
15.0AAA
5.0AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

4E4E63
9FA0B7
DBDB90
959478

Deuteranopia

4D4C62
9C97B8
DAD996
9CA575

Tritanopia

4A5F5F
89B9BA
D6A5A9
C26E6C

Achromatopsia

535353
ADADAD
D2D2D2
7B7B7B

Shades & Tints Shades & Tints

#495468

Dark
Light

#86C0B4

Dark
Light

#D5E276

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #495468;
  --color-2: #86c0b4;
  --color-3: #d5e276;
  --color-4: #c85284;
}

SCSS

$color-1: #495468;
$color-2: #86c0b4;
$color-3: #d5e276;
$color-4: #c85284;

TAILWIND

colors: {
  'brand-1': '#495468',
  'brand-2': '#86c0b4',
  'brand-3': '#d5e276',
  'brand-4': '#c85284',
}

RGB Array

[73, 84, 104], [134, 192, 180], [213, 226, 118], [200, 82, 132]

FAQ FAQ

What scenarios is this 4-color palette suitable for?

This general-style palette of #495468, #86C0B4, #D5E276, #C85284 is ideal for: corporate websites, product showcases, portfolios. It is a balanced and harmonious choice among 4-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #495468; --color-2: #86c0b4; --color-3: #d5e276; --color-4: #c85284. 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 4-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