#796F7A + #918E97 + #D7B689 + #FBD0A3 + #FFF2AC - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#796F7A

Ink Gray · Gray · Warm Gray

HEX

#796F7A

RGB

rgb(121, 111, 122)

HSL

hsl(295, 5%, 46%)

HSB

hsb(295, 9%, 48%)

CMYK

cmyk(1%, 9%, 0%, 52%)

Oklch

oklch(55.5% 0.021 323.1)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

#918E97

Ash · LightSlateGray · Silver Sand

HEX

#918E97

RGB

rgb(145, 142, 151)

HSL

hsl(260, 4%, 57%)

HSB

hsb(260, 6%, 59%)

CMYK

cmyk(4%, 6%, 0%, 41%)

Oklch

oklch(65.2% 0.014 301.2)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

#D7B689

Ginger · Tan · Warm Sun

HEX

#D7B689

RGB

rgb(215, 182, 137)

HSL

hsl(35, 49%, 69%)

HSB

hsb(35, 36%, 84%)

CMYK

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

Oklch

oklch(79.4% 0.071 75.1)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

#FBD0A3

Goose Yellow · Wheat · Peach Orange

HEX

#FBD0A3

RGB

rgb(251, 208, 163)

HSL

hsl(31, 92%, 81%)

HSB

hsb(31, 35%, 98%)

CMYK

cmyk(0%, 17%, 35%, 2%)

Oklch

oklch(88.4% 0.076 67.9)

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

#FFF2AC

Fresh Green · Wheat · Lemon Cream

HEX

#FFF2AC

RGB

rgb(255, 242, 172)

HSL

hsl(51, 100%, 84%)

HSB

hsb(51, 33%, 100%)

CMYK

cmyk(0%, 5%, 33%, 0%)

Oklch

oklch(95.5% 0.089 98.9)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

796F7A

707B6F

Analogous

746F7B

796F7A

7B6F76

Triadic

796F7A

7B7A6F

6F7B7A

Split-Comp.

796F7A

767B6F

6F7B74

Tetradic

796F7A

7B746F

707B6F

6F767B

Contrast Matrix WCAG 2.1 Contrast

796F7A	918E97	D7B689	FBD0A3	FFF2AC
—	1.5 Fail	2.5 Fail	3.4 AA Large	4.2 AA Large
1.5 Fail	—	1.7 Fail	2.2 Fail	2.8 Fail
2.5 Fail	1.7 Fail	—	1.3 Fail	1.7 Fail
3.4 AA Large	2.2 Fail	1.3 Fail	—	1.3 Fail
4.2 AA Large	2.8 Fail	1.7 Fail	1.3 Fail	—

White BG

4.8AA

3.2AA Large

1.9Fail

1.4Fail

1.1Fail

Black BG

4.4AA Large

6.5AA

10.9AAA

14.7AAA

18.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

757577

909095

C9C894

E8E8AE

F9F9BD

Deuteranopia

757677

909094

CBCD97

EBEEB1

FAFBC1

Tritanopia

787575

919393

D59C9E

F9B6B8

FECACD

Achromatopsia

737373

909090

BBBBBB

D8D8D8

EEEEEE

Shades & Tints Shades & Tints

#796F7A

Dark

Light

#918E97

Dark

Light

#D7B689

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #796f7a;
  --color-2: #918e97;
  --color-3: #d7b689;
  --color-4: #fbd0a3;
  --color-5: #fff2ac;
}

SCSS

$color-1: #796f7a;
$color-2: #918e97;
$color-3: #d7b689;
$color-4: #fbd0a3;
$color-5: #fff2ac;

TAILWIND

colors: {
  'brand-1': '#796f7a',
  'brand-2': '#918e97',
  'brand-3': '#d7b689',
  'brand-4': '#fbd0a3',
  'brand-5': '#fff2ac',
}

RGB Array

[121, 111, 122], [145, 142, 151], [215, 182, 137], [251, 208, 163], [255, 242, 172]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #796F7A, #918E97, #D7B689, #FBD0A3, #FFF2AC 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: #796f7a; --color-2: #918e97; --color-3: #d7b689; --color-4: #fbd0a3; --color-5: #fff2ac. 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