← Back to Editor

#FFF89D · #F8D233 · #271231 · #68DEBB · #77EBBA

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#FFF89D

Fresh Green · Khaki · Lemon Cream

HEX
#FFF89D
RGB
rgb(255, 248, 157)
HSL
hsl(56, 100%, 81%)
HSB
hsb(56, 38%, 100%)
CMYK
cmyk(0%, 3%, 38%, 0%)
Oklch
oklch(96.5% 0.112 104.5)

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

#F8D233

Ginger · Gold · Sunflower

HEX
#F8D233
RGB
rgb(248, 210, 51)
HSL
hsl(48, 93%, 59%)
HSB
hsb(48, 79%, 97%)
CMYK
cmyk(0%, 15%, 79%, 3%)
Oklch
oklch(87.2% 0.166 94.5)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#271231

Dark Plum · MidnightBlue · Dark Purple

HEX
#271231
RGB
rgb(39, 18, 49)
HSL
hsl(281, 46%, 13%)
HSB
hsb(281, 63%, 19%)
CMYK
cmyk(20%, 63%, 0%, 81%)
Oklch
oklch(22.9% 0.063 313.7)

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

#68DEBB

Jade · MediumAquaMarine · Lake Green

HEX
#68DEBB
RGB
rgb(104, 222, 187)
HSL
hsl(162, 64%, 64%)
HSB
hsb(162, 53%, 87%)
CMYK
cmyk(53%, 0%, 16%, 13%)
Oklch
oklch(82.3% 0.119 171.3)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#77EBBA

Jade · MediumAquaMarine · Apple Green

HEX
#77EBBA
RGB
rgb(119, 235, 186)
HSL
hsl(155, 74%, 69%)
HSB
hsb(155, 49%, 92%)
CMYK
cmyk(49%, 0%, 21%, 8%)
Oklch
oklch(85.9% 0.128 163.9)

Traditional「Jade」· Paint「Apple Green」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFF89D
9EA5FF

Analogous

FFC89E
FFF89D
D5FF9E

Triadic

FFF89D
9EFFF9
F99EFF

Split-Comp.

FFF89D
9ED5FF
C89EFF

Tetradic

FFF89D
9EFFC8
9EA5FF
FF9ED5

Contrast Matrix WCAG 2.1 Contrast

FFF89D
F8D233
271231
68DEBB
77EBBA
—
1.3
Fail
15.7
AAA
1.5
Fail
1.3
Fail
1.3
Fail
—
11.7
AAA
1.1
Fail
1.0
Fail
15.7
AAA
11.7
AAA
—
10.5
AAA
11.8
AAA
1.5
Fail
1.1
Fail
10.5
AAA
—
1.1
Fail
1.3
Fail
1.0
Fail
11.8
AAA
1.1
Fail
—
White BG
1.1Fail
1.5Fail
17.3AAA
1.6Fail
1.5Fail
Black BG
19.2AAA
14.3AAA
1.2Fail
12.8AAA
14.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

FCFCB3
E8E759
1E1E29
9B9CC3
A9AAC6

Deuteranopia

FCFDB8
EAED63
1F2128
948BC6
A39AC9

Tritanopia

FFC4C8
F6787F
262422
6ECACC
7DCFD1

Achromatopsia

F0F0F0
CBCBCB
1C1C1C
B7B7B7
C3C3C3

Shades & Tints Shades & Tints

#FFF89D

Dark
Light

#F8D233

Dark
Light

#271231

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fff89d;
  --color-2: #f8d233;
  --color-3: #271231;
  --color-4: #68debb;
  --color-5: #77ebba;
}

SCSS

$color-1: #fff89d;
$color-2: #f8d233;
$color-3: #271231;
$color-4: #68debb;
$color-5: #77ebba;

TAILWIND

colors: {
  'brand-1': '#fff89d',
  'brand-2': '#f8d233',
  'brand-3': '#271231',
  'brand-4': '#68debb',
  'brand-5': '#77ebba',
}

RGB Array

[255, 248, 157], [248, 210, 51], [39, 18, 49], [104, 222, 187], [119, 235, 186]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FFF89D, #F8D233, #271231, #68DEBB, #77EBBA is ideal for: social media posters, mobile apps, e-commerce promos, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. 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: #fff89d; --color-2: #f8d233; --color-3: #271231; --color-4: #68debb; --color-5: #77ebba. 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 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