← Back to Editor

#F4FFD5 · #96E5C6 · #57BC90 · #296F57 · #164636

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

#F4FFD5

Willow Green · Beige · Mint Green

HEX
#F4FFD5
RGB
rgb(244, 255, 213)
HSL
hsl(76, 100%, 92%)
HSB
hsb(76, 16%, 100%)
CMYK
cmyk(4%, 0%, 16%, 0%)
Oklch
oklch(98.1% 0.056 119.4)

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

#96E5C6

Jade · LightBlue · Apple Green

HEX
#96E5C6
RGB
rgb(150, 229, 198)
HSL
hsl(156, 60%, 74%)
HSB
hsb(156, 34%, 90%)
CMYK
cmyk(34%, 0%, 14%, 10%)
Oklch
oklch(86.2% 0.090 167.6)

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

#57BC90

Mineral Blue · MediumAquaMarine · Olive Green

HEX
#57BC90
RGB
rgb(87, 188, 144)
HSL
hsl(154, 43%, 54%)
HSB
hsb(154, 54%, 74%)
CMYK
cmyk(54%, 0%, 23%, 26%)
Oklch
oklch(72.3% 0.116 162.7)

Traditional「Mineral Blue」· Paint「Olive Green」· Creative Blush Sunrise

#296F57

Mineral Blue · SeaGreen · Forest Green

HEX
#296F57
RGB
rgb(41, 111, 87)
HSL
hsl(159, 46%, 30%)
HSB
hsb(159, 63%, 44%)
CMYK
cmyk(63%, 0%, 22%, 56%)
Oklch
oklch(49.0% 0.080 167.2)

Traditional「Mineral Blue」· Paint「Forest Green」· Creative Blush Sunrise

#164636

Mineral Blue · DarkSlateGray · Peacock Green

HEX
#164636
RGB
rgb(22, 70, 54)
HSL
hsl(160, 52%, 18%)
HSB
hsb(160, 69%, 27%)
CMYK
cmyk(69%, 0%, 23%, 73%)
Oklch
oklch(35.6% 0.059 167.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F4FFD5
E1D6FF

Analogous

FFF5D6
F4FFD5
E0FFD6

Triadic

F4FFD5
D6F4FF
FFD6F4

Split-Comp.

F4FFD5
D6E0FF
F5D6FF

Tetradic

F4FFD5
D6FFF5
E1D6FF
FFD6E0

Contrast Matrix WCAG 2.1 Contrast

F4FFD5
96E5C6
57BC90
296F57
164636
—
1.4
Fail
2.2
Fail
5.7
AA
10.2
AAA
1.4
Fail
—
1.6
Fail
4.1
AA Large
7.3
AAA
2.2
Fail
1.6
Fail
—
2.6
Fail
4.6
AA
5.7
AA
4.1
AA Large
2.6
Fail
—
1.8
Fail
10.2
AAA
7.3
AAA
4.6
AA
1.8
Fail
—
White BG
1.0Fail
1.5Fail
2.3Fail
6.0AA
10.7AAA
Black BG
20.1AAA
14.3AAA
9.0AAA
3.5AA Large
2.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

F9F9DF
B8B9CE
83849B
47485D
2B2B3A

Deuteranopia

F8F7E2
B4AECF
7D759D
433E5E
28243B

Tritanopia

F5E7E9
9AD3D5
5CA3A5
2D6162
183D3E

Achromatopsia

F7F7F7
CACACA
999999
575757
363636

Shades & Tints Shades & Tints

#F4FFD5

Dark
Light

#96E5C6

Dark
Light

#57BC90

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f4ffd5;
  --color-2: #96e5c6;
  --color-3: #57bc90;
  --color-4: #296f57;
  --color-5: #164636;
}

SCSS

$color-1: #f4ffd5;
$color-2: #96e5c6;
$color-3: #57bc90;
$color-4: #296f57;
$color-5: #164636;

TAILWIND

colors: {
  'brand-1': '#f4ffd5',
  'brand-2': '#96e5c6',
  'brand-3': '#57bc90',
  'brand-4': '#296f57',
  'brand-5': '#164636',
}

RGB Array

[244, 255, 213], [150, 229, 198], [87, 188, 144], [41, 111, 87], [22, 70, 54]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F4FFD5, #96E5C6, #57BC90, #296F57, #164636 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: #f4ffd5; --color-2: #96e5c6; --color-3: #57bc90; --color-4: #296f57; --color-5: #164636. 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