← Back to Editor

#6674B9 · #7984AA · #8B949D · #9EA48C · #B9BF75

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#6674B9

Azure · SlateBlue · Navy Blue

HEX
#6674B9
RGB
rgb(102, 116, 185)
HSL
hsl(230, 37%, 56%)
HSB
hsb(230, 45%, 73%)
CMYK
cmyk(45%, 37%, 0%, 27%)
Oklch
oklch(57.8% 0.107 273.9)

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

#7984AA

Azure · LightSlateGray · Navy Blue

HEX
#7984AA
RGB
rgb(121, 132, 170)
HSL
hsl(227, 22%, 57%)
HSB
hsb(227, 29%, 67%)
CMYK
cmyk(29%, 22%, 0%, 33%)
Oklch
oklch(61.9% 0.059 272.0)

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

#8B949D

Azure · LightSlateGray · Silver Sand

HEX
#8B949D
RGB
rgb(139, 148, 157)
HSL
hsl(210, 8%, 58%)
HSB
hsb(210, 11%, 62%)
CMYK
cmyk(11%, 6%, 0%, 38%)
Oklch
oklch(66.2% 0.017 248.1)

Traditional「Azure」· Paint「Silver Sand」· Creative Urban Concrete

#9EA48C

Grass Green · DarkSeaGreen · Olive Green

HEX
#9EA48C
RGB
rgb(158, 164, 140)
HSL
hsl(75, 12%, 60%)
HSB
hsb(75, 15%, 64%)
CMYK
cmyk(4%, 0%, 15%, 36%)
Oklch
oklch(70.7% 0.035 118.7)

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

#B9BF75

Autumn Sage · Tan · Sunflower

HEX
#B9BF75
RGB
rgb(185, 191, 117)
HSL
hsl(65, 37%, 60%)
HSB
hsb(65, 39%, 75%)
CMYK
cmyk(3%, 0%, 39%, 25%)
Oklch
oklch(78.3% 0.097 112.4)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

6674B9
B8AA65

Analogous

659DB8
6674B9
8165B8

Triadic

6674B9
B86573
73B865

Split-Comp.

6674B9
B88165
9DB865

Tetradic

6674B9
B8659D
B8AA65
65B881

Contrast Matrix WCAG 2.1 Contrast

6674B9
7984AA
8B949D
9EA48C
B9BF75
—
1.2
Fail
1.4
Fail
1.7
Fail
2.3
Fail
1.2
Fail
—
1.2
Fail
1.4
Fail
1.9
Fail
1.4
Fail
1.2
Fail
—
1.2
Fail
1.6
Fail
1.7
Fail
1.4
Fail
1.2
Fail
—
1.3
Fail
2.3
Fail
1.9
Fail
1.6
Fail
1.3
Fail
—
White BG
4.4AA Large
3.7AA Large
3.1AA Large
2.6Fail
1.9Fail
Black BG
4.8AA
5.7AA
6.8AA
8.1AAA
10.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

6C6CA8
7E7EA1
8F8F9B
A1A192
BCBC87

Deuteranopia

6B6AA4
7D7C9F
8E8E9A
A0A093
BBBB8B

Tritanopia

679B98
7A9A98
8B9999
9E9697
B99598

Achromatopsia

787878
858585
929292
9F9F9F
B5B5B5

Shades & Tints Shades & Tints

#6674B9

Dark
Light

#7984AA

Dark
Light

#8B949D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #6674b9;
  --color-2: #7984aa;
  --color-3: #8b949d;
  --color-4: #9ea48c;
  --color-5: #b9bf75;
}

SCSS

$color-1: #6674b9;
$color-2: #7984aa;
$color-3: #8b949d;
$color-4: #9ea48c;
$color-5: #b9bf75;

TAILWIND

colors: {
  'brand-1': '#6674b9',
  'brand-2': '#7984aa',
  'brand-3': '#8b949d',
  'brand-4': '#9ea48c',
  'brand-5': '#b9bf75',
}

RGB Array

[102, 116, 185], [121, 132, 170], [139, 148, 157], [158, 164, 140], [185, 191, 117]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #6674B9, #7984AA, #8B949D, #9EA48C, #B9BF75 is ideal for: brand design, premium product pages, magazine layouts. Low-saturation colors convey a sophisticated, premium feel. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #6674b9; --color-2: #7984aa; --color-3: #8b949d; --color-4: #9ea48c; --color-5: #b9bf75. 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. Restrained colors convey professionalism and trust. 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