#E2CA4E + #81BA5B + #3A9FA0 + #516CF1 + #415377 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#E2CA4E

Autumn Sage · SandyBrown · Sunflower

HEX

#E2CA4E

RGB

rgb(226, 202, 78)

HSL

hsl(50, 72%, 60%)

HSB

hsb(50, 65%, 89%)

CMYK

cmyk(0%, 11%, 65%, 11%)

Oklch

oklch(83.7% 0.143 98.2)

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

#81BA5B

Celadon · DarkSeaGreen · Olive Green

HEX

#81BA5B

RGB

rgb(129, 186, 91)

HSL

hsl(96, 41%, 54%)

HSB

hsb(96, 51%, 73%)

CMYK

cmyk(31%, 0%, 51%, 27%)

Oklch

oklch(72.8% 0.140 134.2)

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

#3A9FA0

Slate Blue · LightSeaGreen · Mint Ice

HEX

#3A9FA0

RGB

rgb(58, 159, 160)

HSL

hsl(181, 47%, 43%)

HSB

hsb(181, 64%, 63%)

CMYK

cmyk(64%, 1%, 0%, 37%)

Oklch

oklch(64.5% 0.092 196.1)

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

#516CF1

Azure · MediumSlateBlue · Cobalt Blue

HEX

#516CF1

RGB

rgb(81, 108, 241)

HSL

hsl(230, 85%, 63%)

HSB

hsb(230, 66%, 95%)

CMYK

cmyk(66%, 55%, 0%, 5%)

Oklch

oklch(58.5% 0.201 270.3)

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

#415377

Indigo · DarkSlateBlue · Prussian Blue

HEX

#415377

RGB

rgb(65, 83, 119)

HSL

hsl(220, 29%, 36%)

HSB

hsb(220, 45%, 47%)

CMYK

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

Oklch

oklch(44.3% 0.064 263.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E2CA4E

5068E2

Analogous

E28150

E2CA4E

B1E250

Triadic

E2CA4E

50E2CA

CA50E2

Split-Comp.

E2CA4E

50B1E2

8150E2

Tetradic

E2CA4E

50E281

5068E2

E250B1

Contrast Matrix WCAG 2.1 Contrast

E2CA4E	81BA5B	3A9FA0	516CF1	415377
—	1.4 Fail	1.9 Fail	2.7 Fail	4.7 AA
1.4 Fail	—	1.4 Fail	1.9 Fail	3.3 AA Large
1.9 Fail	1.4 Fail	—	1.4 Fail	2.4 Fail
2.7 Fail	1.9 Fail	1.4 Fail	—	1.7 Fail
4.7 AA	3.3 AA Large	2.4 Fail	1.7 Fail	—

White BG

1.6Fail

2.3Fail

3.2AA Large

4.4AA Large

7.7AAA

Black BG

12.8AAA

9.1AAA

6.6AA

4.8AA

2.7Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

D8D76C

9A9A72

6667A0

5D5DD1

49496E

Deuteranopia

D9DB73

969278

6058A0

5B59C9

48466C

Tritanopia

E18489

848488

3FA0A0

52B7B2

426766

Achromatopsia

C3C3C3

9E9E9E

818181

737373

525252

Shades & Tints Shades & Tints

#E2CA4E

Dark

Light

#81BA5B

Dark

Light

#3A9FA0

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e2ca4e;
  --color-2: #81ba5b;
  --color-3: #3a9fa0;
  --color-4: #516cf1;
  --color-5: #415377;
}

SCSS

$color-1: #e2ca4e;
$color-2: #81ba5b;
$color-3: #3a9fa0;
$color-4: #516cf1;
$color-5: #415377;

TAILWIND

colors: {
  'brand-1': '#e2ca4e',
  'brand-2': '#81ba5b',
  'brand-3': '#3a9fa0',
  'brand-4': '#516cf1',
  'brand-5': '#415377',
}

RGB Array

[226, 202, 78], [129, 186, 91], [58, 159, 160], [81, 108, 241], [65, 83, 119]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E2CA4E, #81BA5B, #3A9FA0, #516CF1, #415377 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: #e2ca4e; --color-2: #81ba5b; --color-3: #3a9fa0; --color-4: #516cf1; --color-5: #415377. 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