← Back to Editor

#8BA9AB · #C7BB73 · #FCC37E · #F4E5BE · #FDF9ED

nature

A 5-color nature palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

VibrantFreshWarmCool

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Landing PageMobile App

Color Details Color Details

#8BA9AB

Sky Blue · DarkGray · Lake Green

HEX
#8BA9AB
RGB
rgb(139, 169, 171)
HSL
hsl(184, 16%, 61%)
HSB
hsb(184, 19%, 67%)
CMYK
cmyk(19%, 1%, 0%, 33%)
Oklch
oklch(71.3% 0.033 201.4)

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

#C7BB73

Fresh Green · Tan · Sunflower

HEX
#C7BB73
RGB
rgb(199, 187, 115)
HSL
hsl(51, 43%, 62%)
HSB
hsb(51, 42%, 78%)
CMYK
cmyk(0%, 6%, 42%, 22%)
Oklch
oklch(78.6% 0.094 100.0)

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

#FCC37E

Goose Yellow · BurlyWood · Warm Sun

HEX
#FCC37E
RGB
rgb(252, 195, 126)
HSL
hsl(33, 95%, 74%)
HSB
hsb(33, 50%, 99%)
CMYK
cmyk(0%, 23%, 50%, 1%)
Oklch
oklch(85.4% 0.108 70.9)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

#F4E5BE

Goose Yellow · Bisque · Lemon Cream

HEX
#F4E5BE
RGB
rgb(244, 229, 190)
HSL
hsl(43, 71%, 85%)
HSB
hsb(43, 22%, 96%)
CMYK
cmyk(0%, 6%, 22%, 4%)
Oklch
oklch(92.4% 0.053 89.5)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#FDF9ED

Goose Yellow · SeaShell · Lemon Cream

HEX
#FDF9ED
RGB
rgb(253, 249, 237)
HSL
hsl(45, 80%, 96%)
HSB
hsb(45, 6%, 99%)
CMYK
cmyk(0%, 2%, 6%, 1%)
Oklch
oklch(98.2% 0.016 91.5)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8BA9AB
AB8E8C

Analogous

8CAB9E
8BA9AB
8C99AB

Triadic

8BA9AB
AB8CA9
A9AB8C

Split-Comp.

8BA9AB
AB8C99
AB9E8C

Tetradic

8BA9AB
9E8CAB
AB8E8C
99AB8C

Contrast Matrix WCAG 2.1 Contrast

8BA9AB
C7BB73
FCC37E
F4E5BE
FDF9ED
—
1.3
Fail
1.6
Fail
2.0
Fail
2.4
Fail
1.3
Fail
—
1.2
Fail
1.6
Fail
1.8
Fail
1.6
Fail
1.2
Fail
—
1.3
Fail
1.5
Fail
2.0
Fail
1.6
Fail
1.3
Fail
—
1.2
Fail
2.4
Fail
1.8
Fail
1.5
Fail
1.2
Fail
—
White BG
2.5Fail
1.9Fail
1.6Fail
1.3Fail
1.1Fail
Black BG
8.4AAA
10.8AAA
13.2AAA
16.8AAA
19.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9898AB
C2C284
E3E38F
EEEDC7
FBFBF0

Deuteranopia

9694AA
C3C389
E7EB93
EEF0CA
FCFCF1

Tritanopia

8CAAAA
C69295
F99C9F
F3CFD1
FDF2F3

Achromatopsia

A0A0A0
B6B6B6
CCCCCC
E5E5E5
F9F9F9

Shades & Tints Shades & Tints

#8BA9AB

Dark
Light

#C7BB73

Dark
Light

#FCC37E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8ba9ab;
  --color-2: #c7bb73;
  --color-3: #fcc37e;
  --color-4: #f4e5be;
  --color-5: #fdf9ed;
}

SCSS

$color-1: #8ba9ab;
$color-2: #c7bb73;
$color-3: #fcc37e;
$color-4: #f4e5be;
$color-5: #fdf9ed;

TAILWIND

colors: {
  'brand-1': '#8ba9ab',
  'brand-2': '#c7bb73',
  'brand-3': '#fcc37e',
  'brand-4': '#f4e5be',
  'brand-5': '#fdf9ed',
}

RGB Array

[139, 169, 171], [199, 187, 115], [252, 195, 126], [244, 229, 190], [253, 249, 237]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #8BA9AB, #C7BB73, #FCC37E, #F4E5BE, #FDF9ED is ideal for: social media posters, mobile apps, e-commerce promos, health products, baby brands, fresh-style blogs. Vivid colors effectively attract user attention. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #8ba9ab; --color-2: #c7bb73; --color-3: #fcc37e; --color-4: #f4e5be; --color-5: #fdf9ed. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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