#918EA6 + #C8D5CF + #FFFCF2 + #F4E0DE + #F8C2E3 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#918EA6

Deep Indigo · LightSlateGray · Navy Blue

HEX

#918EA6

RGB

rgb(145, 142, 166)

HSL

hsl(248, 12%, 60%)

HSB

hsb(248, 14%, 65%)

CMYK

cmyk(13%, 14%, 0%, 35%)

Oklch

oklch(65.7% 0.035 291.1)

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

#C8D5CF

Jade · LightGray · Mint Green

HEX

#C8D5CF

RGB

rgb(200, 213, 207)

HSL

hsl(152, 13%, 81%)

HSB

hsb(152, 6%, 84%)

CMYK

cmyk(6%, 0%, 3%, 16%)

Oklch

oklch(86.1% 0.016 166.7)

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

#FFFCF2

Goose Yellow · SeaShell · Lemon Cream

HEX

#FFFCF2

RGB

rgb(255, 252, 242)

HSL

hsl(46, 100%, 97%)

HSB

hsb(46, 5%, 100%)

CMYK

cmyk(0%, 1%, 5%, 0%)

Oklch

oklch(99.1% 0.014 93.0)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#F4E0DE

Peach Pink · Linen · Cherry Blossom

HEX

#F4E0DE

RGB

rgb(244, 224, 222)

HSL

hsl(5, 50%, 91%)

HSB

hsb(5, 9%, 96%)

CMYK

cmyk(0%, 8%, 9%, 4%)

Oklch

oklch(92.2% 0.022 24.4)

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

#F8C2E3

Mauve · Pink · Cherry Blossom

HEX

#F8C2E3

RGB

rgb(248, 194, 227)

HSL

hsl(323, 79%, 87%)

HSB

hsb(323, 22%, 97%)

CMYK

cmyk(0%, 22%, 8%, 3%)

Oklch

oklch(87.2% 0.075 341.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

918EA6

A2A58D

Analogous

8D96A5

918EA6

9C8DA5

Triadic

918EA6

A5908D

8DA590

Split-Comp.

918EA6

A59C8D

96A58D

Tetradic

918EA6

A58D96

A2A58D

8DA59C

Contrast Matrix WCAG 2.1 Contrast

918EA6	C8D5CF	FFFCF2	F4E0DE	F8C2E3
—	2.1 Fail	3.1 AA Large	2.5 Fail	2.1 Fail
2.1 Fail	—	1.5 Fail	1.2 Fail	1.0 Fail
3.1 AA Large	1.5 Fail	—	1.2 Fail	1.5 Fail
2.5 Fail	1.2 Fail	1.2 Fail	—	1.2 Fail
2.1 Fail	1.0 Fail	1.5 Fail	1.2 Fail	—

White BG

3.2AA Large

1.5Fail

1.0Fail

1.3Fail

1.5Fail

Black BG

6.6AA

13.9AAA

20.5AAA

16.6AAA

13.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9090A0

CECED0

FEFEF4

EBEBDE

E1E0DB

Deuteranopia

90909F

CDCCD1

FEFEF5

EDEEDF

E4E8D9

Tritanopia

919C9B

C9D2D2

FFF6F7

F3DFDF

F5D5D3

Achromatopsia

929292

D0D0D0

FCFCFC

E6E6E6

D6D6D6

Shades & Tints Shades & Tints

#918EA6

Dark

Light

#C8D5CF

Dark

Light

#FFFCF2

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #918ea6;
  --color-2: #c8d5cf;
  --color-3: #fffcf2;
  --color-4: #f4e0de;
  --color-5: #f8c2e3;
}

SCSS

$color-1: #918ea6;
$color-2: #c8d5cf;
$color-3: #fffcf2;
$color-4: #f4e0de;
$color-5: #f8c2e3;

TAILWIND

colors: {
  'brand-1': '#918ea6',
  'brand-2': '#c8d5cf',
  'brand-3': '#fffcf2',
  'brand-4': '#f4e0de',
  'brand-5': '#f8c2e3',
}

RGB Array

[145, 142, 166], [200, 213, 207], [255, 252, 242], [244, 224, 222], [248, 194, 227]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #918EA6, #C8D5CF, #FFFCF2, #F4E0DE, #F8C2E3 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: #918ea6; --color-2: #c8d5cf; --color-3: #fffcf2; --color-4: #f4e0de; --color-5: #f8c2e3. 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