← Back to Editor

#425A78 · #E96E67 · #82937F · #A08BB1

spring

A 4-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

#425A78

Indigo · DarkSlateBlue · Prussian Blue

HEX
#425A78
RGB
rgb(66, 90, 120)
HSL
hsl(213, 29%, 36%)
HSB
hsb(213, 45%, 47%)
CMYK
cmyk(45%, 25%, 0%, 53%)
Oklch
oklch(46.1% 0.057 254.4)

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

#E96E67

Peach Pink · Salmon · Coral Red

HEX
#E96E67
RGB
rgb(233, 110, 103)
HSL
hsl(3, 75%, 66%)
HSB
hsb(3, 56%, 91%)
CMYK
cmyk(0%, 53%, 56%, 9%)
Oklch
oklch(68.3% 0.154 25.2)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#82937F

Celadon · Gray · Warm Gray

HEX
#82937F
RGB
rgb(130, 147, 127)
HSL
hsl(111, 8%, 54%)
HSB
hsb(111, 14%, 58%)
CMYK
cmyk(12%, 0%, 14%, 42%)
Oklch
oklch(64.4% 0.035 140.9)

Traditional「Celadon」· Paint「Warm Gray」· Creative Urban Concrete

#A08BB1

Lilac · DarkGray · Lilac Purple

HEX
#A08BB1
RGB
rgb(160, 139, 177)
HSL
hsl(273, 20%, 62%)
HSB
hsb(273, 21%, 69%)
CMYK
cmyk(10%, 21%, 0%, 31%)
Oklch
oklch(66.9% 0.060 309.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

425A78
765E41

Analogous

417476
425A78
444176

Triadic

425A78
764159
597641

Split-Comp.

425A78
764441
747641

Tetradic

425A78
764174
765E41
417644

Contrast Matrix WCAG 2.1 Contrast

425A78
E96E67
82937F
A08BB1
—
2.3
Fail
2.2
Fail
2.3
Fail
2.3
Fail
—
1.1
Fail
1.0
Fail
2.2
Fail
1.1
Fail
—
1.1
Fail
2.3
Fail
1.0
Fail
1.1
Fail
—
White BG
7.1AAA
3.0AA Large
3.3AA Large
3.1AA Large
Black BG
3.0Fail
6.9AA
6.4AA
6.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

4C4D71
B4B369
898A84
9797A8

Deuteranopia

4B496F
BBC469
888785
989AA6

Tritanopia

436B6A
E36A6A
838889
9FA19F

Achromatopsia

565656
929292
8C8C8C
969696

Shades & Tints Shades & Tints

#425A78

Dark
Light

#E96E67

Dark
Light

#82937F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #425a78;
  --color-2: #e96e67;
  --color-3: #82937f;
  --color-4: #a08bb1;
}

SCSS

$color-1: #425a78;
$color-2: #e96e67;
$color-3: #82937f;
$color-4: #a08bb1;

TAILWIND

colors: {
  'brand-1': '#425a78',
  'brand-2': '#e96e67',
  'brand-3': '#82937f',
  'brand-4': '#a08bb1',
}

RGB Array

[66, 90, 120], [233, 110, 103], [130, 147, 127], [160, 139, 177]

FAQ FAQ

What scenarios is this 4-color palette suitable for?

This spring-style palette of #425A78, #E96E67, #82937F, #A08BB1 is ideal for: corporate websites, product showcases, portfolios. It is a balanced and harmonious choice among 4-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #425a78; --color-2: #e96e67; --color-3: #82937f; --color-4: #a08bb1. 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 4-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