← Back to Editor

#F8F81C · #DAE94C · #BCDB7B · #9ECCAB · #80BDDA

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial App

Color Details Color Details

#F8F81C

Autumn Sage · Yellow · Sunflower

HEX
#F8F81C
RGB
rgb(248, 248, 28)
HSL
hsl(60, 94%, 54%)
HSB
hsb(60, 89%, 97%)
CMYK
cmyk(0%, 0%, 89%, 3%)
Oklch
oklch(94.8% 0.203 109.7)

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

#DAE94C

Fresh Green · GreenYellow · Sunflower

HEX
#DAE94C
RGB
rgb(218, 233, 76)
HSL
hsl(66, 78%, 61%)
HSB
hsb(66, 67%, 91%)
CMYK
cmyk(6%, 0%, 67%, 9%)
Oklch
oklch(89.5% 0.175 114.7)

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

#BCDB7B

Willow Green · Tan · Apple Green

HEX
#BCDB7B
RGB
rgb(188, 219, 123)
HSL
hsl(79, 57%, 67%)
HSB
hsb(79, 44%, 86%)
CMYK
cmyk(14%, 0%, 44%, 14%)
Oklch
oklch(84.7% 0.127 123.7)

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

#9ECCAB

Celadon · DarkSeaGreen · Apple Green

HEX
#9ECCAB
RGB
rgb(158, 204, 171)
HSL
hsl(137, 31%, 71%)
HSB
hsb(137, 23%, 80%)
CMYK
cmyk(23%, 0%, 16%, 20%)
Oklch
oklch(80.3% 0.067 153.5)

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

#80BDDA

Sky Blue · SkyBlue · Lake Green

HEX
#80BDDA
RGB
rgb(128, 189, 218)
HSL
hsl(199, 55%, 68%)
HSB
hsb(199, 41%, 85%)
CMYK
cmyk(41%, 13%, 0%, 15%)
Oklch
oklch(76.7% 0.075 229.4)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F8F81C
1B1BF8

Analogous

F88A1B
F8F81C
8AF81B

Triadic

F8F81C
1BF8F8
F81BF8

Split-Comp.

F8F81C
1B8AF8
8A1BF8

Tetradic

F8F81C
1BF88A
1B1BF8
F81B8A

Contrast Matrix WCAG 2.1 Contrast

F8F81C
DAE94C
BCDB7B
9ECCAB
80BDDA
—
1.2
Fail
1.4
Fail
1.6
Fail
1.8
Fail
1.2
Fail
—
1.2
Fail
1.3
Fail
1.5
Fail
1.4
Fail
1.2
Fail
—
1.2
Fail
1.3
Fail
1.6
Fail
1.3
Fail
1.2
Fail
—
1.1
Fail
1.8
Fail
1.5
Fail
1.3
Fail
1.1
Fail
—
White BG
1.1Fail
1.3Fail
1.5Fail
1.8Fail
2.1Fail
Black BG
18.4AAA
15.7AAA
13.6AAA
11.7AAA
10.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F8F851
E0E172
C9CA92
B2B2B3
9A9BD3

Deuteranopia

F8F85E
E0DF7B
C8C598
AFACB5
9792D1

Tritanopia

F87B85
DB9097
BEA5A9
A0B9BB
83CDCC

Achromatopsia

DFDFDF
D3D3D3
C7C7C7
BABABA
AEAEAE

Shades & Tints Shades & Tints

#F8F81C

Dark
Light

#DAE94C

Dark
Light

#BCDB7B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f8f81c;
  --color-2: #dae94c;
  --color-3: #bcdb7b;
  --color-4: #9eccab;
  --color-5: #80bdda;
}

SCSS

$color-1: #f8f81c;
$color-2: #dae94c;
$color-3: #bcdb7b;
$color-4: #9eccab;
$color-5: #80bdda;

TAILWIND

colors: {
  'brand-1': '#f8f81c',
  'brand-2': '#dae94c',
  'brand-3': '#bcdb7b',
  'brand-4': '#9eccab',
  'brand-5': '#80bdda',
}

RGB Array

[248, 248, 28], [218, 233, 76], [188, 219, 123], [158, 204, 171], [128, 189, 218]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F8F81C, #DAE94C, #BCDB7B, #9ECCAB, #80BDDA is ideal for: social media posters, mobile apps, e-commerce promos. Vivid colors effectively attract user attention. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #f8f81c; --color-2: #dae94c; --color-3: #bcdb7b; --color-4: #9eccab; --color-5: #80bdda. 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 general-style 5-color scheme is especially suited for food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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