#20A8E8 + #95B577 + #A5B363 + #8FB179 + #11A3F7 · muted - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#20A8E8

Lake Blue · DodgerBlue · Lake Green

HEX

#20A8E8

RGB

rgb(32, 168, 232)

HSL

hsl(199, 81%, 52%)

HSB

hsb(199, 86%, 91%)

CMYK

cmyk(86%, 28%, 0%, 9%)

Oklch

oklch(69.3% 0.142 236.2)

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

#95B577

Celadon · DarkSeaGreen · Olive Green

HEX

#95B577

RGB

rgb(149, 181, 119)

HSL

hsl(91, 30%, 59%)

HSB

hsb(91, 34%, 71%)

CMYK

cmyk(18%, 0%, 34%, 29%)

Oklch

oklch(73.4% 0.092 130.6)

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

#A5B363

Grass Green · DarkSeaGreen · Olive Green

HEX

#A5B363

RGB

rgb(165, 179, 99)

HSL

hsl(70, 34%, 55%)

HSB

hsb(70, 45%, 70%)

CMYK

cmyk(8%, 0%, 45%, 30%)

Oklch

oklch(73.8% 0.106 117.2)

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

#8FB179

Celadon · DarkSeaGreen · Olive Green

HEX

#8FB179

RGB

rgb(143, 177, 121)

HSL

hsl(96, 26%, 58%)

HSB

hsb(96, 32%, 69%)

CMYK

cmyk(19%, 0%, 32%, 31%)

Oklch

oklch(72.1% 0.087 133.6)

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

#11A3F7

Lake Blue · DodgerBlue · Navy Blue

HEX

#11A3F7

RGB

rgb(17, 163, 247)

HSL

hsl(202, 93%, 52%)

HSB

hsb(202, 93%, 97%)

CMYK

cmyk(93%, 34%, 0%, 3%)

Oklch

oklch(68.8% 0.164 243.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

20A8E8

E86021

Analogous

21E8C3

20A8E8

2146E8

Triadic

20A8E8

E821A9

A9E821

Split-Comp.

20A8E8

E82146

E8C321

Tetradic

20A8E8

C321E8

E86021

46E821

Contrast Matrix WCAG 2.1 Contrast

20A8E8	95B577	A5B363	8FB179	11A3F7
—	1.2 Fail	1.2 Fail	1.1 Fail	1.0 Fail
1.2 Fail	—	1.0 Fail	1.0 Fail	1.2 Fail
1.2 Fail	1.0 Fail	—	1.1 Fail	1.2 Fail
1.1 Fail	1.0 Fail	1.1 Fail	—	1.1 Fail
1.0 Fail	1.2 Fail	1.2 Fail	1.1 Fail	—

White BG

2.7Fail

2.3Fail

2.4Fail

2.8Fail

Black BG

7.8AAA

9.2AAA

8.7AAA

7.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

5B5CD9

A3A386

ABAB76

9E9E87

5052E3

Deuteranopia

5349D5

A19F8A

AAA97B

9C998A

483DDE

Tritanopia

27CCCA

979294

A68689

919194

18D3CF

Achromatopsia

878787

A4A4A4

A6A6A6

A0A0A0

818181

Shades & Tints Shades & Tints

#20A8E8

Dark

Light

#95B577

Dark

Light

#A5B363

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #20a8e8;
  --color-2: #95b577;
  --color-3: #a5b363;
  --color-4: #8fb179;
  --color-5: #11a3f7;
}

SCSS

$color-1: #20a8e8;
$color-2: #95b577;
$color-3: #a5b363;
$color-4: #8fb179;
$color-5: #11a3f7;

TAILWIND

colors: {
  'brand-1': '#20a8e8',
  'brand-2': '#95b577',
  'brand-3': '#a5b363',
  'brand-4': '#8fb179',
  'brand-5': '#11a3f7',
}

RGB Array

[32, 168, 232], [149, 181, 119], [165, 179, 99], [143, 177, 121], [17, 163, 247]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This muted-style palette of #20A8E8, #95B577, #A5B363, #8FB179, #11A3F7 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: #20a8e8; --color-2: #95b577; --color-3: #a5b363; --color-4: #8fb179; --color-5: #11a3f7. 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 muted-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