← Back to Editor

#7A8AA2 · #83A5A9 · #A4AA9D · #D1BD72 · #FFD330

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

#7A8AA2

Azure · LightSlateGray · Navy Blue

HEX
#7A8AA2
RGB
rgb(122, 138, 162)
HSL
hsl(216, 18%, 56%)
HSB
hsb(216, 25%, 64%)
CMYK
cmyk(25%, 15%, 0%, 36%)
Oklch
oklch(62.9% 0.041 258.4)

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

#83A5A9

Slate Blue · LightSlateGray · Lake Green

HEX
#83A5A9
RGB
rgb(131, 165, 169)
HSL
hsl(186, 18%, 59%)
HSB
hsb(186, 22%, 66%)
CMYK
cmyk(22%, 2%, 0%, 34%)
Oklch
oklch(69.8% 0.038 205.2)

Traditional「Slate Blue」· Paint「Lake Green」· Creative Blush Sunrise

#A4AA9D

Ash · DarkGray · Silver Sand

HEX
#A4AA9D
RGB
rgb(164, 170, 157)
HSL
hsl(88, 7%, 64%)
HSB
hsb(88, 8%, 67%)
CMYK
cmyk(4%, 0%, 8%, 33%)
Oklch
oklch(72.9% 0.020 127.2)

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

#D1BD72

Ginger · BurlyWood · Sunflower

HEX
#D1BD72
RGB
rgb(209, 189, 114)
HSL
hsl(47, 51%, 63%)
HSB
hsb(47, 45%, 82%)
CMYK
cmyk(0%, 10%, 45%, 18%)
Oklch
oklch(79.9% 0.098 94.9)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#FFD330

Ginger · Gold · Sunflower

HEX
#FFD330
RGB
rgb(255, 211, 48)
HSL
hsl(47, 100%, 59%)
HSB
hsb(47, 81%, 100%)
CMYK
cmyk(0%, 17%, 81%, 0%)
Oklch
oklch(88.0% 0.169 92.3)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

7A8AA2
A3937B

Analogous

7B9FA3
7A8AA2
7F7BA3

Triadic

7A8AA2
A37B8B
8BA37B

Split-Comp.

7A8AA2
A37F7B
9FA37B

Tetradic

7A8AA2
A37B9F
A3937B
7BA37F

Contrast Matrix WCAG 2.1 Contrast

7A8AA2
83A5A9
A4AA9D
D1BD72
FFD330
—
1.3
Fail
1.5
Fail
1.9
Fail
2.4
Fail
1.3
Fail
—
1.1
Fail
1.4
Fail
1.8
Fail
1.5
Fail
1.1
Fail
—
1.3
Fail
1.7
Fail
1.9
Fail
1.4
Fail
1.3
Fail
—
1.3
Fail
2.4
Fail
1.8
Fail
1.7
Fail
1.3
Fail
—
White BG
3.5AA Large
2.7Fail
2.4Fail
1.9Fail
1.4Fail
Black BG
6.0AA
7.9AAA
8.8AAA
11.2AAA
14.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

81819C
9292A8
A7A7A0
C8C884
ECEC57

Deuteranopia

807F9B
908DA8
A6A6A1
CACB89
EFF261

Tritanopia

7B9897
85A7A7
A4A3A3
D09296
FD777D

Achromatopsia

888888
9B9B9B
A7A7A7
BABABA
CECECE

Shades & Tints Shades & Tints

#7A8AA2

Dark
Light

#83A5A9

Dark
Light

#A4AA9D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #7a8aa2;
  --color-2: #83a5a9;
  --color-3: #a4aa9d;
  --color-4: #d1bd72;
  --color-5: #ffd330;
}

SCSS

$color-1: #7a8aa2;
$color-2: #83a5a9;
$color-3: #a4aa9d;
$color-4: #d1bd72;
$color-5: #ffd330;

TAILWIND

colors: {
  'brand-1': '#7a8aa2',
  'brand-2': '#83a5a9',
  'brand-3': '#a4aa9d',
  'brand-4': '#d1bd72',
  'brand-5': '#ffd330',
}

RGB Array

[122, 138, 162], [131, 165, 169], [164, 170, 157], [209, 189, 114], [255, 211, 48]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #7A8AA2, #83A5A9, #A4AA9D, #D1BD72, #FFD330 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: #7a8aa2; --color-2: #83a5a9; --color-3: #a4aa9d; --color-4: #d1bd72; --color-5: #ffd330. 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