← Back to Editor

#802F49 · #C4804F · #F2F1A2 · #C8C463 · #5E8C77

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 LibraryData Visualization

Color Details Color Details

#802F49

Dark Violet · Brown · Camellia

HEX
#802F49
RGB
rgb(128, 47, 73)
HSL
hsl(341, 46%, 34%)
HSB
hsb(341, 63%, 50%)
CMYK
cmyk(0%, 63%, 43%, 50%)
Oklch
oklch(42.9% 0.115 3.3)

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

#C4804F

Tangerine · Chocolate · Warm Sun

HEX
#C4804F
RGB
rgb(196, 128, 79)
HSL
hsl(25, 50%, 54%)
HSB
hsb(25, 60%, 77%)
CMYK
cmyk(0%, 35%, 60%, 23%)
Oklch
oklch(66.0% 0.106 55.5)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#F2F1A2

Fresh Green · Khaki · Lemon Cream

HEX
#F2F1A2
RGB
rgb(242, 241, 162)
HSL
hsl(59, 75%, 79%)
HSB
hsb(59, 33%, 95%)
CMYK
cmyk(0%, 0%, 33%, 5%)
Oklch
oklch(94.1% 0.099 107.5)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#C8C463

Autumn Sage · BurlyWood · Sunflower

HEX
#C8C463
RGB
rgb(200, 196, 99)
HSL
hsl(58, 48%, 59%)
HSB
hsb(58, 51%, 78%)
CMYK
cmyk(0%, 2%, 51%, 22%)
Oklch
oklch(80.3% 0.120 106.7)

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

#5E8C77

Mineral Blue · SlateGray · Olive Green

HEX
#5E8C77
RGB
rgb(94, 140, 119)
HSL
hsl(153, 20%, 46%)
HSB
hsb(153, 33%, 55%)
CMYK
cmyk(33%, 0%, 15%, 45%)
Oklch
oklch(60.0% 0.060 164.3)

Traditional「Mineral Blue」· Paint「Olive Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

802F49
2F7F65

Analogous

7F2F70
802F49
7F3D2F

Triadic

802F49
487F2F
2F487F

Split-Comp.

802F49
2F7F3D
2F707F

Tetradic

802F49
707F2F
2F7F65
3D2F7F

Contrast Matrix WCAG 2.1 Contrast

802F49
C4804F
F2F1A2
C8C463
5E8C77
—
2.7
Fail
7.4
AAA
4.8
AA
2.3
Fail
2.7
Fail
—
2.7
Fail
1.8
Fail
1.2
Fail
7.4
AAA
2.7
Fail
—
1.6
Fail
3.3
AA Large
4.8
AA
1.8
Fail
1.6
Fail
—
2.1
Fail
2.3
Fail
1.2
Fail
3.3
AA Large
2.1
Fail
—
White BG
8.7AAA
3.2AA Large
1.2Fail
1.8Fail
3.8AA Large
Black BG
2.4Fail
6.5AA
17.9AAA
11.5AAA
5.5AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

5D5C43
A7A65B
F2F2B5
C6C67A
72727C

Deuteranopia

626841
ABB05E
F2F2BA
C7C780
6F6C7D

Tritanopia

7C3E3D
C16466
F2C4C8
C88D91
608081

Achromatopsia

4A4A4A
8F8F8F
E8E8E8
BABABA
7C7C7C

Shades & Tints Shades & Tints

#802F49

Dark
Light

#C4804F

Dark
Light

#F2F1A2

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #802f49;
  --color-2: #c4804f;
  --color-3: #f2f1a2;
  --color-4: #c8c463;
  --color-5: #5e8c77;
}

SCSS

$color-1: #802f49;
$color-2: #c4804f;
$color-3: #f2f1a2;
$color-4: #c8c463;
$color-5: #5e8c77;

TAILWIND

colors: {
  'brand-1': '#802f49',
  'brand-2': '#c4804f',
  'brand-3': '#f2f1a2',
  'brand-4': '#c8c463',
  'brand-5': '#5e8c77',
}

RGB Array

[128, 47, 73], [196, 128, 79], [242, 241, 162], [200, 196, 99], [94, 140, 119]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This spring-style palette of #802F49, #C4804F, #F2F1A2, #C8C463, #5E8C77 is ideal for: 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: #802f49; --color-2: #c4804f; --color-3: #f2f1a2; --color-4: #c8c463; --color-5: #5e8c77. 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. 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