← Back to Editor

#FFF4CC · #D6F4CB · #ACF3C9 · #56C1CF · #008FD4

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

#FFF4CC

Goose Yellow · Bisque · Lemon Cream

HEX
#FFF4CC
RGB
rgb(255, 244, 204)
HSL
hsl(47, 100%, 90%)
HSB
hsb(47, 20%, 100%)
CMYK
cmyk(0%, 4%, 20%, 0%)
Oklch
oklch(96.6% 0.053 94.4)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#D6F4CB

Emerald · LightGray · Mint Green

HEX
#D6F4CB
RGB
rgb(214, 244, 203)
HSL
hsl(104, 65%, 88%)
HSB
hsb(104, 17%, 96%)
CMYK
cmyk(12%, 0%, 17%, 4%)
Oklch
oklch(93.5% 0.063 137.3)

Traditional「Emerald」· Paint「Mint Green」· Creative Mint Breeze

#ACF3C9

Emerald · LightBlue · Mint Green

HEX
#ACF3C9
RGB
rgb(172, 243, 201)
HSL
hsl(145, 75%, 81%)
HSB
hsb(145, 29%, 95%)
CMYK
cmyk(29%, 0%, 17%, 5%)
Oklch
oklch(90.6% 0.091 158.0)

Traditional「Emerald」· Paint「Mint Green」· Creative Mint Breeze

#56C1CF

Lake Blue · MediumTurquoise · Lake Green

HEX
#56C1CF
RGB
rgb(86, 193, 207)
HSL
hsl(187, 56%, 57%)
HSB
hsb(187, 58%, 81%)
CMYK
cmyk(58%, 7%, 0%, 19%)
Oklch
oklch(75.4% 0.099 207.0)

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

#008FD4

Lake Blue · DodgerBlue · Navy Blue

HEX
#008FD4
RGB
rgb(0, 143, 212)
HSL
hsl(200, 100%, 42%)
HSB
hsb(200, 100%, 83%)
CMYK
cmyk(100%, 33%, 0%, 17%)
Oklch
oklch(62.1% 0.144 240.7)

Traditional「Lake Blue」· Paint「Navy Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFF4CC
CCD7FF

Analogous

FFDACC
FFF4CC
F1FFCC

Triadic

FFF4CC
CCFFF4
F4CCFF

Split-Comp.

FFF4CC
CCF1FF
DACCFF

Tetradic

FFF4CC
CCFFDA
CCD7FF
FFCCF1

Contrast Matrix WCAG 2.1 Contrast

FFF4CC
D6F4CB
ACF3C9
56C1CF
008FD4
—
1.1
Fail
1.2
Fail
1.9
Fail
3.2
AA Large
1.1
Fail
—
1.1
Fail
1.8
Fail
3.0
AA Large
1.2
Fail
1.1
Fail
—
1.7
Fail
2.8
Fail
1.9
Fail
1.8
Fail
1.7
Fail
—
1.7
Fail
3.2
AA Large
3.0
AA Large
2.8
Fail
1.7
Fail
—
White BG
1.1Fail
1.2Fail
1.3Fail
2.1Fail
3.6AA Large
Black BG
19.1AAA
17.7AAA
16.4AAA
9.9AAA
5.9AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

FAFAD6
E3E3D5
CBCBD3
8485CC
3E3FC3

Deuteranopia

FBFCD8
E1DFD7
C7C1D6
7E76CB
362BBF

Tritanopia

FEDDDF
D7DDDE
B0DBDD
5BC9C8
07B6B3

Achromatopsia

F3F3F3
E6E6E6
D9D9D9
A3A3A3
6C6C6C

Shades & Tints Shades & Tints

#FFF4CC

Dark
Light

#D6F4CB

Dark
Light

#ACF3C9

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fff4cc;
  --color-2: #d6f4cb;
  --color-3: #acf3c9;
  --color-4: #56c1cf;
  --color-5: #008fd4;
}

SCSS

$color-1: #fff4cc;
$color-2: #d6f4cb;
$color-3: #acf3c9;
$color-4: #56c1cf;
$color-5: #008fd4;

TAILWIND

colors: {
  'brand-1': '#fff4cc',
  'brand-2': '#d6f4cb',
  'brand-3': '#acf3c9',
  'brand-4': '#56c1cf',
  'brand-5': '#008fd4',
}

RGB Array

[255, 244, 204], [214, 244, 203], [172, 243, 201], [86, 193, 207], [0, 143, 212]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FFF4CC, #D6F4CB, #ACF3C9, #56C1CF, #008FD4 is ideal for: social media posters, mobile apps, e-commerce promos, health products, baby brands, fresh-style blogs, 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: #fff4cc; --color-2: #d6f4cb; --color-3: #acf3c9; --color-4: #56c1cf; --color-5: #008fd4. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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