← Back to Editor

#FAFFBF · #F0F7A2 · #B2C986 · #688C68 · #05334A

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 AppData Visualization

Color Details Color Details

#FAFFBF

Fresh Green · Bisque · Lemon Cream

HEX
#FAFFBF
RGB
rgb(250, 255, 191)
HSL
hsl(65, 100%, 87%)
HSB
hsb(65, 25%, 100%)
CMYK
cmyk(2%, 0%, 25%, 0%)
Oklch
oklch(98.1% 0.082 111.5)

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

#F0F7A2

Fresh Green · Khaki · Lemon Cream

HEX
#F0F7A2
RGB
rgb(240, 247, 162)
HSL
hsl(65, 84%, 80%)
HSB
hsb(65, 34%, 97%)
CMYK
cmyk(3%, 0%, 34%, 3%)
Oklch
oklch(95.2% 0.107 112.3)

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

#B2C986

Willow Green · DarkSeaGreen · Apple Green

HEX
#B2C986
RGB
rgb(178, 201, 134)
HSL
hsl(81, 38%, 66%)
HSB
hsb(81, 33%, 79%)
CMYK
cmyk(11%, 0%, 33%, 21%)
Oklch
oklch(80.2% 0.093 123.9)

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

#688C68

Celadon · DimGray · Olive Green

HEX
#688C68
RGB
rgb(104, 140, 104)
HSL
hsl(120, 15%, 48%)
HSB
hsb(120, 26%, 55%)
CMYK
cmyk(26%, 0%, 26%, 45%)
Oklch
oklch(60.3% 0.067 144.7)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

#05334A

Lake Blue · MidnightBlue · Deep Sea Blue

HEX
#05334A
RGB
rgb(5, 51, 74)
HSL
hsl(200, 87%, 15%)
HSB
hsb(200, 93%, 29%)
CMYK
cmyk(93%, 31%, 0%, 71%)
Oklch
oklch(30.5% 0.062 236.7)

Traditional「Lake Blue」· Paint「Deep Sea Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FAFFBF
C2BDFF

Analogous

FFE3BD
FAFFBF
D8FFBD

Triadic

FAFFBF
BDF9FF
FFBDF9

Split-Comp.

FAFFBF
BDD8FF
E3BDFF

Tetradic

FAFFBF
BDFFE3
C2BDFF
FFBDD8

Contrast Matrix WCAG 2.1 Contrast

FAFFBF
F0F7A2
B2C986
688C68
05334A
—
1.1
Fail
1.7
Fail
3.6
AA Large
12.7
AAA
1.1
Fail
—
1.6
Fail
3.3
AA Large
11.7
AAA
1.7
Fail
1.6
Fail
—
2.1
Fail
7.3
AAA
3.6
AA Large
3.3
AA Large
2.1
Fail
—
3.5
AA Large
12.7
AAA
11.7
AAA
7.3
AAA
3.5
AA Large
—
White BG
1.0Fail
1.1Fail
1.8Fail
3.8AA Large
13.3AAA
Black BG
20.1AAA
18.5AAA
11.6AAA
5.5AA
1.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

FCFCCE
F3F3B7
BCBC96
787871
191944

Deuteranopia

FCFCD2
F3F2BC
BBB99A
767373
161343

Tritanopia

FADBDD
F0C7CA
B3A3A6
6A7879
07403F

Achromatopsia

F6F6F6
EBEBEB
BABABA
7D7D7D
282828

Shades & Tints Shades & Tints

#FAFFBF

Dark
Light

#F0F7A2

Dark
Light

#B2C986

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #faffbf;
  --color-2: #f0f7a2;
  --color-3: #b2c986;
  --color-4: #688c68;
  --color-5: #05334a;
}

SCSS

$color-1: #faffbf;
$color-2: #f0f7a2;
$color-3: #b2c986;
$color-4: #688c68;
$color-5: #05334a;

TAILWIND

colors: {
  'brand-1': '#faffbf',
  'brand-2': '#f0f7a2',
  'brand-3': '#b2c986',
  'brand-4': '#688c68',
  'brand-5': '#05334a',
}

RGB Array

[250, 255, 191], [240, 247, 162], [178, 201, 134], [104, 140, 104], [5, 51, 74]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FAFFBF, #F0F7A2, #B2C986, #688C68, #05334A 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: #faffbf; --color-2: #f0f7a2; --color-3: #b2c986; --color-4: #688c68; --color-5: #05334a. 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