#85D9C2 + #CFE1C8 + #E9E9E9 + #F876B2 + #F3136E - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#85D9C2

Jade · MediumAquaMarine · Lake Green

HEX

#85D9C2

RGB

rgb(133, 217, 194)

HSL

hsl(164, 53%, 69%)

HSB

hsb(164, 39%, 85%)

CMYK

cmyk(39%, 0%, 11%, 15%)

Oklch

oklch(82.5% 0.089 174.6)

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

#CFE1C8

Celadon · LightGray · Mint Green

HEX

#CFE1C8

RGB

rgb(207, 225, 200)

HSL

hsl(103, 29%, 83%)

HSB

hsb(103, 11%, 88%)

CMYK

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

Oklch

oklch(88.9% 0.039 136.9)

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

#E9E9E9

Plain White · Lavender · Cloud White

HEX

#E9E9E9

RGB

rgb(233, 233, 233)

HSL

hsl(0, 0%, 91%)

HSB

hsb(0, 0%, 91%)

CMYK

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

Oklch

oklch(93.4% 0.000 89.9)

Traditional「Plain White」· Paint「Cloud White」· Creative Morning Mist

#F876B2

Rouge · Orchid · Rose Pink

HEX

#F876B2

RGB

rgb(248, 118, 178)

HSL

hsl(332, 90%, 72%)

HSB

hsb(332, 52%, 97%)

CMYK

cmyk(0%, 52%, 28%, 3%)

Oklch

oklch(73.5% 0.171 353.2)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

#F3136E

Dark Violet · DeepPink · Rose Pink

HEX

#F3136E

RGB

rgb(243, 19, 110)

HSL

hsl(336, 90%, 51%)

HSB

hsb(336, 92%, 95%)

CMYK

cmyk(0%, 92%, 55%, 5%)

Oklch

oklch(62.3% 0.244 6.8)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

85D9C2

DA869C

Analogous

86DA9A

85D9C2

86C6DA

Triadic

85D9C2

C486DA

DAC486

Split-Comp.

85D9C2

DA86C6

DA9A86

Tetradic

85D9C2

9A86DA

DA869C

C6DA86

Contrast Matrix WCAG 2.1 Contrast

85D9C2	CFE1C8	E9E9E9	F876B2	F3136E
—	1.2 Fail	1.4 Fail	1.5 Fail	2.5 Fail
1.2 Fail	—	1.1 Fail	1.9 Fail	3.0 Fail
1.4 Fail	1.1 Fail	—	2.1 Fail	3.4 AA Large
1.5 Fail	1.9 Fail	2.1 Fail	—	1.6 Fail
2.5 Fail	3.0 Fail	3.4 AA Large	1.6 Fail	—

White BG

1.7Fail

1.4Fail

1.2Fail

2.6Fail

4.1AA Large

Black BG

12.7AAA

15.3AAA

17.3AAA

8.2AAA

5.1AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A9AAC8

D7D7CE

E9E9E9

C0BFA3

929058

Deuteranopia

A59EC9

D6D4D0

E9E9E9

C7D1A0

9FB053

Tritanopia

89CCCD

D0D3D4

E9E9E9

F29896

E84743

Achromatopsia

BDBDBD

D9D9D9

E9E9E9

A4A4A4

606060

Shades & Tints Shades & Tints

#85D9C2

Dark

Light

#CFE1C8

Dark

Light

#E9E9E9

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #85d9c2;
  --color-2: #cfe1c8;
  --color-3: #e9e9e9;
  --color-4: #f876b2;
  --color-5: #f3136e;
}

SCSS

$color-1: #85d9c2;
$color-2: #cfe1c8;
$color-3: #e9e9e9;
$color-4: #f876b2;
$color-5: #f3136e;

TAILWIND

colors: {
  'brand-1': '#85d9c2',
  'brand-2': '#cfe1c8',
  'brand-3': '#e9e9e9',
  'brand-4': '#f876b2',
  'brand-5': '#f3136e',
}

RGB Array

[133, 217, 194], [207, 225, 200], [233, 233, 233], [248, 118, 178], [243, 19, 110]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #85D9C2, #CFE1C8, #E9E9E9, #F876B2, #F3136E 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: #85d9c2; --color-2: #cfe1c8; --color-3: #e9e9e9; --color-4: #f876b2; --color-5: #f3136e. 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