← Back to Editor

#E5F45B · #DCDD48 · #CBB677 · #854268 · #533141

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#E5F45B

Fresh Green · Khaki · Sunflower

HEX
#E5F45B
RGB
rgb(229, 244, 91)
HSL
hsl(66, 87%, 66%)
HSB
hsb(66, 63%, 96%)
CMYK
cmyk(6%, 0%, 63%, 4%)
Oklch
oklch(92.8% 0.174 114.6)

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

#DCDD48

Autumn Sage · GreenYellow · Sunflower

HEX
#DCDD48
RGB
rgb(220, 221, 72)
HSL
hsl(60, 69%, 57%)
HSB
hsb(60, 67%, 87%)
CMYK
cmyk(0%, 0%, 67%, 13%)
Oklch
oklch(87.1% 0.165 109.8)

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

#CBB677

Ginger · Tan · Sunflower

HEX
#CBB677
RGB
rgb(203, 182, 119)
HSL
hsl(45, 45%, 63%)
HSB
hsb(45, 41%, 80%)
CMYK
cmyk(0%, 10%, 41%, 20%)
Oklch
oklch(78.0% 0.085 91.7)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#854268

Rose Purple · DimGray · Camellia

HEX
#854268
RGB
rgb(133, 66, 104)
HSL
hsl(326, 34%, 39%)
HSB
hsb(326, 50%, 52%)
CMYK
cmyk(0%, 50%, 22%, 48%)
Oklch
oklch(47.6% 0.103 346.6)

Traditional「Rose Purple」· Paint「Camellia」· Creative Blush Sunrise

#533141

Dark Violet · DarkSlateGray · Camellia

HEX
#533141
RGB
rgb(83, 49, 65)
HSL
hsl(332, 26%, 26%)
HSB
hsb(332, 41%, 33%)
CMYK
cmyk(0%, 41%, 22%, 67%)
Oklch
oklch(36.1% 0.055 350.5)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E5F45B
6C5DF4

Analogous

F4B75D
E5F45B
99F45D

Triadic

E5F45B
5DE5F4
F45DE5

Split-Comp.

E5F45B
5D99F4
B75DF4

Tetradic

E5F45B
5DF4B7
6C5DF4
F45D99

Contrast Matrix WCAG 2.1 Contrast

E5F45B
DCDD48
CBB677
854268
533141
—
1.2
Fail
1.7
Fail
5.9
AA
9.3
AAA
1.2
Fail
—
1.4
Fail
4.9
AA
7.7
AAA
1.7
Fail
1.4
Fail
—
3.5
AA Large
5.6
AA
5.9
AA
4.9
AA
3.5
AA Large
—
1.6
Fail
9.3
AAA
7.7
AAA
5.6
AA
1.6
Fail
—
White BG
1.2Fail
1.5Fail
2.0Fail
7.1AAA
11.1AAA
Black BG
17.4AAA
14.5AAA
10.5AAA
3.0Fail
1.9Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

EBEC80
DCDC6C
C2C286
68675F
44443D

Deuteranopia

EBEA89
DCDC75
C3C58A
6C715D
46493C

Tritanopia

E69DA4
DC898F
CA9295
825856
513A39

Achromatopsia

DEDEDE
CCCCCC
B5B5B5
5A5A5A
3D3D3D

Shades & Tints Shades & Tints

#E5F45B

Dark
Light

#DCDD48

Dark
Light

#CBB677

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e5f45b;
  --color-2: #dcdd48;
  --color-3: #cbb677;
  --color-4: #854268;
  --color-5: #533141;
}

SCSS

$color-1: #e5f45b;
$color-2: #dcdd48;
$color-3: #cbb677;
$color-4: #854268;
$color-5: #533141;

TAILWIND

colors: {
  'brand-1': '#e5f45b',
  'brand-2': '#dcdd48',
  'brand-3': '#cbb677',
  'brand-4': '#854268',
  'brand-5': '#533141',
}

RGB Array

[229, 244, 91], [220, 221, 72], [203, 182, 119], [133, 66, 104], [83, 49, 65]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E5F45B, #DCDD48, #CBB677, #854268, #533141 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: #e5f45b; --color-2: #dcdd48; --color-3: #cbb677; --color-4: #854268; --color-5: #533141. 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