#809C90 + #B3CBB5 + #DAE7D2 + #F9CADC + #D02866 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#809C90

Mineral Blue · LightSlateGray · Olive Green

HEX

#809C90

RGB

rgb(128, 156, 144)

HSL

hsl(154, 12%, 56%)

HSB

hsb(154, 18%, 61%)

CMYK

cmyk(18%, 0%, 8%, 39%)

Oklch

oklch(66.8% 0.036 167.4)

Traditional「Mineral Blue」· Paint「Olive Green」· Creative Blush Sunrise

#B3CBB5

Celadon · Silver · Apple Green

HEX

#B3CBB5

RGB

rgb(179, 203, 181)

HSL

hsl(125, 19%, 75%)

HSB

hsb(125, 12%, 80%)

CMYK

cmyk(12%, 0%, 11%, 20%)

Oklch

oklch(81.8% 0.040 147.5)

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

#DAE7D2

Celadon · LightGray · Mint Green

HEX

#DAE7D2

RGB

rgb(218, 231, 210)

HSL

hsl(97, 30%, 86%)

HSB

hsb(97, 9%, 91%)

CMYK

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

Oklch

oklch(91.2% 0.031 133.3)

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

#F9CADC

Rouge · Pink · Cherry Blossom

HEX

#F9CADC

RGB

rgb(249, 202, 220)

HSL

hsl(337, 80%, 88%)

HSB

hsb(337, 19%, 98%)

CMYK

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

Oklch

oklch(88.5% 0.058 353.4)

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

#D02866

Dark Violet · MediumVioletRed · Camellia

HEX

#D02866

RGB

rgb(208, 40, 102)

HSL

hsl(338, 68%, 49%)

HSB

hsb(338, 81%, 82%)

CMYK

cmyk(0%, 81%, 51%, 18%)

Oklch

oklch(56.8% 0.204 5.3)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

809C90

9C818D

Analogous

819C83

809C90

819A9C

Triadic

809C90

91819C

9C9181

Split-Comp.

809C90

9C819A

9C8381

Tetradic

809C90

83819C

9C818D

9A9C81

Contrast Matrix WCAG 2.1 Contrast

809C90	B3CBB5	DAE7D2	F9CADC	D02866
—	1.7 Fail	2.3 Fail	2.1 Fail	1.7 Fail
1.7 Fail	—	1.3 Fail	1.2 Fail	2.9 Fail
2.3 Fail	1.3 Fail	—	1.1 Fail	3.9 AA Large
2.1 Fail	1.2 Fail	1.1 Fail	—	3.5 AA Large
1.7 Fail	2.9 Fail	3.9 AA Large	3.5 AA Large	—

White BG

3.0Fail

1.7Fail

1.3Fail

1.4Fail

5.0AA

Black BG

7.1AAA

12.1AAA

16.3AAA

14.5AAA

4.2AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

8C8C93

BDBEBA

E0E0D7

E5E4D8

878657

Deuteranopia

8B8894

BCBABC

DFDED8

E7EBD7

919E53

Tritanopia

819596

B4BFBF

DBDBDC

F7D4D3

C84B49

Achromatopsia

929292

C1C1C1

E1E1E1

DADADA

616161

Shades & Tints Shades & Tints

#809C90

Dark

Light

#B3CBB5

Dark

Light

#DAE7D2

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #809c90;
  --color-2: #b3cbb5;
  --color-3: #dae7d2;
  --color-4: #f9cadc;
  --color-5: #d02866;
}

SCSS

$color-1: #809c90;
$color-2: #b3cbb5;
$color-3: #dae7d2;
$color-4: #f9cadc;
$color-5: #d02866;

TAILWIND

colors: {
  'brand-1': '#809c90',
  'brand-2': '#b3cbb5',
  'brand-3': '#dae7d2',
  'brand-4': '#f9cadc',
  'brand-5': '#d02866',
}

RGB Array

[128, 156, 144], [179, 203, 181], [218, 231, 210], [249, 202, 220], [208, 40, 102]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #809C90, #B3CBB5, #DAE7D2, #F9CADC, #D02866 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: #809c90; --color-2: #b3cbb5; --color-3: #dae7d2; --color-4: #f9cadc; --color-5: #d02866. 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