#7D9985 + #B2C97D + #F2ECEB + #FF374D + #DBD8D5 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#7D9985

Celadon · Gray · Olive Green

HEX

#7D9985

RGB

rgb(125, 153, 133)

HSL

hsl(137, 12%, 55%)

HSB

hsb(137, 18%, 60%)

CMYK

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

Oklch

oklch(65.6% 0.043 154.0)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

#B2C97D

Willow Green · Tan · Apple Green

HEX

#B2C97D

RGB

rgb(178, 201, 125)

HSL

hsl(78, 41%, 64%)

HSB

hsb(78, 38%, 79%)

CMYK

cmyk(11%, 0%, 38%, 21%)

Oklch

oklch(80.1% 0.103 122.5)

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

#F2ECEB

Peach Pink · Linen · Cherry Blossom

HEX

#F2ECEB

RGB

rgb(242, 236, 235)

HSL

hsl(9, 21%, 94%)

HSB

hsb(9, 3%, 95%)

CMYK

cmyk(0%, 2%, 3%, 5%)

Oklch

oklch(94.7% 0.007 28.8)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

#FF374D

Peach Pink · Tomato · Coral Red

HEX

#FF374D

RGB

rgb(255, 55, 77)

HSL

hsl(353, 100%, 61%)

HSB

hsb(353, 78%, 100%)

CMYK

cmyk(0%, 78%, 70%, 0%)

Oklch

oklch(65.5% 0.232 21.3)

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

#DBD8D5

Goose Yellow · LightGray · Pearl Gray

HEX

#DBD8D5

RGB

rgb(219, 216, 213)

HSL

hsl(30, 8%, 85%)

HSB

hsb(30, 3%, 86%)

CMYK

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

Oklch

oklch(88.4% 0.005 67.8)

Traditional「Goose Yellow」· Paint「Pearl Gray」· Creative Silver Lining

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

7D9985

9A7E92

Analogous

849A7E

7D9985

7E9A94

Triadic

7D9985

867E9A

9A867E

Split-Comp.

7D9985

947E9A

9A7E84

Tetradic

7D9985

7E849A

9A7E92

9A947E

Contrast Matrix WCAG 2.1 Contrast

7D9985	B2C97D	F2ECEB	FF374D	DBD8D5
—	1.7 Fail	2.7 Fail	1.1 Fail	2.2 Fail
1.7 Fail	—	1.6 Fail	2.0 Fail	1.3 Fail
2.7 Fail	1.6 Fail	—	3.0 AA Large	1.2 Fail
1.1 Fail	2.0 Fail	3.0 AA Large	—	2.5 Fail
2.2 Fail	1.3 Fail	1.2 Fail	2.5 Fail	—

White BG

3.1AA Large

1.8Fail

1.2Fail

3.6AA Large

1.4Fail

Black BG

6.8AA

11.5AAA

18.0AAA

5.9AA

14.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

89898A

BCBC8F

EFEFEB

A8A748

DADAD6

Deuteranopia

88858B

BBB994

F0F0EB

B4C346

DADAD6

Tritanopia

7E8E8F

B39EA1

F2EBEB

F54343

DBD6D6

Achromatopsia

8E8E8E

B9B9B9

EEEEEE

757575

D9D9D9

Shades & Tints Shades & Tints

#7D9985

Dark

Light

#B2C97D

Dark

Light

#F2ECEB

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #7d9985;
  --color-2: #b2c97d;
  --color-3: #f2eceb;
  --color-4: #ff374d;
  --color-5: #dbd8d5;
}

SCSS

$color-1: #7d9985;
$color-2: #b2c97d;
$color-3: #f2eceb;
$color-4: #ff374d;
$color-5: #dbd8d5;

TAILWIND

colors: {
  'brand-1': '#7d9985',
  'brand-2': '#b2c97d',
  'brand-3': '#f2eceb',
  'brand-4': '#ff374d',
  'brand-5': '#dbd8d5',
}

RGB Array

[125, 153, 133], [178, 201, 125], [242, 236, 235], [255, 55, 77], [219, 216, 213]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #7D9985, #B2C97D, #F2ECEB, #FF374D, #DBD8D5 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: #7d9985; --color-2: #b2c97d; --color-3: #f2eceb; --color-4: #ff374d; --color-5: #dbd8d5. 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