#64B3C4 + #ADB4C9 + #DEC1D0 + #F2DADE + #FAF1F0 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#64B3C4

Slate Blue · MediumAquaMarine · Lake Green

HEX

#64B3C4

RGB

rgb(100, 179, 196)

HSL

hsl(191, 45%, 58%)

HSB

hsb(191, 49%, 77%)

CMYK

cmyk(49%, 9%, 0%, 23%)

Oklch

oklch(72.3% 0.081 213.2)

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

#ADB4C9

Azure · Silver · Cobalt Blue

HEX

#ADB4C9

RGB

rgb(173, 180, 201)

HSL

hsl(225, 21%, 73%)

HSB

hsb(225, 14%, 79%)

CMYK

cmyk(14%, 10%, 0%, 21%)

Oklch

oklch(77.1% 0.031 271.0)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

#DEC1D0

Mauve · LightGray · Cherry Blossom

HEX

#DEC1D0

RGB

rgb(222, 193, 208)

HSL

hsl(329, 31%, 81%)

HSB

hsb(329, 13%, 87%)

CMYK

cmyk(0%, 13%, 6%, 13%)

Oklch

oklch(84.0% 0.038 345.4)

Traditional「Mauve」· Paint「Cherry Blossom」· Creative Rose Petal

#F2DADE

Peach Pink · Linen · Cherry Blossom

HEX

#F2DADE

RGB

rgb(242, 218, 222)

HSL

hsl(350, 48%, 90%)

HSB

hsb(350, 10%, 95%)

CMYK

cmyk(0%, 10%, 8%, 5%)

Oklch

oklch(90.9% 0.027 6.2)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Rose Petal

#FAF1F0

Peach Pink · SeaShell · Cherry Blossom

HEX

#FAF1F0

RGB

rgb(250, 241, 240)

HSL

hsl(6, 50%, 96%)

HSB

hsb(6, 4%, 98%)

CMYK

cmyk(0%, 4%, 4%, 2%)

Oklch

oklch(96.5% 0.010 25.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

64B3C4

C47564

Analogous

64C4A6

64B3C4

6482C4

Triadic

64B3C4

C464B2

B2C464

Split-Comp.

64B3C4

C46482

C4A664

Tetradic

64B3C4

A664C4

C47564

82C464

Contrast Matrix WCAG 2.1 Contrast

64B3C4	ADB4C9	DEC1D0	F2DADE	FAF1F0
—	1.2 Fail	1.4 Fail	1.8 Fail	2.2 Fail
1.2 Fail	—	1.2 Fail	1.6 Fail	1.9 Fail
1.4 Fail	1.2 Fail	—	1.3 Fail	1.5 Fail
1.8 Fail	1.6 Fail	1.3 Fail	—	1.2 Fail
2.2 Fail	1.9 Fail	1.5 Fail	1.2 Fail	—

White BG

2.4Fail

2.1Fail

1.7Fail

1.3Fail

1.1Fail

Black BG

8.8AAA

10.1AAA

12.6AAA

15.9AAA

18.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8687C0

B0B0C4

D1D1CC

E8E7DD

F6F6F0

Deuteranopia

827CBF

B0AFC3

D3D5CC

E9EBDD

F7F7F0

Tritanopia

68BDBC

ADC0BF

DDCAC9

F1DCDC

FAF0F0

Achromatopsia

9D9D9D

B4B4B4

CBCBCB

E2E2E2

F4F4F4

Shades & Tints Shades & Tints

#64B3C4

Dark

Light

#ADB4C9

Dark

Light

#DEC1D0

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #64b3c4;
  --color-2: #adb4c9;
  --color-3: #dec1d0;
  --color-4: #f2dade;
  --color-5: #faf1f0;
}

SCSS

$color-1: #64b3c4;
$color-2: #adb4c9;
$color-3: #dec1d0;
$color-4: #f2dade;
$color-5: #faf1f0;

TAILWIND

colors: {
  'brand-1': '#64b3c4',
  'brand-2': '#adb4c9',
  'brand-3': '#dec1d0',
  'brand-4': '#f2dade',
  'brand-5': '#faf1f0',
}

RGB Array

[100, 179, 196], [173, 180, 201], [222, 193, 208], [242, 218, 222], [250, 241, 240]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #64B3C4, #ADB4C9, #DEC1D0, #F2DADE, #FAF1F0 is ideal for: health products, baby brands, fresh-style blogs. 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: #64b3c4; --color-2: #adb4c9; --color-3: #dec1d0; --color-4: #f2dade; --color-5: #faf1f0. 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. 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