#9B9384 + #DDD4C3 + #B3CECB + #F7A896 + #F2B7A5 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#9B9384

Ginger · Gray · Warm Sun

HEX

#9B9384

RGB

rgb(155, 147, 132)

HSL

hsl(39, 10%, 56%)

HSB

hsb(39, 15%, 61%)

CMYK

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

Oklch

oklch(66.6% 0.024 83.2)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#DDD4C3

Goose Yellow · LightGray · Peach Orange

HEX

#DDD4C3

RGB

rgb(221, 212, 195)

HSL

hsl(39, 28%, 82%)

HSB

hsb(39, 12%, 87%)

CMYK

cmyk(0%, 4%, 12%, 13%)

Oklch

oklch(87.3% 0.025 83.4)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#B3CECB

Jade · LightSteelBlue · Lake Green

HEX

#B3CECB

RGB

rgb(179, 206, 203)

HSL

hsl(173, 22%, 75%)

HSB

hsb(173, 13%, 81%)

CMYK

cmyk(13%, 0%, 1%, 19%)

Oklch

oklch(83.1% 0.029 188.5)

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

#F7A896

Peach Pink · LightSalmon · Coral Red

HEX

#F7A896

RGB

rgb(247, 168, 150)

HSL

hsl(11, 86%, 78%)

HSB

hsb(11, 39%, 97%)

CMYK

cmyk(0%, 32%, 39%, 3%)

Oklch

oklch(80.4% 0.098 33.4)

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

#F2B7A5

Peach Pink · LightPink · Coral Red

HEX

#F2B7A5

RGB

rgb(242, 183, 165)

HSL

hsl(14, 75%, 80%)

HSB

hsb(14, 32%, 95%)

CMYK

cmyk(0%, 24%, 32%, 5%)

Oklch

oklch(82.9% 0.073 37.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9B9384

848B9A

Analogous

9A8784

9B9384

979A84

Triadic

9B9384

849A92

92849A

Split-Comp.

9B9384

84979A

87849A

Tetradic

9B9384

849A87

848B9A

9A8497

Contrast Matrix WCAG 2.1 Contrast

9B9384	DDD4C3	B3CECB	F7A896	F2B7A5
—	2.1 Fail	1.8 Fail	1.6 Fail	1.8 Fail
2.1 Fail	—	1.1 Fail	1.3 Fail	1.2 Fail
1.8 Fail	1.1 Fail	—	1.1 Fail	1.0 Fail
1.6 Fail	1.3 Fail	1.1 Fail	—	1.1 Fail
1.8 Fail	1.2 Fail	1.0 Fail	1.1 Fail	—

White BG

3.0AA Large

1.5Fail

1.7Fail

1.9Fail

1.7Fail

Black BG

6.9AA

14.3AAA

12.6AAA

11.0AAA

12.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

989788

D9D9C7

BFBFCC

D5D49A

D8D8A9

Deuteranopia

989989

DADAC8

BDBBCC

D9DF9B

DCE0AA

Tritanopia

9B8A8B

DDCACB

B4CCCC

F39E9F

EFADAE

Achromatopsia

949494

D5D5D5

C6C6C6

BEBEBE

C7C7C7

Shades & Tints Shades & Tints

#9B9384

Dark

Light

#DDD4C3

Dark

Light

#B3CECB

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9b9384;
  --color-2: #ddd4c3;
  --color-3: #b3cecb;
  --color-4: #f7a896;
  --color-5: #f2b7a5;
}

SCSS

$color-1: #9b9384;
$color-2: #ddd4c3;
$color-3: #b3cecb;
$color-4: #f7a896;
$color-5: #f2b7a5;

TAILWIND

colors: {
  'brand-1': '#9b9384',
  'brand-2': '#ddd4c3',
  'brand-3': '#b3cecb',
  'brand-4': '#f7a896',
  'brand-5': '#f2b7a5',
}

RGB Array

[155, 147, 132], [221, 212, 195], [179, 206, 203], [247, 168, 150], [242, 183, 165]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9B9384, #DDD4C3, #B3CECB, #F7A896, #F2B7A5 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: #9b9384; --color-2: #ddd4c3; --color-3: #b3cecb; --color-4: #f7a896; --color-5: #f2b7a5. 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