#83879C + #BE8C91 + #DF858B + #F8AB95 + #CBDA8C - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#83879C

Azure · LightSlateGray · Navy Blue

HEX

#83879C

RGB

rgb(131, 135, 156)

HSL

hsl(230, 11%, 56%)

HSB

hsb(230, 16%, 61%)

CMYK

cmyk(16%, 13%, 0%, 39%)

Oklch

oklch(62.7% 0.032 276.9)

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

#BE8C91

Peach Pink · DarkGray · Coral Red

HEX

#BE8C91

RGB

rgb(190, 140, 145)

HSL

hsl(354, 28%, 65%)

HSB

hsb(354, 26%, 75%)

CMYK

cmyk(0%, 26%, 24%, 25%)

Oklch

oklch(69.0% 0.061 12.1)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#DF858B

Peach Pink · LightCoral · Coral Red

HEX

#DF858B

RGB

rgb(223, 133, 139)

HSL

hsl(356, 58%, 70%)

HSB

hsb(356, 40%, 87%)

CMYK

cmyk(0%, 40%, 38%, 13%)

Oklch

oklch(71.4% 0.111 16.0)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#F8AB95

Peach Pink · LightSalmon · Coral Red

HEX

#F8AB95

RGB

rgb(248, 171, 149)

HSL

hsl(13, 88%, 78%)

HSB

hsb(13, 40%, 97%)

CMYK

cmyk(0%, 31%, 40%, 3%)

Oklch

oklch(81.0% 0.096 36.6)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#CBDA8C

Willow Green · Tan · Apple Green

HEX

#CBDA8C

RGB

rgb(203, 218, 140)

HSL

hsl(72, 51%, 70%)

HSB

hsb(72, 36%, 85%)

CMYK

cmyk(7%, 0%, 36%, 15%)

Oklch

oklch(85.9% 0.102 117.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

83879C

9B9782

Analogous

82939B

83879C

8B829B

Triadic

83879C

9B8287

879B82

Split-Comp.

83879C

9B8B82

939B82

Tetradic

83879C

9B8293

9B9782

829B8B

Contrast Matrix WCAG 2.1 Contrast

83879C	BE8C91	DF858B	F8AB95	CBDA8C
—	1.2 Fail	1.3 Fail	1.9 Fail	2.4 Fail
1.2 Fail	—	1.1 Fail	1.5 Fail	1.9 Fail
1.3 Fail	1.1 Fail	—	1.4 Fail	1.8 Fail
1.9 Fail	1.5 Fail	1.4 Fail	—	1.2 Fail
2.4 Fail	1.9 Fail	1.8 Fail	1.2 Fail	—

White BG

3.6AA Large

2.9Fail

2.7Fail

1.9Fail

1.5Fail

Black BG

5.9AA

7.3AAA

7.9AAA

11.3AAA

13.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

858597

A8A890

B8B78A

D7D69A

D1D29F

Deuteranopia

858496

ABAF90

BDC489

DBE19C

D1D0A3

Tritanopia

839392

BC8F8F

DB8888

F49F9F

CCAEB1

Achromatopsia

888888

9C9C9C

A1A1A1

C0C0C0

CDCDCD

Shades & Tints Shades & Tints

#83879C

Dark

Light

#BE8C91

Dark

Light

#DF858B

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #83879c;
  --color-2: #be8c91;
  --color-3: #df858b;
  --color-4: #f8ab95;
  --color-5: #cbda8c;
}

SCSS

$color-1: #83879c;
$color-2: #be8c91;
$color-3: #df858b;
$color-4: #f8ab95;
$color-5: #cbda8c;

TAILWIND

colors: {
  'brand-1': '#83879c',
  'brand-2': '#be8c91',
  'brand-3': '#df858b',
  'brand-4': '#f8ab95',
  'brand-5': '#cbda8c',
}

RGB Array

[131, 135, 156], [190, 140, 145], [223, 133, 139], [248, 171, 149], [203, 218, 140]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #83879C, #BE8C91, #DF858B, #F8AB95, #CBDA8C 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: #83879c; --color-2: #be8c91; --color-3: #df858b; --color-4: #f8ab95; --color-5: #cbda8c. 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