#827183 + #F5F0C6 + #F5DAC9 + #CAD6CC + #D9DDDE - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#827183

Ink Gray · Gray · Warm Gray

HEX

#827183

RGB

rgb(130, 113, 131)

HSL

hsl(297, 7%, 48%)

HSB

hsb(297, 14%, 51%)

CMYK

cmyk(1%, 14%, 0%, 49%)

Oklch

oklch(57.1% 0.034 324.3)

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

#F5F0C6

Fresh Green · Bisque · Lemon Cream

HEX

#F5F0C6

RGB

rgb(245, 240, 198)

HSL

hsl(54, 70%, 87%)

HSB

hsb(54, 19%, 96%)

CMYK

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

Oklch

oklch(94.9% 0.055 101.8)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#F5DAC9

Apricot · Bisque · Peach Orange

HEX

#F5DAC9

RGB

rgb(245, 218, 201)

HSL

hsl(23, 69%, 87%)

HSB

hsb(23, 18%, 96%)

CMYK

cmyk(0%, 11%, 18%, 4%)

Oklch

oklch(90.6% 0.038 54.3)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#CAD6CC

Celadon · LightGray · Mint Green

HEX

#CAD6CC

RGB

rgb(202, 214, 204)

HSL

hsl(130, 13%, 82%)

HSB

hsb(130, 6%, 84%)

CMYK

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

Oklch

oklch(86.4% 0.019 150.5)

Traditional「Celadon」· Paint「Mint Green」· Creative Mint Breeze

#D9DDDE

Plain White · LightGray · Cloud White

HEX

#D9DDDE

RGB

rgb(217, 221, 222)

HSL

hsl(192, 7%, 86%)

HSB

hsb(192, 2%, 87%)

CMYK

cmyk(2%, 0%, 0%, 13%)

Oklch

oklch(89.5% 0.005 214.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

827183

738372

Analogous

7A7283

827183

83727B

Triadic

827183

838272

728382

Split-Comp.

827183

7B8372

72837A

Tetradic

827183

837A72

738372

727B83

Contrast Matrix WCAG 2.1 Contrast

827183	F5F0C6	F5DAC9	CAD6CC	D9DDDE
—	3.9 AA Large	3.4 AA Large	3.0 AA Large	3.3 AA Large
3.9 AA Large	—	1.2 Fail	1.3 Fail	1.2 Fail
3.4 AA Large	1.2 Fail	—	1.1 Fail	1.0 Fail
3.0 AA Large	1.3 Fail	1.1 Fail	—	1.1 Fail
3.3 AA Large	1.2 Fail	1.0 Fail	1.1 Fail	—

White BG

4.5AA

1.2Fail

1.3Fail

1.5Fail

1.4Fail

Black BG

4.6AA

18.2AAA

15.8AAA

14.0AAA

15.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7B7A7F

F3F3D0

E9E9CD

CFCFCE

DBDBDE

Deuteranopia

7C7D7E

F3F4D3

EBEDCE

CFCECF

DBDADE

Tritanopia

817B7A

F5D8DA

F4D0D1

CBD0D1

D9DEDE

Achromatopsia

787878

EDEDED

E0E0E0

D1D1D1

DCDCDC

Shades & Tints Shades & Tints

#827183

Dark

Light

#F5F0C6

Dark

Light

#F5DAC9

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #827183;
  --color-2: #f5f0c6;
  --color-3: #f5dac9;
  --color-4: #cad6cc;
  --color-5: #d9ddde;
}

SCSS

$color-1: #827183;
$color-2: #f5f0c6;
$color-3: #f5dac9;
$color-4: #cad6cc;
$color-5: #d9ddde;

TAILWIND

colors: {
  'brand-1': '#827183',
  'brand-2': '#f5f0c6',
  'brand-3': '#f5dac9',
  'brand-4': '#cad6cc',
  'brand-5': '#d9ddde',
}

RGB Array

[130, 113, 131], [245, 240, 198], [245, 218, 201], [202, 214, 204], [217, 221, 222]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #827183, #F5F0C6, #F5DAC9, #CAD6CC, #D9DDDE 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: #827183; --color-2: #f5f0c6; --color-3: #f5dac9; --color-4: #cad6cc; --color-5: #d9ddde. 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