← Back to Editor

#BDC9C7 · #FDF4F4 · #F0CCCC · #FFADAD · #586174

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

#BDC9C7

Jade · Silver · Glacier Blue

HEX
#BDC9C7
RGB
rgb(189, 201, 199)
HSL
hsl(170, 10%, 76%)
HSB
hsb(170, 6%, 79%)
CMYK
cmyk(6%, 0%, 1%, 21%)
Oklch
oklch(82.6% 0.013 185.0)

Traditional「Jade」· Paint「Glacier Blue」· Creative Arctic Pool

#FDF4F4

Peach Pink · SeaShell · Cherry Blossom

HEX
#FDF4F4
RGB
rgb(253, 244, 244)
HSL
hsl(0, 69%, 97%)
HSB
hsb(0, 4%, 99%)
CMYK
cmyk(0%, 4%, 4%, 1%)
Oklch
oklch(97.4% 0.010 17.3)

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

#F0CCCC

Peach Pink · Pink · Cherry Blossom

HEX
#F0CCCC
RGB
rgb(240, 204, 204)
HSL
hsl(0, 55%, 87%)
HSB
hsb(0, 15%, 94%)
CMYK
cmyk(0%, 15%, 15%, 6%)
Oklch
oklch(87.6% 0.041 18.0)

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

#FFADAD

Peach Pink · LightPink · Cherry Blossom

HEX
#FFADAD
RGB
rgb(255, 173, 173)
HSL
hsl(0, 100%, 84%)
HSB
hsb(0, 32%, 100%)
CMYK
cmyk(0%, 32%, 32%, 0%)
Oklch
oklch(82.7% 0.097 19.3)

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

#586174

Indigo · DimGray · Prussian Blue

HEX
#586174
RGB
rgb(88, 97, 116)
HSL
hsl(221, 14%, 40%)
HSB
hsb(221, 24%, 45%)
CMYK
cmyk(24%, 16%, 0%, 55%)
Oklch
oklch(49.2% 0.032 265.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BDC9C7
C8BCBE

Analogous

BCC8C0
BDC9C7
BCC4C8

Triadic

BDC9C7
C6BCC8
C8C6BC

Split-Comp.

BDC9C7
C8BCC4
C8C0BC

Tetradic

BDC9C7
C0BCC8
C8BCBE
C4C8BC

Contrast Matrix WCAG 2.1 Contrast

BDC9C7
FDF4F4
F0CCCC
FFADAD
586174
—
1.6
Fail
1.2
Fail
1.0
Fail
3.7
AA Large
1.6
Fail
—
1.4
Fail
1.6
Fail
5.8
AA
1.2
Fail
1.4
Fail
—
1.2
Fail
4.2
AA Large
1.0
Fail
1.6
Fail
1.2
Fail
—
3.5
AA Large
3.7
AA Large
5.8
AA
4.2
AA Large
3.5
AA Large
—
White BG
1.7Fail
1.1Fail
1.5Fail
1.8Fail
6.2AA
Black BG
12.3AAA
19.4AAA
14.2AAA
11.8AAA
3.4AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

C2C2C7
F9F9F4
E0E0CC
DBDBAD
5C5C6F

Deuteranopia

C2C1C8
FAFAF4
E3E5CC
E0E6AD
5B5B6E

Tritanopia

BEC8C8
FDF4F4
EECCCC
FBADAD
586C6B

Achromatopsia

C5C5C5
F7F7F7
D7D7D7
C6C6C6
606060

Shades & Tints Shades & Tints

#BDC9C7

Dark
Light

#FDF4F4

Dark
Light

#F0CCCC

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bdc9c7;
  --color-2: #fdf4f4;
  --color-3: #f0cccc;
  --color-4: #ffadad;
  --color-5: #586174;
}

SCSS

$color-1: #bdc9c7;
$color-2: #fdf4f4;
$color-3: #f0cccc;
$color-4: #ffadad;
$color-5: #586174;

TAILWIND

colors: {
  'brand-1': '#bdc9c7',
  'brand-2': '#fdf4f4',
  'brand-3': '#f0cccc',
  'brand-4': '#ffadad',
  'brand-5': '#586174',
}

RGB Array

[189, 201, 199], [253, 244, 244], [240, 204, 204], [255, 173, 173], [88, 97, 116]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #BDC9C7, #FDF4F4, #F0CCCC, #FFADAD, #586174 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: #bdc9c7; --color-2: #fdf4f4; --color-3: #f0cccc; --color-4: #ffadad; --color-5: #586174. 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