← Back to Editor

#F4E60D · #FBF8E6 · #D9DFBB · #74C8AB · #08AEAA

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

#F4E60D

Autumn Sage · Gold · Honey Gold

HEX
#F4E60D
RGB
rgb(244, 230, 13)
HSL
hsl(56, 91%, 50%)
HSB
hsb(56, 95%, 96%)
CMYK
cmyk(0%, 6%, 95%, 4%)
Oklch
oklch(90.7% 0.191 105.1)

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

#FBF8E6

Fresh Green · Linen · Lemon Cream

HEX
#FBF8E6
RGB
rgb(251, 248, 230)
HSL
hsl(51, 72%, 94%)
HSB
hsb(51, 8%, 98%)
CMYK
cmyk(0%, 1%, 8%, 2%)
Oklch
oklch(97.7% 0.024 99.1)

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

#D9DFBB

Willow Green · LightGray · Apple Green

HEX
#D9DFBB
RGB
rgb(217, 223, 187)
HSL
hsl(70, 36%, 80%)
HSB
hsb(70, 16%, 87%)
CMYK
cmyk(3%, 0%, 16%, 13%)
Oklch
oklch(89.0% 0.048 115.1)

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

#74C8AB

Jade · MediumAquaMarine · Apple Green

HEX
#74C8AB
RGB
rgb(116, 200, 171)
HSL
hsl(159, 43%, 62%)
HSB
hsb(159, 42%, 78%)
CMYK
cmyk(42%, 0%, 15%, 22%)
Oklch
oklch(77.1% 0.093 169.6)

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

#08AEAA

Mineral Blue · LightSeaGreen · Mint Ice

HEX
#08AEAA
RGB
rgb(8, 174, 170)
HSL
hsl(179, 91%, 36%)
HSB
hsb(179, 95%, 68%)
CMYK
cmyk(95%, 0%, 2%, 32%)
Oklch
oklch(67.9% 0.116 191.9)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F4E60D
0B1BF4

Analogous

F4700B
F4E60D
8FF40B

Triadic

F4E60D
0BF4E4
E40BF4

Split-Comp.

F4E60D
0B8FF4
700BF4

Tetradic

F4E60D
0BF470
0B1BF4
F40B8F

Contrast Matrix WCAG 2.1 Contrast

F4E60D
FBF8E6
D9DFBB
74C8AB
08AEAA
—
1.2
Fail
1.1
Fail
1.5
Fail
2.1
Fail
1.2
Fail
—
1.3
Fail
1.9
Fail
2.6
Fail
1.1
Fail
1.3
Fail
—
1.4
Fail
2.0
Fail
1.5
Fail
1.9
Fail
1.4
Fail
—
1.4
Fail
2.1
Fail
2.6
Fail
2.0
Fail
1.4
Fail
—
White BG
1.3Fail
1.1Fail
1.4Fail
2.0Fail
2.7Fail
Black BG
16.2AAA
19.7AAA
15.2AAA
10.6AAA
7.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

EEEE42
FAFAEA
DCDCC4
9899B2
5051AB

Deuteranopia

EFF04E
FAFAEB
DBDBC6
948DB4
463AAB

Tritanopia

F36B74
FBEEEF
D9CBCC
78B8B9
10ACAC

Achromatopsia

D1D1D1
F7F7F7
D9D9D9
ACACAC
7C7C7C

Shades & Tints Shades & Tints

#F4E60D

Dark
Light

#FBF8E6

Dark
Light

#D9DFBB

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f4e60d;
  --color-2: #fbf8e6;
  --color-3: #d9dfbb;
  --color-4: #74c8ab;
  --color-5: #08aeaa;
}

SCSS

$color-1: #f4e60d;
$color-2: #fbf8e6;
$color-3: #d9dfbb;
$color-4: #74c8ab;
$color-5: #08aeaa;

TAILWIND

colors: {
  'brand-1': '#f4e60d',
  'brand-2': '#fbf8e6',
  'brand-3': '#d9dfbb',
  'brand-4': '#74c8ab',
  'brand-5': '#08aeaa',
}

RGB Array

[244, 230, 13], [251, 248, 230], [217, 223, 187], [116, 200, 171], [8, 174, 170]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F4E60D, #FBF8E6, #D9DFBB, #74C8AB, #08AEAA 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: #f4e60d; --color-2: #fbf8e6; --color-3: #d9dfbb; --color-4: #74c8ab; --color-5: #08aeaa. 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