← Back to Editor

#A5D081 · #C8C93F · #F6D611 · #328891 · #85B0D2

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

#A5D081

Celadon · DarkSeaGreen · Apple Green

HEX
#A5D081
RGB
rgb(165, 208, 129)
HSL
hsl(93, 46%, 66%)
HSB
hsb(93, 38%, 82%)
CMYK
cmyk(21%, 0%, 38%, 18%)
Oklch
oklch(80.8% 0.115 131.8)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

#C8C93F

Autumn Sage · GoldenRod · Sunflower

HEX
#C8C93F
RGB
rgb(200, 201, 63)
HSL
hsl(60, 56%, 52%)
HSB
hsb(60, 69%, 79%)
CMYK
cmyk(0%, 0%, 69%, 21%)
Oklch
oklch(81.1% 0.155 109.8)

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

#F6D611

Autumn Sage · Gold · Sunflower

HEX
#F6D611
RGB
rgb(246, 214, 17)
HSL
hsl(52, 93%, 52%)
HSB
hsb(52, 93%, 96%)
CMYK
cmyk(0%, 13%, 93%, 4%)
Oklch
oklch(87.7% 0.179 98.0)

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

#328891

Slate Blue · SteelBlue · Mint Ice

HEX
#328891
RGB
rgb(50, 136, 145)
HSL
hsl(186, 49%, 38%)
HSB
hsb(186, 66%, 57%)
CMYK
cmyk(66%, 6%, 0%, 43%)
Oklch
oklch(57.9% 0.082 204.9)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#85B0D2

Sky Blue · SkyBlue · Cobalt Blue

HEX
#85B0D2
RGB
rgb(133, 176, 210)
HSL
hsl(206, 46%, 67%)
HSB
hsb(206, 37%, 82%)
CMYK
cmyk(37%, 16%, 0%, 18%)
Oklch
oklch(73.8% 0.068 242.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A5D081
AC80D0

Analogous

CCD080
A5D081
80D084

Triadic

A5D081
80A4D0
D080A4

Split-Comp.

A5D081
8480D0
D080CC

Tetradic

A5D081
80CCD0
AC80D0
D08480

Contrast Matrix WCAG 2.1 Contrast

A5D081
C8C93F
F6D611
328891
85B0D2
—
1.0
Fail
1.2
Fail
2.4
Fail
1.3
Fail
1.0
Fail
—
1.2
Fail
2.3
Fail
1.3
Fail
1.2
Fail
1.2
Fail
—
2.9
Fail
1.6
Fail
2.4
Fail
2.3
Fail
2.9
Fail
—
1.8
Fail
1.3
Fail
1.3
Fail
1.6
Fail
1.8
Fail
—
White BG
1.8Fail
1.8Fail
1.4Fail
4.1AA Large
2.3Fail
Black BG
11.9AAA
11.9AAA
14.5AAA
5.1AA
9.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B8B894
C8C860
E8E841
57588F
9898CA

Deuteranopia

B5B299
C8C868
EAEC4C
524C8E
9592C8

Tritanopia

A7A3A7
C87B81
F4666F
368D8D
87C3C2

Achromatopsia

BABABA
B9B9B9
C9C9C9
6F6F6F
A7A7A7

Shades & Tints Shades & Tints

#A5D081

Dark
Light

#C8C93F

Dark
Light

#F6D611

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a5d081;
  --color-2: #c8c93f;
  --color-3: #f6d611;
  --color-4: #328891;
  --color-5: #85b0d2;
}

SCSS

$color-1: #a5d081;
$color-2: #c8c93f;
$color-3: #f6d611;
$color-4: #328891;
$color-5: #85b0d2;

TAILWIND

colors: {
  'brand-1': '#a5d081',
  'brand-2': '#c8c93f',
  'brand-3': '#f6d611',
  'brand-4': '#328891',
  'brand-5': '#85b0d2',
}

RGB Array

[165, 208, 129], [200, 201, 63], [246, 214, 17], [50, 136, 145], [133, 176, 210]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #A5D081, #C8C93F, #F6D611, #328891, #85B0D2 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: #a5d081; --color-2: #c8c93f; --color-3: #f6d611; --color-4: #328891; --color-5: #85b0d2. 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