← Back to Editor

#FFF2F2 · #FFD5BA · #88BAB5 · #5F827F · #474B61

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#FFF2F2

Peach Pink · SeaShell · Cherry Blossom

HEX
#FFF2F2
RGB
rgb(255, 242, 242)
HSL
hsl(0, 100%, 97%)
HSB
hsb(0, 5%, 100%)
CMYK
cmyk(0%, 5%, 5%, 0%)
Oklch
oklch(97.1% 0.014 17.4)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

#FFD5BA

Apricot · Wheat · Peach Orange

HEX
#FFD5BA
RGB
rgb(255, 213, 186)
HSL
hsl(23, 100%, 86%)
HSB
hsb(23, 27%, 100%)
CMYK
cmyk(0%, 16%, 27%, 0%)
Oklch
oklch(90.2% 0.059 54.5)

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

#88BAB5

Jade · DarkSeaGreen · Lake Green

HEX
#88BAB5
RGB
rgb(136, 186, 181)
HSL
hsl(174, 27%, 63%)
HSB
hsb(174, 27%, 73%)
CMYK
cmyk(27%, 0%, 3%, 27%)
Oklch
oklch(75.2% 0.053 188.4)

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

#5F827F

Mineral Blue · SlateGray · Mint Ice

HEX
#5F827F
RGB
rgb(95, 130, 127)
HSL
hsl(175, 16%, 44%)
HSB
hsb(175, 27%, 51%)
CMYK
cmyk(27%, 0%, 2%, 49%)
Oklch
oklch(57.9% 0.040 189.5)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#474B61

Indigo · DarkSlateGray · Prussian Blue

HEX
#474B61
RGB
rgb(71, 75, 97)
HSL
hsl(231, 15%, 33%)
HSB
hsb(231, 27%, 38%)
CMYK
cmyk(27%, 23%, 0%, 62%)
Oklch
oklch(41.8% 0.037 276.6)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFF2F2
F0FFFF

Analogous

FFF0F7
FFF2F2
FFF7F0

Triadic

FFF2F2
F0FFF0
F0F0FF

Split-Comp.

FFF2F2
F0FFF7
F0F7FF

Tetradic

FFF2F2
F7FFF0
F0FFFF
F7F0FF

Contrast Matrix WCAG 2.1 Contrast

FFF2F2
FFD5BA
88BAB5
5F827F
474B61
—
1.2
Fail
2.0
Fail
3.9
AA Large
7.9
AAA
1.2
Fail
—
1.6
Fail
3.1
AA Large
6.3
AA
2.0
Fail
1.6
Fail
—
2.0
Fail
4.0
AA Large
3.9
AA Large
3.1
AA Large
2.0
Fail
—
2.0
Fail
7.9
AAA
6.3
AA
4.0
AA Large
2.0
Fail
—
White BG
1.1Fail
1.4Fail
2.2Fail
4.2AA Large
8.6AAA
Black BG
19.2AAA
15.5AAA
9.7AAA
5.0AA
2.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

F9F9F2
EDECC1
9E9EB6
6E6E80
49495C

Deuteranopia

FAFBF2
EFF2C2
9B97B7
6C6A80
49485A

Tritanopia

FEF2F2
FDC6C7
8BB7B7
618080
475757

Achromatopsia

F6F6F6
DEDEDE
AAAAAA
777777
4C4C4C

Shades & Tints Shades & Tints

#FFF2F2

Dark
Light

#FFD5BA

Dark
Light

#88BAB5

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fff2f2;
  --color-2: #ffd5ba;
  --color-3: #88bab5;
  --color-4: #5f827f;
  --color-5: #474b61;
}

SCSS

$color-1: #fff2f2;
$color-2: #ffd5ba;
$color-3: #88bab5;
$color-4: #5f827f;
$color-5: #474b61;

TAILWIND

colors: {
  'brand-1': '#fff2f2',
  'brand-2': '#ffd5ba',
  'brand-3': '#88bab5',
  'brand-4': '#5f827f',
  'brand-5': '#474b61',
}

RGB Array

[255, 242, 242], [255, 213, 186], [136, 186, 181], [95, 130, 127], [71, 75, 97]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FFF2F2, #FFD5BA, #88BAB5, #5F827F, #474B61 is ideal for: 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: #fff2f2; --color-2: #ffd5ba; --color-3: #88bab5; --color-4: #5f827f; --color-5: #474b61. 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 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