#97796F + #C0D4D3 + #C38286 + #FFCBD1 + #F7B5B9 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#97796F

Tangerine · Gray · Warm Sun

HEX

#97796F

RGB

rgb(151, 121, 111)

HSL

hsl(15, 16%, 51%)

HSB

hsb(15, 26%, 59%)

CMYK

cmyk(0%, 20%, 26%, 41%)

Oklch

oklch(60.2% 0.041 39.2)

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

#C0D4D3

Jade · LightGray · Glacier Blue

HEX

#C0D4D3

RGB

rgb(192, 212, 211)

HSL

hsl(177, 19%, 79%)

HSB

hsb(177, 9%, 83%)

CMYK

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

Oklch

oklch(85.5% 0.022 193.1)

Traditional「Jade」· Paint「Glacier Blue」· Creative Arctic Pool

#C38286

Peach Pink · DarkSalmon · Coral Red

HEX

#C38286

RGB

rgb(195, 130, 134)

HSL

hsl(356, 35%, 64%)

HSB

hsb(356, 33%, 76%)

CMYK

cmyk(0%, 33%, 31%, 24%)

Oklch

oklch(67.4% 0.081 15.4)

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

#FFCBD1

Peach Pink · Pink · Cherry Blossom

HEX

#FFCBD1

RGB

rgb(255, 203, 209)

HSL

hsl(353, 100%, 90%)

HSB

hsb(353, 20%, 100%)

CMYK

cmyk(0%, 20%, 18%, 0%)

Oklch

oklch(88.9% 0.059 10.6)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Rose Petal

#F7B5B9

Peach Pink · LightPink · Cherry Blossom

HEX

#F7B5B9

RGB

rgb(247, 181, 185)

HSL

hsl(356, 80%, 84%)

HSB

hsb(356, 27%, 97%)

CMYK

cmyk(0%, 27%, 25%, 3%)

Oklch

oklch(83.5% 0.077 14.8)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

97796F

6E8C96

Analogous

966E78

97796F

968C6E

Triadic

97796F

6E9678

786E96

Split-Comp.

97796F

6E968C

6E7896

Tetradic

97796F

78966E

6E8C96

8C6E96

Contrast Matrix WCAG 2.1 Contrast

97796F	C0D4D3	C38286	FFCBD1	F7B5B9
—	2.6 Fail	1.3 Fail	2.8 Fail	2.3 Fail
2.6 Fail	—	2.0 Fail	1.1 Fail	1.1 Fail
1.3 Fail	2.0 Fail	—	2.1 Fail	1.8 Fail
2.8 Fail	1.1 Fail	2.1 Fail	—	1.2 Fail
2.3 Fail	1.1 Fail	1.8 Fail	1.2 Fail	—

White BG

4.0AA Large

1.5Fail

3.1AA Large

1.4Fail

1.7Fail

Black BG

5.3AA

13.6AAA

6.9AA

14.7AAA

12.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8A8A71

C9C9D3

A7A685

E8E8D0

DADAB8

Deuteranopia

8C8E72

C8C6D3

ABB085

ECEFCF

DEE3B8

Tritanopia

967374

C1D3D3

C08484

FCCECE

F4B7B7

Achromatopsia

818181

CECECE

969696

DBDBDB

C9C9C9

Shades & Tints Shades & Tints

#97796F

Dark

Light

#C0D4D3

Dark

Light

#C38286

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #97796f;
  --color-2: #c0d4d3;
  --color-3: #c38286;
  --color-4: #ffcbd1;
  --color-5: #f7b5b9;
}

SCSS

$color-1: #97796f;
$color-2: #c0d4d3;
$color-3: #c38286;
$color-4: #ffcbd1;
$color-5: #f7b5b9;

TAILWIND

colors: {
  'brand-1': '#97796f',
  'brand-2': '#c0d4d3',
  'brand-3': '#c38286',
  'brand-4': '#ffcbd1',
  'brand-5': '#f7b5b9',
}

RGB Array

[151, 121, 111], [192, 212, 211], [195, 130, 134], [255, 203, 209], [247, 181, 185]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #97796F, #C0D4D3, #C38286, #FFCBD1, #F7B5B9 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: #97796f; --color-2: #c0d4d3; --color-3: #c38286; --color-4: #ffcbd1; --color-5: #f7b5b9. 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