← Back to Editor

#E38826 · #BBAE7B · #A987AC · #A68AC8 · #995DDB

spring

A 5-color spring 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

#E38826

Ginger · GoldenRod · Warm Sun

HEX
#E38826
RGB
rgb(227, 136, 38)
HSL
hsl(31, 77%, 52%)
HSB
hsb(31, 83%, 89%)
CMYK
cmyk(0%, 40%, 83%, 11%)
Oklch
oklch(70.9% 0.151 61.5)

TraditionalGinger」· PaintWarm Sun」· Creative Blush Sunrise

#BBAE7B

Ginger · Tan · Sunflower

HEX
#BBAE7B
RGB
rgb(187, 174, 123)
HSL
hsl(48, 32%, 61%)
HSB
hsb(48, 34%, 73%)
CMYK
cmyk(0%, 7%, 34%, 27%)
Oklch
oklch(74.9% 0.070 95.5)

TraditionalGinger」· PaintSunflower」· Creative Lemon Fizz

#A987AC

Dark Plum · DarkGray · Violet

HEX
#A987AC
RGB
rgb(169, 135, 172)
HSL
hsl(295, 18%, 60%)
HSB
hsb(295, 22%, 67%)
CMYK
cmyk(2%, 22%, 0%, 33%)
Oklch
oklch(66.8% 0.066 323.6)

TraditionalDark Plum」· PaintViolet」· Creative Blush Sunrise

#A68AC8

Wisteria · DarkGray · Lilac Purple

HEX
#A68AC8
RGB
rgb(166, 138, 200)
HSL
hsl(267, 36%, 66%)
HSB
hsb(267, 31%, 78%)
CMYK
cmyk(17%, 31%, 0%, 22%)
Oklch
oklch(68.2% 0.094 304.7)

TraditionalWisteria」· PaintLilac Purple」· Creative Lavender Dream

#995DDB

Wisteria · MediumOrchid · Lilac Purple

HEX
#995DDB
RGB
rgb(153, 93, 219)
HSL
hsl(269, 64%, 61%)
HSB
hsb(269, 58%, 86%)
CMYK
cmyk(30%, 58%, 0%, 14%)
Oklch
oklch(60.3% 0.188 303.2)

TraditionalWisteria」· PaintLilac Purple」· Creative Lavender Dream

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E38826
2681E3

Analogous

E32926
E38826
E0E326

Triadic

E38826
26E388
8826E3

Split-Comp.

E38826
26E0E3
2926E3

Tetradic

E38826
26E329
2681E3
E326E0

Contrast Matrix WCAG 2.1 Contrast

E38826
BBAE7B
A987AC
A68AC8
995DDB
1.2
Fail
1.2
Fail
1.1
Fail
1.6
Fail
1.2
Fail
1.4
Fail
1.3
Fail
1.9
Fail
1.2
Fail
1.4
Fail
1.1
Fail
1.4
Fail
1.1
Fail
1.3
Fail
1.1
Fail
1.4
Fail
1.6
Fail
1.9
Fail
1.4
Fail
1.4
Fail
White BG
2.7Fail
2.2Fail
3.1AA Large
3.0Fail
4.2AA Large
Black BG
7.8AAA
9.5AAA
6.7AA
7.1AAA
4.9AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BCBB3E
B5B587
9A9AA3
9A9AB9
7F7EBD

Deuteranopia

C1C843
B6B78A
9C9FA1
9C9EB5
8387B5

Tritanopia

DE5055
BA9193
A79C9A
A5ADAB
96A49F

Achromatopsia

989898
ACACAC
959595
999999
7D7D7D

Shades & Tints Shades & Tints

#E38826

Dark
Light

#BBAE7B

Dark
Light

#A987AC

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e38826;
  --color-2: #bbae7b;
  --color-3: #a987ac;
  --color-4: #a68ac8;
  --color-5: #995ddb;
}

SCSS

$color-1: #e38826;
$color-2: #bbae7b;
$color-3: #a987ac;
$color-4: #a68ac8;
$color-5: #995ddb;

TAILWIND

colors: {
  'brand-1': '#e38826',
  'brand-2': '#bbae7b',
  'brand-3': '#a987ac',
  'brand-4': '#a68ac8',
  'brand-5': '#995ddb',
}

RGB Array

[227, 136, 38], [187, 174, 123], [169, 135, 172], [166, 138, 200], [153, 93, 219]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This spring-style palette of #E38826, #BBAE7B, #A987AC, #A68AC8, #995DDB 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: #e38826; --color-2: #bbae7b; --color-3: #a987ac; --color-4: #a68ac8; --color-5: #995ddb. 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 spring-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