← Back to Editor

#BD3E67 · #E7569B · #D8CA43 · #F5E3EF · #B0B2BE

spring

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#BD3E67

Dark Violet · MediumVioletRed · Camellia

HEX
#BD3E67
RGB
rgb(189, 62, 103)
HSL
hsl(341, 51%, 49%)
HSB
hsb(341, 67%, 74%)
CMYK
cmyk(0%, 67%, 46%, 26%)
Oklch
oklch(55.6% 0.165 4.5)

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

#E7569B

Rouge · LightCoral · Rose Pink

HEX
#E7569B
RGB
rgb(231, 86, 155)
HSL
hsl(331, 75%, 62%)
HSB
hsb(331, 63%, 91%)
CMYK
cmyk(0%, 63%, 33%, 9%)
Oklch
oklch(66.3% 0.191 354.1)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

#D8CA43

Autumn Sage · GoldenRod · Sunflower

HEX
#D8CA43
RGB
rgb(216, 202, 67)
HSL
hsl(54, 66%, 55%)
HSB
hsb(54, 69%, 85%)
CMYK
cmyk(0%, 6%, 69%, 15%)
Oklch
oklch(82.7% 0.151 103.3)

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

#F5E3EF

Mauve · Linen · Cherry Blossom

HEX
#F5E3EF
RGB
rgb(245, 227, 239)
HSL
hsl(320, 47%, 93%)
HSB
hsb(320, 7%, 96%)
CMYK
cmyk(0%, 7%, 2%, 4%)
Oklch
oklch(93.4% 0.025 337.8)

Traditional「Mauve」· Paint「Cherry Blossom」· Creative Rose Petal

#B0B2BE

Azure · Silver · Cobalt Blue

HEX
#B0B2BE
RGB
rgb(176, 178, 190)
HSL
hsl(231, 10%, 72%)
HSB
hsb(231, 7%, 75%)
CMYK
cmyk(7%, 6%, 0%, 25%)
Oklch
oklch(76.6% 0.017 278.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BD3E67
3DBD94

Analogous

BD3DA5
BD3E67
BD553D

Triadic

BD3E67
66BD3D
3D66BD

Split-Comp.

BD3E67
3DBD55
3DA5BD

Tetradic

BD3E67
A5BD3D
3DBD94
553DBD

Contrast Matrix WCAG 2.1 Contrast

BD3E67
E7569B
D8CA43
F5E3EF
B0B2BE
—
1.5
Fail
3.1
AA Large
4.2
AA Large
2.5
Fail
1.5
Fail
—
2.0
Fail
2.8
Fail
1.6
Fail
3.1
AA Large
2.0
Fail
—
1.4
Fail
1.3
Fail
4.2
AA Large
2.8
Fail
1.4
Fail
—
1.7
Fail
2.5
Fail
1.6
Fail
1.3
Fail
1.7
Fail
—
White BG
5.2AA
3.4AA Large
1.7Fail
1.2Fail
2.1Fail
Black BG
4.0AA Large
6.2AA
12.4AAA
17.1AAA
10.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

86855D
A8A78A
D2D264
EDEDEC
B1B1BB

Deuteranopia

8D975B
B1BC86
D3D46C
EEF0EB
B1B1BA

Tritanopia

B75554
E07D7A
D77D83
F4EAE9
B0B9B8

Achromatopsia

696969
898989
BFBFBF
EAEAEA
B3B3B3

Shades & Tints Shades & Tints

#BD3E67

Dark
Light

#E7569B

Dark
Light

#D8CA43

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bd3e67;
  --color-2: #e7569b;
  --color-3: #d8ca43;
  --color-4: #f5e3ef;
  --color-5: #b0b2be;
}

SCSS

$color-1: #bd3e67;
$color-2: #e7569b;
$color-3: #d8ca43;
$color-4: #f5e3ef;
$color-5: #b0b2be;

TAILWIND

colors: {
  'brand-1': '#bd3e67',
  'brand-2': '#e7569b',
  'brand-3': '#d8ca43',
  'brand-4': '#f5e3ef',
  'brand-5': '#b0b2be',
}

RGB Array

[189, 62, 103], [231, 86, 155], [216, 202, 67], [245, 227, 239], [176, 178, 190]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This spring-style palette of #BD3E67, #E7569B, #D8CA43, #F5E3EF, #B0B2BE is ideal for: health products, baby brands, fresh-style blogs, 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: #bd3e67; --color-2: #e7569b; --color-3: #d8ca43; --color-4: #f5e3ef; --color-5: #b0b2be. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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 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