#F7DBA9 + #D7BD8A + #BDAF8C + #996861 + #FFA188 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F7DBA9

Goose Yellow · Wheat · Peach Orange

HEX

#F7DBA9

RGB

rgb(247, 219, 169)

HSL

hsl(38, 83%, 82%)

HSB

hsb(38, 32%, 97%)

CMYK

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

Oklch

oklch(90.3% 0.072 81.9)

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

#D7BD8A

Ginger · BurlyWood · Sunflower

HEX

#D7BD8A

RGB

rgb(215, 189, 138)

HSL

hsl(40, 49%, 69%)

HSB

hsb(40, 36%, 84%)

CMYK

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

Oklch

oklch(80.8% 0.073 83.9)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#BDAF8C

Ginger · Tan · Sunflower

HEX

#BDAF8C

RGB

rgb(189, 175, 140)

HSL

hsl(43, 27%, 65%)

HSB

hsb(43, 26%, 74%)

CMYK

cmyk(0%, 7%, 26%, 26%)

Oklch

oklch(75.7% 0.050 88.8)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#996861

Crimson · Gray · Passion Red

HEX

#996861

RGB

rgb(153, 104, 97)

HSL

hsl(8, 22%, 49%)

HSB

hsb(8, 37%, 60%)

CMYK

cmyk(0%, 32%, 37%, 40%)

Oklch

oklch(56.7% 0.065 28.3)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

#FFA188

Peach Pink · LightSalmon · Coral Red

HEX

#FFA188

RGB

rgb(255, 161, 136)

HSL

hsl(13, 100%, 77%)

HSB

hsb(13, 47%, 100%)

CMYK

cmyk(0%, 37%, 47%, 0%)

Oklch

oklch(79.8% 0.118 35.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F7DBA9

ABC7F7

Analogous

F7B5AB

F7DBA9

EDF7AB

Triadic

F7DBA9

ABF7DB

DBABF7

Split-Comp.

F7DBA9

ABEDF7

B5ABF7

Tetradic

F7DBA9

ABF7B5

ABC7F7

F7ABED

Contrast Matrix WCAG 2.1 Contrast

F7DBA9	D7BD8A	BDAF8C	996861	FFA188
—	1.4 Fail	1.6 Fail	3.5 AA Large	1.5 Fail
1.4 Fail	—	1.2 Fail	2.6 Fail	1.1 Fail
1.6 Fail	1.2 Fail	—	2.1 Fail	1.1 Fail
3.5 AA Large	2.6 Fail	2.1 Fail	—	2.4 Fail
1.5 Fail	1.1 Fail	1.1 Fail	2.4 Fail	—

White BG

1.3Fail

1.8Fail

2.2Fail

4.7AA

2.0Fail

Black BG

15.7AAA

11.5AAA

9.7AAA

4.5AA

10.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

EBEBB5

CCCC96

B7B794

848363

D6D58E

Deuteranopia

EDEFB8

CDCF99

B8B997

878A63

DCE390

Tritanopia

F6BFC1

D6A0A2

BC9B9D

976464

FA9394

Achromatopsia

DEDEDE

BFBFBF

AFAFAF

767676

BABABA

Shades & Tints Shades & Tints

#F7DBA9

Dark

Light

#D7BD8A

Dark

Light

#BDAF8C

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f7dba9;
  --color-2: #d7bd8a;
  --color-3: #bdaf8c;
  --color-4: #996861;
  --color-5: #ffa188;
}

SCSS

$color-1: #f7dba9;
$color-2: #d7bd8a;
$color-3: #bdaf8c;
$color-4: #996861;
$color-5: #ffa188;

TAILWIND

colors: {
  'brand-1': '#f7dba9',
  'brand-2': '#d7bd8a',
  'brand-3': '#bdaf8c',
  'brand-4': '#996861',
  'brand-5': '#ffa188',
}

RGB Array

[247, 219, 169], [215, 189, 138], [189, 175, 140], [153, 104, 97], [255, 161, 136]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F7DBA9, #D7BD8A, #BDAF8C, #996861, #FFA188 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: #f7dba9; --color-2: #d7bd8a; --color-3: #bdaf8c; --color-4: #996861; --color-5: #ffa188. 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