← Back to Editor

#A7A6A6 · #3A5278 · #8CB2D2 · #FFFF33

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

#A7A6A6

Ash · DarkGray · Silver Sand

HEX
#A7A6A6
RGB
rgb(167, 166, 166)
HSL
hsl(0, 1%, 65%)
HSB
hsb(0, 1%, 65%)
CMYK
cmyk(0%, 1%, 1%, 35%)
Oklch
oklch(72.6% 0.001 17.2)

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

#3A5278

Indigo · DarkSlateBlue · Prussian Blue

HEX
#3A5278
RGB
rgb(58, 82, 120)
HSL
hsl(217, 35%, 35%)
HSB
hsb(217, 52%, 47%)
CMYK
cmyk(52%, 32%, 0%, 53%)
Oklch
oklch(43.7% 0.070 259.3)

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

#8CB2D2

Sky Blue · SkyBlue · Cobalt Blue

HEX
#8CB2D2
RGB
rgb(140, 178, 210)
HSL
hsl(207, 44%, 69%)
HSB
hsb(207, 33%, 82%)
CMYK
cmyk(33%, 15%, 0%, 18%)
Oklch
oklch(74.7% 0.062 244.2)

Traditional「Sky Blue」· Paint「Cobalt Blue」· Creative Twilight Haze

#FFFF33

Autumn Sage · Yellow · Sunflower

HEX
#FFFF33
RGB
rgb(255, 255, 51)
HSL
hsl(60, 100%, 60%)
HSB
hsb(60, 80%, 100%)
CMYK
cmyk(0%, 0%, 80%, 0%)
Oklch
oklch(96.9% 0.201 109.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A7A6A6
A5A7A7

Analogous

A7A5A6
A7A6A6
A7A6A5

Triadic

A7A6A6
A5A7A5
A5A5A7

Split-Comp.

A7A6A6
A5A7A6
A5A6A7

Tetradic

A7A6A6
A6A7A5
A5A7A7
A6A5A7

Contrast Matrix WCAG 2.1 Contrast

A7A6A6
3A5278
8CB2D2
FFFF33
—
3.3
AA Large
1.1
Fail
2.3
Fail
3.3
AA Large
—
3.5
AA Large
7.4
AAA
1.1
Fail
3.5
AA Large
—
2.1
Fail
2.3
Fail
7.4
AAA
2.1
Fail
—
White BG
2.4Fail
7.9AAA
2.2Fail
1.1Fail
Black BG
8.6AAA
2.7Fail
9.4AAA
19.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A7A7A6
44456F
9C9DCA
FFFF64

Deuteranopia

A7A7A6
43416D
9A97C8
FFFF70

Tritanopia

A7A6A6
3B6866
8EC4C3
FF8B94

Achromatopsia

A6A6A6
4F4F4F
AAAAAA
E8E8E8

Shades & Tints Shades & Tints

#A7A6A6

Dark
Light

#3A5278

Dark
Light

#8CB2D2

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a7a6a6;
  --color-2: #3a5278;
  --color-3: #8cb2d2;
  --color-4: #ffff33;
}

SCSS

$color-1: #a7a6a6;
$color-2: #3a5278;
$color-3: #8cb2d2;
$color-4: #ffff33;

TAILWIND

colors: {
  'brand-1': '#a7a6a6',
  'brand-2': '#3a5278',
  'brand-3': '#8cb2d2',
  'brand-4': '#ffff33',
}

RGB Array

[167, 166, 166], [58, 82, 120], [140, 178, 210], [255, 255, 51]

FAQ FAQ

What scenarios is this 4-color palette suitable for?

This general-style palette of #A7A6A6, #3A5278, #8CB2D2, #FFFF33 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: #a7a6a6; --color-2: #3a5278; --color-3: #8cb2d2; --color-4: #ffff33. 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