← Back to Editor

#FBF3C2 · #F5F653 · #D4D985 · #8DC9A5 · #0F3C4F

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

#FBF3C2

Fresh Green · Bisque · Lemon Cream

HEX
#FBF3C2
RGB
rgb(251, 243, 194)
HSL
hsl(52, 88%, 87%)
HSB
hsb(52, 23%, 98%)
CMYK
cmyk(0%, 3%, 23%, 2%)
Oklch
oklch(95.8% 0.064 99.8)

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

#F5F653

Fresh Green · Khaki · Sunflower

HEX
#F5F653
RGB
rgb(245, 246, 83)
HSL
hsl(60, 90%, 65%)
HSB
hsb(60, 66%, 96%)
CMYK
cmyk(0%, 0%, 66%, 4%)
Oklch
oklch(94.4% 0.178 109.7)

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

#D4D985

Fresh Green · Khaki · Sunflower

HEX
#D4D985
RGB
rgb(212, 217, 133)
HSL
hsl(64, 53%, 69%)
HSB
hsb(64, 39%, 85%)
CMYK
cmyk(2%, 0%, 39%, 15%)
Oklch
oklch(86.3% 0.107 111.4)

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

#8DC9A5

Celadon · DarkSeaGreen · Apple Green

HEX
#8DC9A5
RGB
rgb(141, 201, 165)
HSL
hsl(144, 36%, 67%)
HSB
hsb(144, 30%, 79%)
CMYK
cmyk(30%, 0%, 18%, 21%)
Oklch
oklch(78.5% 0.080 157.6)

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

#0F3C4F

Lake Blue · DarkSlateGray · Peacock Green

HEX
#0F3C4F
RGB
rgb(15, 60, 79)
HSL
hsl(198, 68%, 18%)
HSB
hsb(198, 81%, 31%)
CMYK
cmyk(81%, 24%, 0%, 69%)
Oklch
oklch(33.6% 0.058 230.5)

Traditional「Lake Blue」· Paint「Peacock Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FBF3C2
C1C8FB

Analogous

FBD6C1
FBF3C2
E6FBC1

Triadic

FBF3C2
C1FBF3
F3C1FB

Split-Comp.

FBF3C2
C1E6FB
D6C1FB

Tetradic

FBF3C2
C1FBD6
C1C8FB
FBC1E6

Contrast Matrix WCAG 2.1 Contrast

FBF3C2
F5F653
D4D985
8DC9A5
0F3C4F
—
1.0
Fail
1.3
Fail
1.7
Fail
10.5
AAA
1.0
Fail
—
1.3
Fail
1.6
Fail
10.2
AAA
1.3
Fail
1.3
Fail
—
1.3
Fail
7.9
AAA
1.7
Fail
1.6
Fail
1.3
Fail
—
6.2
AA
10.5
AAA
10.2
AAA
7.9
AAA
6.2
AA
—
White BG
1.1Fail
1.2Fail
1.5Fail
1.9Fail
11.8AAA
Black BG
18.7AAA
18.2AAA
14.1AAA
11.0AAA
1.8Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

F8F7CE
F5F57A
D6D699
A7A8AE
22234A

Deuteranopia

F8F9D1
F5F584
D6D59E
A49FB0
201D49

Tritanopia

FBD7D9
F59AA0
D4A9AD
90B5B6
114746

Achromatopsia

F0F0F0
E3E3E3
CECECE
B3B3B3
313131

Shades & Tints Shades & Tints

#FBF3C2

Dark
Light

#F5F653

Dark
Light

#D4D985

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fbf3c2;
  --color-2: #f5f653;
  --color-3: #d4d985;
  --color-4: #8dc9a5;
  --color-5: #0f3c4f;
}

SCSS

$color-1: #fbf3c2;
$color-2: #f5f653;
$color-3: #d4d985;
$color-4: #8dc9a5;
$color-5: #0f3c4f;

TAILWIND

colors: {
  'brand-1': '#fbf3c2',
  'brand-2': '#f5f653',
  'brand-3': '#d4d985',
  'brand-4': '#8dc9a5',
  'brand-5': '#0f3c4f',
}

RGB Array

[251, 243, 194], [245, 246, 83], [212, 217, 133], [141, 201, 165], [15, 60, 79]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FBF3C2, #F5F653, #D4D985, #8DC9A5, #0F3C4F 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: #fbf3c2; --color-2: #f5f653; --color-3: #d4d985; --color-4: #8dc9a5; --color-5: #0f3c4f. 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