← Back to Editor

#E74263 · #DA8170 · #C9AC8C · #BBB4A0 · #FF077F

spring

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

#E74263

Vermilion · Tomato · Passion Red

HEX
#E74263
RGB
rgb(231, 66, 99)
HSL
hsl(348, 77%, 58%)
HSB
hsb(348, 71%, 91%)
CMYK
cmyk(0%, 71%, 57%, 9%)
Oklch
oklch(62.7% 0.201 13.8)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

#DA8170

Peach Pink · LightCoral · Coral Red

HEX
#DA8170
RGB
rgb(218, 129, 112)
HSL
hsl(10, 59%, 65%)
HSB
hsb(10, 49%, 85%)
CMYK
cmyk(0%, 41%, 49%, 15%)
Oklch
oklch(69.5% 0.114 31.7)

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

#C9AC8C

Ginger · Tan · Warm Sun

HEX
#C9AC8C
RGB
rgb(201, 172, 140)
HSL
hsl(31, 36%, 67%)
HSB
hsb(31, 30%, 79%)
CMYK
cmyk(0%, 14%, 30%, 21%)
Oklch
oklch(76.2% 0.055 69.6)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

#BBB4A0

Ginger · DarkGray · Sunflower

HEX
#BBB4A0
RGB
rgb(187, 180, 160)
HSL
hsl(44, 17%, 68%)
HSB
hsb(44, 14%, 73%)
CMYK
cmyk(0%, 4%, 14%, 27%)
Oklch
oklch(77.0% 0.029 91.0)

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

#FF077F

Dark Violet · DeepPink · Rose Pink

HEX
#FF077F
RGB
rgb(255, 7, 127)
HSL
hsl(331, 100%, 51%)
HSB
hsb(331, 97%, 100%)
CMYK
cmyk(0%, 97%, 50%, 0%)
Oklch
oklch(64.6% 0.259 2.9)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E74263
41E6C5

Analogous

E641B5
E74263
E67341

Triadic

E74263
62E641
4162E6

Split-Comp.

E74263
41E673
41B5E6

Tetradic

E74263
B5E641
41E6C5
7341E6

Contrast Matrix WCAG 2.1 Contrast

E74263
DA8170
C9AC8C
BBB4A0
FF077F
—
1.4
Fail
1.8
Fail
1.9
Fail
1.0
Fail
1.4
Fail
—
1.3
Fail
1.4
Fail
1.3
Fail
1.8
Fail
1.3
Fail
—
1.0
Fail
1.7
Fail
1.9
Fail
1.4
Fail
1.0
Fail
—
1.8
Fail
1.0
Fail
1.3
Fail
1.7
Fail
1.8
Fail
—
White BG
3.9AA Large
2.9Fail
2.2Fail
2.1Fail
3.8AA Large
Black BG
5.4AA
7.4AAA
9.8AAA
10.1AAA
5.6AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A09E5B
B3B374
BCBC94
B8B8A5
949162

Deuteranopia

A9B659
B9BF75
BEC096
B8B9A6
A2B55B

Tritanopia

DF5553
D67778
C89A9B
BBA9AA
F34B46

Achromatopsia

777777
9A9A9A
B1B1B1
B4B4B4
5F5F5F

Shades & Tints Shades & Tints

#E74263

Dark
Light

#DA8170

Dark
Light

#C9AC8C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e74263;
  --color-2: #da8170;
  --color-3: #c9ac8c;
  --color-4: #bbb4a0;
  --color-5: #ff077f;
}

SCSS

$color-1: #e74263;
$color-2: #da8170;
$color-3: #c9ac8c;
$color-4: #bbb4a0;
$color-5: #ff077f;

TAILWIND

colors: {
  'brand-1': '#e74263',
  'brand-2': '#da8170',
  'brand-3': '#c9ac8c',
  'brand-4': '#bbb4a0',
  'brand-5': '#ff077f',
}

RGB Array

[231, 66, 99], [218, 129, 112], [201, 172, 140], [187, 180, 160], [255, 7, 127]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This spring-style palette of #E74263, #DA8170, #C9AC8C, #BBB4A0, #FF077F 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: #e74263; --color-2: #da8170; --color-3: #c9ac8c; --color-4: #bbb4a0; --color-5: #ff077f. 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