← Back to Editor

#FBF4EE · #F1E3DA · #F1D1C6 · #5699B3 · #567089

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

#FBF4EE

Apricot · SeaShell · Peach Orange

HEX
#FBF4EE
RGB
rgb(251, 244, 238)
HSL
hsl(28, 62%, 96%)
HSB
hsb(28, 5%, 98%)
CMYK
cmyk(0%, 3%, 5%, 2%)
Oklch
oklch(97.1% 0.011 63.4)

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

#F1E3DA

Apricot · Beige · Peach Orange

HEX
#F1E3DA
RGB
rgb(241, 227, 218)
HSL
hsl(23, 45%, 90%)
HSB
hsb(23, 10%, 95%)
CMYK
cmyk(0%, 6%, 10%, 5%)
Oklch
oklch(92.5% 0.020 55.1)

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

#F1D1C6

Apricot · Pink · Peach Orange

HEX
#F1D1C6
RGB
rgb(241, 209, 198)
HSL
hsl(15, 61%, 86%)
HSB
hsb(15, 18%, 95%)
CMYK
cmyk(0%, 13%, 18%, 5%)
Oklch
oklch(88.5% 0.039 39.9)

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

#5699B3

Slate Blue · CadetBlue · Lake Green

HEX
#5699B3
RGB
rgb(86, 153, 179)
HSL
hsl(197, 38%, 52%)
HSB
hsb(197, 52%, 70%)
CMYK
cmyk(52%, 15%, 0%, 30%)
Oklch
oklch(64.9% 0.078 225.3)

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

#567089

Slate Blue · SlateGray · Navy Blue

HEX
#567089
RGB
rgb(86, 112, 137)
HSL
hsl(209, 23%, 44%)
HSB
hsb(209, 37%, 54%)
CMYK
cmyk(37%, 18%, 0%, 46%)
Oklch
oklch(53.4% 0.050 247.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FBF4EE
EEF5FB

Analogous

FBEEEF
FBF4EE
FBFBEE

Triadic

FBF4EE
EEFBF4
F4EEFB

Split-Comp.

FBF4EE
EEFBFB
EEEFFB

Tetradic

FBF4EE
EFFBEE
EEF5FB
FBEEFB

Contrast Matrix WCAG 2.1 Contrast

FBF4EE
F1E3DA
F1D1C6
5699B3
567089
—
1.2
Fail
1.3
Fail
2.9
Fail
4.7
AA
1.2
Fail
—
1.1
Fail
2.5
Fail
4.1
AA Large
1.3
Fail
1.1
Fail
—
2.2
Fail
3.6
AA Large
2.9
Fail
2.5
Fail
2.2
Fail
—
1.6
Fail
4.7
AA
4.1
AA Large
3.6
AA Large
1.6
Fail
—
White BG
1.1Fail
1.3Fail
1.4Fail
3.2AA Large
5.2AA
Black BG
19.3AAA
16.7AAA
14.7AAA
6.6AA
4.1AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

F8F8EF
EBEBDC
E3E3C9
7374AD
616183

Deuteranopia

F8F9F0
ECEDDD
E5E7C9
6F6AAB
605E82

Tritanopia

FBF1F1
F0DEDE
EFCBCB
59A8A7
577E7D

Achromatopsia

F5F5F5
E6E6E6
D9D9D9
888888
6B6B6B

Shades & Tints Shades & Tints

#FBF4EE

Dark
Light

#F1E3DA

Dark
Light

#F1D1C6

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fbf4ee;
  --color-2: #f1e3da;
  --color-3: #f1d1c6;
  --color-4: #5699b3;
  --color-5: #567089;
}

SCSS

$color-1: #fbf4ee;
$color-2: #f1e3da;
$color-3: #f1d1c6;
$color-4: #5699b3;
$color-5: #567089;

TAILWIND

colors: {
  'brand-1': '#fbf4ee',
  'brand-2': '#f1e3da',
  'brand-3': '#f1d1c6',
  'brand-4': '#5699b3',
  'brand-5': '#567089',
}

RGB Array

[251, 244, 238], [241, 227, 218], [241, 209, 198], [86, 153, 179], [86, 112, 137]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FBF4EE, #F1E3DA, #F1D1C6, #5699B3, #567089 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: #fbf4ee; --color-2: #f1e3da; --color-3: #f1d1c6; --color-4: #5699b3; --color-5: #567089. 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