← Back to Editor

#A3B0E5 · #5D6A60 · #AABA79 · #DED9A2 · #748481

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

#A3B0E5

Azure · LightSteelBlue · Cobalt Blue

HEX
#A3B0E5
RGB
rgb(163, 176, 229)
HSL
hsl(228, 56%, 77%)
HSB
hsb(228, 29%, 90%)
CMYK
cmyk(29%, 23%, 0%, 10%)
Oklch
oklch(76.6% 0.078 273.8)

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

#5D6A60

Ink Gray · DimGray · Charcoal

HEX
#5D6A60
RGB
rgb(93, 106, 96)
HSL
hsl(134, 7%, 39%)
HSB
hsb(134, 12%, 42%)
CMYK
cmyk(12%, 0%, 9%, 58%)
Oklch
oklch(51.0% 0.022 152.4)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

#AABA79

Grass Green · DarkSeaGreen · Olive Green

HEX
#AABA79
RGB
rgb(170, 186, 121)
HSL
hsl(75, 32%, 60%)
HSB
hsb(75, 35%, 73%)
CMYK
cmyk(9%, 0%, 35%, 27%)
Oklch
oklch(76.1% 0.089 119.8)

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

#DED9A2

Fresh Green · Wheat · Sunflower

HEX
#DED9A2
RGB
rgb(222, 217, 162)
HSL
hsl(55, 48%, 75%)
HSB
hsb(55, 27%, 87%)
CMYK
cmyk(0%, 2%, 27%, 13%)
Oklch
oklch(87.6% 0.072 103.4)

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

#748481

Ink Gray · Gray · Warm Gray

HEX
#748481
RGB
rgb(116, 132, 129)
HSL
hsl(169, 6%, 49%)
HSB
hsb(169, 12%, 52%)
CMYK
cmyk(12%, 0%, 2%, 48%)
Oklch
oklch(59.9% 0.019 183.1)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A3B0E5
E5D8A4

Analogous

A4D1E5
A3B0E5
B7A4E5

Triadic

A3B0E5
E5A4B1
B1E5A4

Split-Comp.

A3B0E5
E5B7A4
D1E5A4

Tetradic

A3B0E5
E5A4D1
E5D8A4
A4E5B7

Contrast Matrix WCAG 2.1 Contrast

A3B0E5
5D6A60
AABA79
DED9A2
748481
—
2.7
Fail
1.0
Fail
1.5
Fail
1.8
Fail
2.7
Fail
—
2.7
Fail
3.9
AA Large
1.5
Fail
1.0
Fail
2.7
Fail
—
1.5
Fail
1.9
Fail
1.5
Fail
3.9
AA Large
1.5
Fail
—
2.7
Fail
1.8
Fail
1.5
Fail
1.9
Fail
2.7
Fail
—
White BG
2.1Fail
5.7AA
2.1Fail
1.4Fail
3.9AA Large
Black BG
9.9AAA
3.7AA Large
10.0AAA
14.6AAA
5.4AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A9A9D8
636362
B1B189
DCDCAF
7B7B82

Deuteranopia

A8A7D5
626163
B0AF8D
DCDCB3
7A7982

Tritanopia

A4CECC
5E6465
AB9598
DEBABC
758282

Achromatopsia

B2B2B2
656565
AEAEAE
D4D4D4
7F7F7F

Shades & Tints Shades & Tints

#A3B0E5

Dark
Light

#5D6A60

Dark
Light

#AABA79

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a3b0e5;
  --color-2: #5d6a60;
  --color-3: #aaba79;
  --color-4: #ded9a2;
  --color-5: #748481;
}

SCSS

$color-1: #a3b0e5;
$color-2: #5d6a60;
$color-3: #aaba79;
$color-4: #ded9a2;
$color-5: #748481;

TAILWIND

colors: {
  'brand-1': '#a3b0e5',
  'brand-2': '#5d6a60',
  'brand-3': '#aaba79',
  'brand-4': '#ded9a2',
  'brand-5': '#748481',
}

RGB Array

[163, 176, 229], [93, 106, 96], [170, 186, 121], [222, 217, 162], [116, 132, 129]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #A3B0E5, #5D6A60, #AABA79, #DED9A2, #748481 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: #a3b0e5; --color-2: #5d6a60; --color-3: #aaba79; --color-4: #ded9a2; --color-5: #748481. 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