← Back to Editor

#FFA80D · #F4CE09 · #B6CC81 · #6CA689 · #898667

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

#FFA80D

Ginger · Orange · Warm Sun

HEX
#FFA80D
RGB
rgb(255, 168, 13)
HSL
hsl(38, 100%, 53%)
HSB
hsb(38, 95%, 100%)
CMYK
cmyk(0%, 34%, 95%, 0%)
Oklch
oklch(79.8% 0.169 71.8)

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

#F4CE09

Autumn Sage · Gold · Honey Gold

HEX
#F4CE09
RGB
rgb(244, 206, 9)
HSL
hsl(50, 93%, 50%)
HSB
hsb(50, 96%, 96%)
CMYK
cmyk(0%, 16%, 96%, 4%)
Oklch
oklch(85.8% 0.175 95.4)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#B6CC81

Willow Green · Tan · Apple Green

HEX
#B6CC81
RGB
rgb(182, 204, 129)
HSL
hsl(78, 42%, 65%)
HSB
hsb(78, 37%, 80%)
CMYK
cmyk(11%, 0%, 37%, 20%)
Oklch
oklch(81.1% 0.102 122.0)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

#6CA689

Mineral Blue · CadetBlue · Olive Green

HEX
#6CA689
RGB
rgb(108, 166, 137)
HSL
hsl(150, 25%, 54%)
HSB
hsb(150, 35%, 65%)
CMYK
cmyk(35%, 0%, 17%, 35%)
Oklch
oklch(67.7% 0.075 161.8)

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

#898667

Autumn Sage · Gray · Honey Gold

HEX
#898667
RGB
rgb(137, 134, 103)
HSL
hsl(55, 14%, 47%)
HSB
hsb(55, 25%, 54%)
CMYK
cmyk(0%, 2%, 25%, 46%)
Oklch
oklch(61.4% 0.045 103.0)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFA80D
0F67FF

Analogous

FF2F0F
FFA80D
DFFF0F

Triadic

FFA80D
0FFFA7
A70FFF

Split-Comp.

FFA80D
0FDFFF
2F0FFF

Tetradic

FFA80D
0FFF2F
0F67FF
FF0FDF

Contrast Matrix WCAG 2.1 Contrast

FFA80D
F4CE09
B6CC81
6CA689
898667
—
1.3
Fail
1.1
Fail
1.5
Fail
1.9
Fail
1.3
Fail
—
1.1
Fail
1.8
Fail
2.4
Fail
1.1
Fail
1.1
Fail
—
1.6
Fail
2.1
Fail
1.5
Fail
1.8
Fail
1.6
Fail
—
1.3
Fail
1.9
Fail
2.4
Fail
2.1
Fail
1.3
Fail
—
White BG
1.9Fail
1.5Fail
1.8Fail
2.8Fail
3.7AA Large
Black BG
10.9AAA
13.7AAA
11.9AAA
7.5AAA
5.7AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D9D933
E4E339
C0C093
858690
88886F

Deuteranopia

DEE53C
E6E944
BEBD98
827D92
888870

Tritanopia

FB5057
F25E67
B7A1A5
6F9697
897476

Achromatopsia

B0B0B0
C3C3C3
BDBDBD
919191
838383

Shades & Tints Shades & Tints

#FFA80D

Dark
Light

#F4CE09

Dark
Light

#B6CC81

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ffa80d;
  --color-2: #f4ce09;
  --color-3: #b6cc81;
  --color-4: #6ca689;
  --color-5: #898667;
}

SCSS

$color-1: #ffa80d;
$color-2: #f4ce09;
$color-3: #b6cc81;
$color-4: #6ca689;
$color-5: #898667;

TAILWIND

colors: {
  'brand-1': '#ffa80d',
  'brand-2': '#f4ce09',
  'brand-3': '#b6cc81',
  'brand-4': '#6ca689',
  'brand-5': '#898667',
}

RGB Array

[255, 168, 13], [244, 206, 9], [182, 204, 129], [108, 166, 137], [137, 134, 103]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This spring-style palette of #FFA80D, #F4CE09, #B6CC81, #6CA689, #898667 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: #ffa80d; --color-2: #f4ce09; --color-3: #b6cc81; --color-4: #6ca689; --color-5: #898667. 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