#F27882 + #DEC2AA + #BDE4BC + #8ADFBD + #97BAA8 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F27882

Peach Pink · LightCoral · Coral Red

HEX

#F27882

RGB

rgb(242, 120, 130)

HSL

hsl(355, 82%, 71%)

HSB

hsb(355, 50%, 95%)

CMYK

cmyk(0%, 50%, 46%, 5%)

Oklch

oklch(71.6% 0.150 16.5)

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

#DEC2AA

Apricot · Tan · Peach Orange

HEX

#DEC2AA

RGB

rgb(222, 194, 170)

HSL

hsl(28, 44%, 77%)

HSB

hsb(28, 23%, 87%)

CMYK

cmyk(0%, 13%, 23%, 13%)

Oklch

oklch(83.2% 0.046 62.7)

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

#BDE4BC

Celadon · LightGray · Mint Green

HEX

#BDE4BC

RGB

rgb(189, 228, 188)

HSL

hsl(119, 43%, 82%)

HSB

hsb(119, 18%, 89%)

CMYK

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

Oklch

oklch(88.0% 0.068 144.3)

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

#8ADFBD

Jade · MediumAquaMarine · Apple Green

HEX

#8ADFBD

RGB

rgb(138, 223, 189)

HSL

hsl(156, 57%, 71%)

HSB

hsb(156, 38%, 87%)

CMYK

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

Oklch

oklch(84.0% 0.096 166.7)

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

#97BAA8

Celadon · DarkGray · Apple Green

HEX

#97BAA8

RGB

rgb(151, 186, 168)

HSL

hsl(149, 20%, 66%)

HSB

hsb(149, 19%, 73%)

CMYK

cmyk(19%, 0%, 10%, 27%)

Oklch

oklch(75.8% 0.046 162.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F27882

78F2E8

Analogous

F278BF

F27882

F2AB78

Triadic

F27882

83F278

7883F2

Split-Comp.

F27882

78F2AB

78BFF2

Tetradic

F27882

BFF278

78F2E8

AB78F2

Contrast Matrix WCAG 2.1 Contrast

F27882	DEC2AA	BDE4BC	8ADFBD	97BAA8
—	1.6 Fail	1.9 Fail	1.7 Fail	1.3 Fail
1.6 Fail	—	1.2 Fail	1.1 Fail	1.3 Fail
1.9 Fail	1.2 Fail	—	1.1 Fail	1.5 Fail
1.7 Fail	1.1 Fail	1.1 Fail	—	1.3 Fail
1.3 Fail	1.3 Fail	1.5 Fail	1.3 Fail	—

White BG

2.7Fail

1.7Fail

1.4Fail

1.6Fail

2.1Fail

Black BG

7.8AAA

12.4AAA

15.0AAA

13.4AAA

9.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BDBC80

D2D2B0

CECEC6

AFB0C5

A6A6AC

Deuteranopia

C4CD7F

D4D6B1

CCC9C8

AAA4C7

A4A2AD

Tritanopia

EC7E7D

DDB4B5

BFCDCF

8ECCCD

99B0B1

Achromatopsia

9E9E9E

C8C8C8

D4D4D4

C2C2C2

ADADAD

Shades & Tints Shades & Tints

#F27882

Dark

Light

#DEC2AA

Dark

Light

#BDE4BC

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f27882;
  --color-2: #dec2aa;
  --color-3: #bde4bc;
  --color-4: #8adfbd;
  --color-5: #97baa8;
}

SCSS

$color-1: #f27882;
$color-2: #dec2aa;
$color-3: #bde4bc;
$color-4: #8adfbd;
$color-5: #97baa8;

TAILWIND

colors: {
  'brand-1': '#f27882',
  'brand-2': '#dec2aa',
  'brand-3': '#bde4bc',
  'brand-4': '#8adfbd',
  'brand-5': '#97baa8',
}

RGB Array

[242, 120, 130], [222, 194, 170], [189, 228, 188], [138, 223, 189], [151, 186, 168]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F27882, #DEC2AA, #BDE4BC, #8ADFBD, #97BAA8 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: #f27882; --color-2: #dec2aa; --color-3: #bde4bc; --color-4: #8adfbd; --color-5: #97baa8. 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