← Back to Editor

#E2E3FD · #776456 · #542F2D · #BEDF62 · #A987B6

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 LibraryData Visualization

Color Details Color Details

#E2E3FD

Azure · Lavender · Sky Blue

HEX
#E2E3FD
RGB
rgb(226, 227, 253)
HSL
hsl(238, 87%, 94%)
HSB
hsb(238, 11%, 99%)
CMYK
cmyk(11%, 10%, 0%, 1%)
Oklch
oklch(92.3% 0.035 283.9)

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

#776456

Tangerine · DimGray · Amber Brown

HEX
#776456
RGB
rgb(119, 100, 86)
HSL
hsl(25, 16%, 40%)
HSB
hsb(25, 28%, 47%)
CMYK
cmyk(0%, 16%, 28%, 53%)
Oklch
oklch(51.8% 0.033 58.3)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

#542F2D

Crimson · DarkSlateGray · Wine Red

HEX
#542F2D
RGB
rgb(84, 47, 45)
HSL
hsl(3, 30%, 25%)
HSB
hsb(3, 46%, 33%)
CMYK
cmyk(0%, 44%, 46%, 67%)
Oklch
oklch(35.1% 0.055 23.5)

Traditional「Crimson」· Paint「Wine Red」· Creative Blush Sunrise

#BEDF62

Willow Green · BurlyWood · Apple Green

HEX
#BEDF62
RGB
rgb(190, 223, 98)
HSL
hsl(76, 66%, 63%)
HSB
hsb(76, 56%, 87%)
CMYK
cmyk(15%, 0%, 56%, 13%)
Oklch
oklch(85.4% 0.156 122.1)

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

#A987B6

Lilac · DarkGray · Lilac Purple

HEX
#A987B6
RGB
rgb(169, 135, 182)
HSL
hsl(283, 24%, 62%)
HSB
hsb(283, 26%, 71%)
CMYK
cmyk(7%, 26%, 0%, 29%)
Oklch
oklch(67.1% 0.078 316.5)

Traditional「Lilac」· Paint「Lilac Purple」· Creative Lavender Dream

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E2E3FD
FDFCE2

Analogous

E2F1FD
E2E3FD
EFE2FD

Triadic

E2E3FD
FDE2E3
E3FDE2

Split-Comp.

E2E3FD
FDEFE2
F1FDE2

Tetradic

E2E3FD
FDE2F1
FDFCE2
E2FDEF

Contrast Matrix WCAG 2.1 Contrast

E2E3FD
776456
542F2D
BEDF62
A987B6
—
4.4
AA Large
9.1
AAA
1.2
Fail
2.4
Fail
4.4
AA Large
—
2.1
Fail
3.7
AA Large
1.8
Fail
9.1
AAA
2.1
Fail
—
7.6
AAA
3.7
AA Large
1.2
Fail
3.7
AA Large
7.6
AAA
—
2.0
Fail
2.4
Fail
1.8
Fail
3.7
AA Large
2.0
Fail
—
White BG
1.3Fail
5.6AA
11.5AAA
1.5Fail
3.1AA Large
Black BG
16.6AAA
3.7AA Large
1.8Fail
13.9AAA
6.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E2E2F7
6F6F59
44442D
CCCD80
9A9AAB

Deuteranopia

E2E2F5
70715A
46492E
CAC888
9C9FA8

Tritanopia

E2F2F1
765C5D
522E2E
C0989D
A7A2A0

Achromatopsia

E6E6E6
686868
3A3A3A
C7C7C7
979797

Shades & Tints Shades & Tints

#E2E3FD

Dark
Light

#776456

Dark
Light

#542F2D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e2e3fd;
  --color-2: #776456;
  --color-3: #542f2d;
  --color-4: #bedf62;
  --color-5: #a987b6;
}

SCSS

$color-1: #e2e3fd;
$color-2: #776456;
$color-3: #542f2d;
$color-4: #bedf62;
$color-5: #a987b6;

TAILWIND

colors: {
  'brand-1': '#e2e3fd',
  'brand-2': '#776456',
  'brand-3': '#542f2d',
  'brand-4': '#bedf62',
  'brand-5': '#a987b6',
}

RGB Array

[226, 227, 253], [119, 100, 86], [84, 47, 45], [190, 223, 98], [169, 135, 182]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E2E3FD, #776456, #542F2D, #BEDF62, #A987B6 is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #e2e3fd; --color-2: #776456; --color-3: #542f2d; --color-4: #bedf62; --color-5: #a987b6. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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