← Back to Editor

#6D628E · #8E7195 · #AF809C · #D08FA3 · #F19FAA

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

#6D628E

Deep Indigo · SlateGray · Navy Blue

HEX
#6D628E
RGB
rgb(109, 98, 142)
HSL
hsl(255, 18%, 47%)
HSB
hsb(255, 31%, 56%)
CMYK
cmyk(23%, 31%, 0%, 44%)
Oklch
oklch(52.4% 0.069 295.4)

Traditional「Deep Indigo」· Paint「Navy Blue」· Creative Blush Sunrise

#8E7195

Dark Plum · Gray · Violet

HEX
#8E7195
RGB
rgb(142, 113, 149)
HSL
hsl(288, 15%, 51%)
HSB
hsb(288, 24%, 58%)
CMYK
cmyk(5%, 24%, 0%, 42%)
Oklch
oklch(58.9% 0.064 319.7)

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

#AF809C

Rose Purple · DarkGray · Rose Pink

HEX
#AF809C
RGB
rgb(175, 128, 156)
HSL
hsl(324, 23%, 59%)
HSB
hsb(324, 27%, 69%)
CMYK
cmyk(0%, 27%, 11%, 31%)
Oklch
oklch(65.5% 0.069 342.7)

Traditional「Rose Purple」· Paint「Rose Pink」· Creative Blush Sunrise

#D08FA3

Rouge · Tan · Rose Pink

HEX
#D08FA3
RGB
rgb(208, 143, 163)
HSL
hsl(342, 41%, 69%)
HSB
hsb(342, 31%, 82%)
CMYK
cmyk(0%, 31%, 22%, 18%)
Oklch
oklch(72.0% 0.083 359.3)

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

#F19FAA

Peach Pink · LightPink · Coral Red

HEX
#F19FAA
RGB
rgb(241, 159, 170)
HSL
hsl(352, 75%, 78%)
HSB
hsb(352, 34%, 95%)
CMYK
cmyk(0%, 34%, 29%, 5%)
Oklch
oklch(78.6% 0.098 10.8)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

6D628E
838D62

Analogous

626D8D
6D628E
83628D

Triadic

6D628E
8D6D62
628D6D

Split-Comp.

6D628E
8D8362
6D8D62

Tetradic

6D628E
8D626D
838D62
628D83

Contrast Matrix WCAG 2.1 Contrast

6D628E
8E7195
AF809C
D08FA3
F19FAA
—
1.3
Fail
1.7
Fail
2.1
Fail
2.7
Fail
1.3
Fail
—
1.3
Fail
1.6
Fail
2.1
Fail
1.7
Fail
1.3
Fail
—
1.3
Fail
1.6
Fail
2.1
Fail
1.6
Fail
1.3
Fail
—
1.3
Fail
2.7
Fail
2.1
Fail
1.6
Fail
1.3
Fail
—
White BG
5.5AA
4.2AA Large
3.3AA Large
2.6Fail
2.0Fail
Black BG
3.8AA Large
4.9AA
6.4AA
8.1AAA
10.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

686883
81818C
9B9A95
B4B39E
CDCDA7

Deuteranopia

696A81
83858A
9DA194
B8BD9D
D2D8A7

Tritanopia

6C7B79
8D8584
AD908F
CD9A9A
EDA5A5

Achromatopsia

6A6A6A
7E7E7E
919191
A5A5A5
B9B9B9

Shades & Tints Shades & Tints

#6D628E

Dark
Light

#8E7195

Dark
Light

#AF809C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #6d628e;
  --color-2: #8e7195;
  --color-3: #af809c;
  --color-4: #d08fa3;
  --color-5: #f19faa;
}

SCSS

$color-1: #6d628e;
$color-2: #8e7195;
$color-3: #af809c;
$color-4: #d08fa3;
$color-5: #f19faa;

TAILWIND

colors: {
  'brand-1': '#6d628e',
  'brand-2': '#8e7195',
  'brand-3': '#af809c',
  'brand-4': '#d08fa3',
  'brand-5': '#f19faa',
}

RGB Array

[109, 98, 142], [142, 113, 149], [175, 128, 156], [208, 143, 163], [241, 159, 170]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This spring-style palette of #6D628E, #8E7195, #AF809C, #D08FA3, #F19FAA 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: #6d628e; --color-2: #8e7195; --color-3: #af809c; --color-4: #d08fa3; --color-5: #f19faa. 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