← Back to Editor

#674992 · #8084A5 · #8DAEAE · #B7C794 · #E0CF7C

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

#674992

Deep Indigo · DarkSlateBlue · Violet

HEX
#674992
RGB
rgb(103, 73, 146)
HSL
hsl(265, 33%, 43%)
HSB
hsb(265, 50%, 57%)
CMYK
cmyk(29%, 50%, 0%, 43%)
Oklch
oklch(47.2% 0.117 301.0)

Traditional「Deep Indigo」· Paint「Violet」· Creative Blush Sunrise

#8084A5

Azure · LightSlateGray · Navy Blue

HEX
#8084A5
RGB
rgb(128, 132, 165)
HSL
hsl(234, 17%, 57%)
HSB
hsb(234, 22%, 65%)
CMYK
cmyk(22%, 20%, 0%, 35%)
Oklch
oklch(62.2% 0.050 279.4)

Traditional「Azure」· Paint「Navy Blue」· Creative Blush Sunrise

#8DAEAE

Sky Blue · DarkGray · Lake Green

HEX
#8DAEAE
RGB
rgb(141, 174, 174)
HSL
hsl(180, 17%, 62%)
HSB
hsb(180, 19%, 68%)
CMYK
cmyk(19%, 0%, 0%, 32%)
Oklch
oklch(72.6% 0.036 196.4)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#B7C794

Willow Green · Tan · Apple Green

HEX
#B7C794
RGB
rgb(183, 199, 148)
HSL
hsl(79, 31%, 68%)
HSB
hsb(79, 26%, 78%)
CMYK
cmyk(8%, 0%, 26%, 22%)
Oklch
oklch(80.4% 0.071 122.1)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

#E0CF7C

Fresh Green · BurlyWood · Sunflower

HEX
#E0CF7C
RGB
rgb(224, 207, 124)
HSL
hsl(50, 62%, 68%)
HSB
hsb(50, 45%, 88%)
CMYK
cmyk(0%, 8%, 45%, 12%)
Oklch
oklch(85.1% 0.105 98.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

674992
749249

Analogous

494F92
674992
8C4992

Triadic

674992
926849
499268

Split-Comp.

674992
928C49
4F9249

Tetradic

674992
92494F
749249
49928C

Contrast Matrix WCAG 2.1 Contrast

674992
8084A5
8DAEAE
B7C794
E0CF7C
—
2.0
Fail
3.0
Fail
3.9
AA Large
4.5
AA
2.0
Fail
—
1.5
Fail
2.0
Fail
2.3
Fail
3.0
Fail
1.5
Fail
—
1.3
Fail
1.5
Fail
3.9
AA Large
2.0
Fail
1.3
Fail
—
1.2
Fail
4.5
AA
2.3
Fail
1.5
Fail
1.2
Fail
—
White BG
7.1AAA
3.6AA Large
2.4Fail
1.8Fail
1.6Fail
Black BG
2.9Fail
5.8AA
8.8AAA
11.6AAA
13.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

5A5A80
82829D
9B9CAE
BEBEA0
D9D890

Deuteranopia

5C5E7C
82819B
9997AE
BDBCA3
DADB95

Tritanopia

66726F
809795
8FAEAE
B8AAAC
DFA0A3

Achromatopsia

5A5A5A
878787
A4A4A4
BCBCBC
CBCBCB

Shades & Tints Shades & Tints

#674992

Dark
Light

#8084A5

Dark
Light

#8DAEAE

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #674992;
  --color-2: #8084a5;
  --color-3: #8daeae;
  --color-4: #b7c794;
  --color-5: #e0cf7c;
}

SCSS

$color-1: #674992;
$color-2: #8084a5;
$color-3: #8daeae;
$color-4: #b7c794;
$color-5: #e0cf7c;

TAILWIND

colors: {
  'brand-1': '#674992',
  'brand-2': '#8084a5',
  'brand-3': '#8daeae',
  'brand-4': '#b7c794',
  'brand-5': '#e0cf7c',
}

RGB Array

[103, 73, 146], [128, 132, 165], [141, 174, 174], [183, 199, 148], [224, 207, 124]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #674992, #8084A5, #8DAEAE, #B7C794, #E0CF7C 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: #674992; --color-2: #8084a5; --color-3: #8daeae; --color-4: #b7c794; --color-5: #e0cf7c. 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