#F7D0A7 + #F29F99 + #BD8DA3 + #8997B1 + #9BAAAF · nature - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarmCool

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#F7D0A7

Goose Yellow · Wheat · Peach Orange

HEX

#F7D0A7

RGB

rgb(247, 208, 167)

HSL

hsl(31, 83%, 81%)

HSB

hsb(31, 32%, 97%)

CMYK

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

Oklch

oklch(88.1% 0.069 68.1)

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

#F29F99

Peach Pink · DarkSalmon · Coral Red

HEX

#F29F99

RGB

rgb(242, 159, 153)

HSL

hsl(4, 77%, 77%)

HSB

hsb(4, 37%, 95%)

CMYK

cmyk(0%, 34%, 37%, 5%)

Oklch

oklch(78.3% 0.100 24.1)

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

#BD8DA3

Rouge · DarkGray · Rose Pink

HEX

#BD8DA3

RGB

rgb(189, 141, 163)

HSL

hsl(333, 27%, 65%)

HSB

hsb(333, 25%, 74%)

CMYK

cmyk(0%, 25%, 14%, 26%)

Oklch

oklch(69.6% 0.065 349.8)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

#8997B1

Azure · LightSlateGray · Cobalt Blue

HEX

#8997B1

RGB

rgb(137, 151, 177)

HSL

hsl(219, 20%, 62%)

HSB

hsb(219, 23%, 69%)

CMYK

cmyk(23%, 15%, 0%, 31%)

Oklch

oklch(67.4% 0.042 262.8)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

#9BAAAF

Sky Blue · DarkGray · Lake Green

HEX

#9BAAAF

RGB

rgb(155, 170, 175)

HSL

hsl(195, 11%, 65%)

HSB

hsb(195, 11%, 69%)

CMYK

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

Oklch

oklch(72.8% 0.018 219.7)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F7D0A7

A6CDF7

Analogous

F7A8A6

F7D0A7

F5F7A6

Triadic

F7D0A7

A6F7D0

D0A6F7

Split-Comp.

F7D0A7

A6F5F7

A8A6F7

Tetradic

F7D0A7

A6F7A8

A6CDF7

F7A6F5

Contrast Matrix WCAG 2.1 Contrast

F7D0A7	F29F99	BD8DA3	8997B1	9BAAAF
—	1.4 Fail	1.9 Fail	2.0 Fail	1.7 Fail
1.4 Fail	—	1.4 Fail	1.4 Fail	1.2 Fail
1.9 Fail	1.4 Fail	—	1.1 Fail	1.2 Fail
2.0 Fail	1.4 Fail	1.1 Fail	—	1.2 Fail
1.7 Fail	1.2 Fail	1.2 Fail	1.2 Fail	—

White BG

1.4Fail

2.1Fail

2.8Fail

2.9Fail

2.4Fail

Black BG

14.5AAA

10.2AAA

7.5AAA

7.1AAA

8.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E6E6B1

CECD9A

A8A89E

8F8FAB

A1A2AE

Deuteranopia

E8EBB3

D3D99B

ABAF9C

8E8DA9

A1A0AE

Tritanopia

F5B9BA

EE9C9C

BB9999

8AA6A5

9CADAD

Achromatopsia

D7D7D7

B7B7B7

9E9E9E

969696

A6A6A6

Shades & Tints Shades & Tints

#F7D0A7

Dark

Light

#F29F99

Dark

Light

#BD8DA3

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f7d0a7;
  --color-2: #f29f99;
  --color-3: #bd8da3;
  --color-4: #8997b1;
  --color-5: #9baaaf;
}

SCSS

$color-1: #f7d0a7;
$color-2: #f29f99;
$color-3: #bd8da3;
$color-4: #8997b1;
$color-5: #9baaaf;

TAILWIND

colors: {
  'brand-1': '#f7d0a7',
  'brand-2': '#f29f99',
  'brand-3': '#bd8da3',
  'brand-4': '#8997b1',
  'brand-5': '#9baaaf',
}

RGB Array

[247, 208, 167], [242, 159, 153], [189, 141, 163], [137, 151, 177], [155, 170, 175]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #F7D0A7, #F29F99, #BD8DA3, #8997B1, #9BAAAF 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: #f7d0a7; --color-2: #f29f99; --color-3: #bd8da3; --color-4: #8997b1; --color-5: #9baaaf. 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 nature-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