#CAE071 + #8CC94A + #369A42 + #3354A1 + #2142A1 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#CAE071

Willow Green · Khaki · Apple Green

HEX

#CAE071

RGB

rgb(202, 224, 113)

HSL

hsl(72, 64%, 66%)

HSB

hsb(72, 50%, 88%)

CMYK

cmyk(10%, 0%, 50%, 12%)

Oklch

oklch(86.7% 0.139 118.7)

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

#8CC94A

Grass Green · GreenYellow · Olive Green

HEX

#8CC94A

RGB

rgb(140, 201, 74)

HSL

hsl(89, 54%, 54%)

HSB

hsb(89, 63%, 79%)

CMYK

cmyk(30%, 0%, 63%, 21%)

Oklch

oklch(76.9% 0.170 131.2)

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

#369A42

Celadon · SeaGreen · Olive Green

HEX

#369A42

RGB

rgb(54, 154, 66)

HSL

hsl(127, 48%, 41%)

HSB

hsb(127, 65%, 60%)

CMYK

cmyk(65%, 0%, 57%, 40%)

Oklch

oklch(60.8% 0.156 145.4)

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

#3354A1

Indigo · DarkSlateBlue · Navy Blue

HEX

#3354A1

RGB

rgb(51, 84, 161)

HSL

hsl(222, 52%, 42%)

HSB

hsb(222, 68%, 63%)

CMYK

cmyk(68%, 48%, 0%, 37%)

Oklch

oklch(46.3% 0.131 264.4)

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

#2142A1

Indigo · DarkSlateBlue · Prussian Blue

HEX

#2142A1

RGB

rgb(33, 66, 161)

HSL

hsl(225, 66%, 38%)

HSB

hsb(225, 80%, 63%)

CMYK

cmyk(80%, 59%, 0%, 37%)

Oklch

oklch(41.7% 0.159 265.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CAE071

8771E0

Analogous

E0BE71

CAE071

92E071

Triadic

CAE071

71CAE0

E071CA

Split-Comp.

CAE071

7192E0

BE71E0

Tetradic

CAE071

71E0BE

8771E0

E07192

Contrast Matrix WCAG 2.1 Contrast

CAE071	8CC94A	369A42	3354A1	2142A1
—	1.4 Fail	2.5 Fail	4.9 AA	6.1 AA
1.4 Fail	—	1.8 Fail	3.6 AA Large	4.5 AA Large
2.5 Fail	1.8 Fail	—	2.0 Fail	2.5 Fail
4.9 AA	3.6 AA Large	2.0 Fail	—	1.2 Fail
6.1 AA	4.5 AA Large	2.5 Fail	1.2 Fail	—

White BG

1.5Fail

2.0Fail

3.6AA Large

7.2AAA

8.9AAA

Black BG

14.4AAA

10.6AAA

5.9AA

2.9Fail

2.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

D4D48C

A6A769

616257

41428E

2F308A

Deuteranopia

D2D192

A39E70

5C545C

3F3D8A

2D2B85

Tritanopia

CBA1A6

8F8186

3B686C

35807C

237874

Achromatopsia

CDCDCD

A8A8A8

727272

535353

434343

Shades & Tints Shades & Tints

#CAE071

Dark

Light

#8CC94A

Dark

Light

#369A42

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cae071;
  --color-2: #8cc94a;
  --color-3: #369a42;
  --color-4: #3354a1;
  --color-5: #2142a1;
}

SCSS

$color-1: #cae071;
$color-2: #8cc94a;
$color-3: #369a42;
$color-4: #3354a1;
$color-5: #2142a1;

TAILWIND

colors: {
  'brand-1': '#cae071',
  'brand-2': '#8cc94a',
  'brand-3': '#369a42',
  'brand-4': '#3354a1',
  'brand-5': '#2142a1',
}

RGB Array

[202, 224, 113], [140, 201, 74], [54, 154, 66], [51, 84, 161], [33, 66, 161]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CAE071, #8CC94A, #369A42, #3354A1, #2142A1 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: #cae071; --color-2: #8cc94a; --color-3: #369a42; --color-4: #3354a1; --color-5: #2142a1. 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