← Back to Editor

#FDF4F0 · #B5D9B9 · #79BAA0 · #59B390 · #78898A

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#FDF4F0

Apricot · SeaShell · Peach Orange

HEX
#FDF4F0
RGB
rgb(253, 244, 240)
HSL
hsl(18, 76%, 97%)
HSB
hsb(18, 5%, 99%)
CMYK
cmyk(0%, 4%, 5%, 1%)
Oklch
oklch(97.3% 0.011 45.7)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#B5D9B9

Celadon · Silver · Apple Green

HEX
#B5D9B9
RGB
rgb(181, 217, 185)
HSL
hsl(127, 32%, 78%)
HSB
hsb(127, 17%, 85%)
CMYK
cmyk(17%, 0%, 15%, 15%)
Oklch
oklch(85.1% 0.058 148.1)

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

#79BAA0

Mineral Blue · DarkSeaGreen · Olive Green

HEX
#79BAA0
RGB
rgb(121, 186, 160)
HSL
hsl(156, 32%, 60%)
HSB
hsb(156, 35%, 73%)
CMYK
cmyk(35%, 0%, 14%, 27%)
Oklch
oklch(73.8% 0.077 167.1)

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

#59B390

Mineral Blue · CadetBlue · Olive Green

HEX
#59B390
RGB
rgb(89, 179, 144)
HSL
hsl(157, 37%, 53%)
HSB
hsb(157, 50%, 70%)
CMYK
cmyk(50%, 0%, 20%, 30%)
Oklch
oklch(70.1% 0.102 165.9)

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

#78898A

Ash · SlateGray · Warm Gray

HEX
#78898A
RGB
rgb(120, 137, 138)
HSL
hsl(183, 7%, 51%)
HSB
hsb(183, 13%, 54%)
CMYK
cmyk(13%, 1%, 0%, 46%)
Oklch
oklch(61.7% 0.020 201.0)

Traditional「Ash」· Paint「Warm Gray」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FDF4F0
F2FAFD

Analogous

FDF2F4
FDF4F0
FDFBF2

Triadic

FDF4F0
F2FDF5
F5F2FD

Split-Comp.

FDF4F0
F2FDFB
F2F4FD

Tetradic

FDF4F0
F4FDF2
F2FAFD
FBF2FD

Contrast Matrix WCAG 2.1 Contrast

FDF4F0
B5D9B9
79BAA0
59B390
78898A
—
1.4
Fail
2.1
Fail
2.3
Fail
3.4
AA Large
1.4
Fail
—
1.5
Fail
1.6
Fail
2.4
Fail
2.1
Fail
1.5
Fail
—
1.1
Fail
1.6
Fail
2.3
Fail
1.6
Fail
1.1
Fail
—
1.4
Fail
3.4
AA Large
2.4
Fail
1.6
Fail
1.4
Fail
—
White BG
1.1Fail
1.5Fail
2.2Fail
2.5Fail
3.7AA Large
Black BG
19.4AAA
13.6AAA
9.3AAA
8.3AAA
5.7AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F9F9F1
C5C5C1
9596A6
808198
7F808A

Deuteranopia

FAFAF1
C3C0C3
918DA8
7B749B
7E7D8A

Tritanopia

FDF2F2
B7C7C8
7CABAC
5E9FA1
798A8A

Achromatopsia

F6F6F6
CBCBCB
A4A4A4
949494
848484

Shades & Tints Shades & Tints

#FDF4F0

Dark
Light

#B5D9B9

Dark
Light

#79BAA0

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fdf4f0;
  --color-2: #b5d9b9;
  --color-3: #79baa0;
  --color-4: #59b390;
  --color-5: #78898a;
}

SCSS

$color-1: #fdf4f0;
$color-2: #b5d9b9;
$color-3: #79baa0;
$color-4: #59b390;
$color-5: #78898a;

TAILWIND

colors: {
  'brand-1': '#fdf4f0',
  'brand-2': '#b5d9b9',
  'brand-3': '#79baa0',
  'brand-4': '#59b390',
  'brand-5': '#78898a',
}

RGB Array

[253, 244, 240], [181, 217, 185], [121, 186, 160], [89, 179, 144], [120, 137, 138]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FDF4F0, #B5D9B9, #79BAA0, #59B390, #78898A is ideal for: health products, baby brands, fresh-style blogs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #fdf4f0; --color-2: #b5d9b9; --color-3: #79baa0; --color-4: #59b390; --color-5: #78898a. 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 tech, SaaS, healthcare, eco industries. 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