← Back to Editor

#FBFBFD · #DADADC · #D5C4B0 · #6A7275 · #6B5F51

cool

A 5-color cool 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

#FBFBFD

Wisteria · Snow · Sky Blue

HEX
#FBFBFD
RGB
rgb(251, 251, 253)
HSL
hsl(240, 33%, 99%)
HSB
hsb(240, 1%, 99%)
CMYK
cmyk(1%, 1%, 0%, 1%)
Oklch
oklch(98.9% 0.003 286.4)

Traditional「Wisteria」· Paint「Sky Blue」· Creative Lavender Dream

#DADADC

Plain White · LightGray · Cloud White

HEX
#DADADC
RGB
rgb(218, 218, 220)
HSL
hsl(240, 3%, 86%)
HSB
hsb(240, 1%, 86%)
CMYK
cmyk(1%, 1%, 0%, 14%)
Oklch
oklch(88.9% 0.003 286.3)

Traditional「Plain White」· Paint「Cloud White」· Creative Silver Lining

#D5C4B0

Goose Yellow · Silver · Peach Orange

HEX
#D5C4B0
RGB
rgb(213, 196, 176)
HSL
hsl(32, 31%, 76%)
HSB
hsb(32, 17%, 84%)
CMYK
cmyk(0%, 8%, 17%, 16%)
Oklch
oklch(82.9% 0.033 71.8)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#6A7275

Ink Gray · DimGray · Warm Gray

HEX
#6A7275
RGB
rgb(106, 114, 117)
HSL
hsl(196, 5%, 44%)
HSB
hsb(196, 9%, 46%)
CMYK
cmyk(9%, 3%, 0%, 54%)
Oklch
oklch(54.6% 0.011 222.2)

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

#6B5F51

Ochre · DimGray · Amber Brown

HEX
#6B5F51
RGB
rgb(107, 95, 81)
HSL
hsl(32, 14%, 37%)
HSB
hsb(32, 24%, 42%)
CMYK
cmyk(0%, 11%, 24%, 58%)
Oklch
oklch(49.3% 0.027 71.4)

Traditional「Ochre」· Paint「Amber Brown」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FBFBFD
FDFDFC

Analogous

FCFCFD
FBFBFD
FCFCFD

Triadic

FBFBFD
FDFCFC
FCFDFC

Split-Comp.

FBFBFD
FDFCFC
FCFDFC

Tetradic

FBFBFD
FDFCFC
FDFDFC
FCFDFC

Contrast Matrix WCAG 2.1 Contrast

FBFBFD
DADADC
D5C4B0
6A7275
6B5F51
—
1.4
Fail
1.6
Fail
4.8
AA
6.0
AA
1.4
Fail
—
1.2
Fail
3.5
AA Large
4.4
AA Large
1.6
Fail
1.2
Fail
—
2.9
Fail
3.7
AA Large
4.8
AA
3.5
AA Large
2.9
Fail
—
1.3
Fail
6.0
AA
4.4
AA Large
3.7
AA Large
1.3
Fail
—
White BG
1.0Fail
1.4Fail
1.7Fail
4.9AA
6.2AA
Black BG
20.3AAA
15.0AAA
12.4AAA
4.3AA Large
3.4AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

FBFBFD
DADADC
CECDB5
6D6E74
666654

Deuteranopia

FBFBFC
DADADB
CFD0B6
6D6C74
676755

Tritanopia

FBFCFC
DADBDB
D4B9BA
6A7474
6A5758

Achromatopsia

FBFBFB
DADADA
C7C7C7
707070
616161

Shades & Tints Shades & Tints

#FBFBFD

Dark
Light

#DADADC

Dark
Light

#D5C4B0

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fbfbfd;
  --color-2: #dadadc;
  --color-3: #d5c4b0;
  --color-4: #6a7275;
  --color-5: #6b5f51;
}

SCSS

$color-1: #fbfbfd;
$color-2: #dadadc;
$color-3: #d5c4b0;
$color-4: #6a7275;
$color-5: #6b5f51;

TAILWIND

colors: {
  'brand-1': '#fbfbfd',
  'brand-2': '#dadadc',
  'brand-3': '#d5c4b0',
  'brand-4': '#6a7275',
  'brand-5': '#6b5f51',
}

RGB Array

[251, 251, 253], [218, 218, 220], [213, 196, 176], [106, 114, 117], [107, 95, 81]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #FBFBFD, #DADADC, #D5C4B0, #6A7275, #6B5F51 is ideal for: brand design, premium product pages, magazine layouts, health products, baby brands, fresh-style blogs, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #fbfbfd; --color-2: #dadadc; --color-3: #d5c4b0; --color-4: #6a7275; --color-5: #6b5f51. 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 cool-style 5-color scheme is especially suited for beauty, lifestyle, arts industries. Restrained colors convey professionalism and trust. 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