#F6C1D2 + #E7CAD8 + #D9C7D5 + #B5B6C9 + #687289 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F6C1D2

Rouge · Pink · Cherry Blossom

HEX

#F6C1D2

RGB

rgb(246, 193, 210)

HSL

hsl(341, 75%, 86%)

HSB

hsb(341, 22%, 96%)

CMYK

cmyk(0%, 22%, 15%, 4%)

Oklch

oklch(86.3% 0.064 357.4)

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

#E7CAD8

Rouge · LightGray · Cherry Blossom

HEX

#E7CAD8

RGB

rgb(231, 202, 216)

HSL

hsl(331, 38%, 85%)

HSB

hsb(331, 13%, 91%)

CMYK

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

Oklch

oklch(86.7% 0.037 347.2)

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

#D9C7D5

Mauve · LightGray · Lavender

HEX

#D9C7D5

RGB

rgb(217, 199, 213)

HSL

hsl(313, 19%, 82%)

HSB

hsb(313, 8%, 85%)

CMYK

cmyk(0%, 8%, 2%, 15%)

Oklch

oklch(84.9% 0.028 333.3)

Traditional「Mauve」· Paint「Lavender」· Creative Rose Petal

#B5B6C9

Azure · Silver · Cobalt Blue

HEX

#B5B6C9

RGB

rgb(181, 182, 201)

HSL

hsl(237, 16%, 75%)

HSB

hsb(237, 10%, 79%)

CMYK

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

Oklch

oklch(78.1% 0.027 283.4)

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

#687289

Indigo · SlateGray · Navy Blue

HEX

#687289

RGB

rgb(104, 114, 137)

HSL

hsl(222, 14%, 47%)

HSB

hsb(222, 24%, 54%)

CMYK

cmyk(24%, 17%, 0%, 46%)

Oklch

oklch(55.2% 0.038 266.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F6C1D2

C1F6E5

Analogous

F6C1EC

F6C1D2

F6CAC1

Triadic

F6C1D2

D1F6C1

C1D1F6

Split-Comp.

F6C1D2

C1F6CA

C1ECF6

Tetradic

F6C1D2

ECF6C1

C1F6E5

CAC1F6

Contrast Matrix WCAG 2.1 Contrast

F6C1D2	E7CAD8	D9C7D5	B5B6C9	687289
—	1.0 Fail	1.0 Fail	1.3 Fail	3.1 AA Large
1.0 Fail	—	1.1 Fail	1.3 Fail	3.2 AA Large
1.0 Fail	1.1 Fail	—	1.2 Fail	3.0 AA Large
1.3 Fail	1.3 Fail	1.2 Fail	—	2.4 Fail
3.1 AA Large	3.2 AA Large	3.0 AA Large	2.4 Fail	—

White BG

1.6Fail

1.5Fail

1.6Fail

2.0Fail

4.8AA

Black BG

13.5AAA

13.8AAA

13.1AAA

10.5AAA

4.4AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

DFDFCE

DADAD5

D1D1D2

B5B5C4

6C6C83

Deuteranopia

E2E6CD

DCDED4

D2D4D1

B5B5C3

6C6B82

Tritanopia

F3CBCA

E6D2D1

D8CFCE

B5C1C0

697F7E

Achromatopsia

D3D3D3

D4D4D4

CECECE

B8B8B8

727272

Shades & Tints Shades & Tints

#F6C1D2

Dark

Light

#E7CAD8

Dark

Light

#D9C7D5

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f6c1d2;
  --color-2: #e7cad8;
  --color-3: #d9c7d5;
  --color-4: #b5b6c9;
  --color-5: #687289;
}

SCSS

$color-1: #f6c1d2;
$color-2: #e7cad8;
$color-3: #d9c7d5;
$color-4: #b5b6c9;
$color-5: #687289;

TAILWIND

colors: {
  'brand-1': '#f6c1d2',
  'brand-2': '#e7cad8',
  'brand-3': '#d9c7d5',
  'brand-4': '#b5b6c9',
  'brand-5': '#687289',
}

RGB Array

[246, 193, 210], [231, 202, 216], [217, 199, 213], [181, 182, 201], [104, 114, 137]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F6C1D2, #E7CAD8, #D9C7D5, #B5B6C9, #687289 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: #f6c1d2; --color-2: #e7cad8; --color-3: #d9c7d5; --color-4: #b5b6c9; --color-5: #687289. 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