← Back to Editor

#66758E · #C0C6C3 · #E4F7A2 · #F8B950 · #E10494

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

#66758E

Indigo · SlateGray · Navy Blue

HEX
#66758E
RGB
rgb(102, 117, 142)
HSL
hsl(218, 16%, 48%)
HSB
hsb(218, 28%, 56%)
CMYK
cmyk(28%, 18%, 0%, 44%)
Oklch
oklch(55.9% 0.043 260.6)

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

#C0C6C3

Silver Gray · Silver · Pearl Gray

HEX
#C0C6C3
RGB
rgb(192, 198, 195)
HSL
hsl(150, 5%, 76%)
HSB
hsb(150, 3%, 78%)
CMYK
cmyk(3%, 0%, 2%, 22%)
Oklch
oklch(82.1% 0.008 164.9)

Traditional「Silver Gray」· Paint「Pearl Gray」· Creative Silver Lining

#E4F7A2

Willow Green · Khaki · Apple Green

HEX
#E4F7A2
RGB
rgb(228, 247, 162)
HSL
hsl(73, 84%, 80%)
HSB
hsb(73, 34%, 97%)
CMYK
cmyk(8%, 0%, 34%, 3%)
Oklch
oklch(94.3% 0.110 118.8)

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

#F8B950

Ginger · SandyBrown · Warm Sun

HEX
#F8B950
RGB
rgb(248, 185, 80)
HSL
hsl(38, 92%, 64%)
HSB
hsb(38, 68%, 97%)
CMYK
cmyk(0%, 25%, 68%, 3%)
Oklch
oklch(82.5% 0.140 77.2)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

#E10494

Rose Purple · DeepPink · Camellia

HEX
#E10494
RGB
rgb(225, 4, 148)
HSL
hsl(321, 97%, 45%)
HSB
hsb(321, 98%, 88%)
CMYK
cmyk(0%, 98%, 34%, 12%)
Oklch
oklch(60.0% 0.249 350.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

66758E
8E8067

Analogous

67898E
66758E
6C678E

Triadic

66758E
8E6775
758E67

Split-Comp.

66758E
8E6C67
898E67

Tetradic

66758E
8E6789
8E8067
678E6C

Contrast Matrix WCAG 2.1 Contrast

66758E
C0C6C3
E4F7A2
F8B950
E10494
—
2.7
Fail
4.0
AA Large
2.7
Fail
1.0
Fail
2.7
Fail
—
1.5
Fail
1.0
Fail
2.6
Fail
4.0
AA Large
1.5
Fail
—
1.5
Fail
3.9
AA Large
2.7
Fail
1.0
Fail
1.5
Fail
—
2.6
Fail
1.0
Fail
2.6
Fail
3.9
AA Large
2.6
Fail
—
White BG
4.7AA
1.7Fail
1.2Fail
1.7Fail
4.5AA
Black BG
4.5AA
12.1AAA
18.1AAA
12.0AAA
4.6AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

6C6D88
C3C3C4
ECECB7
DDDC69
817F71

Deuteranopia

6C6B87
C2C2C4
EBEABC
E0E570
8E9F69

Tritanopia

678382
C0C4C4
E5C7CA
F57D82
D65650

Achromatopsia

737373
C4C4C4
E8E8E8
C0C0C0
565656

Shades & Tints Shades & Tints

#66758E

Dark
Light

#C0C6C3

Dark
Light

#E4F7A2

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #66758e;
  --color-2: #c0c6c3;
  --color-3: #e4f7a2;
  --color-4: #f8b950;
  --color-5: #e10494;
}

SCSS

$color-1: #66758e;
$color-2: #c0c6c3;
$color-3: #e4f7a2;
$color-4: #f8b950;
$color-5: #e10494;

TAILWIND

colors: {
  'brand-1': '#66758e',
  'brand-2': '#c0c6c3',
  'brand-3': '#e4f7a2',
  'brand-4': '#f8b950',
  'brand-5': '#e10494',
}

RGB Array

[102, 117, 142], [192, 198, 195], [228, 247, 162], [248, 185, 80], [225, 4, 148]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #66758E, #C0C6C3, #E4F7A2, #F8B950, #E10494 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: #66758e; --color-2: #c0c6c3; --color-3: #e4f7a2; --color-4: #f8b950; --color-5: #e10494. 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