← Back to Editor

#F89C95 · #FBFFF7 · #F5F7CE · #B0CC9E · #588076

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 AppData Visualization

Color Details Color Details

#F89C95

Peach Pink · LightSalmon · Coral Red

HEX
#F89C95
RGB
rgb(248, 156, 149)
HSL
hsl(4, 88%, 78%)
HSB
hsb(4, 40%, 97%)
CMYK
cmyk(0%, 37%, 40%, 3%)
Oklch
oklch(78.4% 0.111 24.6)

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

#FBFFF7

Emerald · Snow · Mint Green

HEX
#FBFFF7
RGB
rgb(251, 255, 247)
HSL
hsl(90, 100%, 98%)
HSB
hsb(90, 3%, 100%)
CMYK
cmyk(2%, 0%, 3%, 0%)
Oklch
oklch(99.5% 0.011 128.6)

Traditional「Emerald」· Paint「Mint Green」· Creative Mint Breeze

#F5F7CE

Fresh Green · Beige · Lemon Cream

HEX
#F5F7CE
RGB
rgb(245, 247, 206)
HSL
hsl(63, 72%, 89%)
HSB
hsb(63, 17%, 97%)
CMYK
cmyk(1%, 0%, 17%, 3%)
Oklch
oklch(96.4% 0.053 109.7)

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

#B0CC9E

Celadon · DarkGray · Apple Green

HEX
#B0CC9E
RGB
rgb(176, 204, 158)
HSL
hsl(97, 31%, 71%)
HSB
hsb(97, 23%, 80%)
CMYK
cmyk(14%, 0%, 23%, 20%)
Oklch
oklch(81.2% 0.070 133.3)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

#588076

Mineral Blue · DimGray · Mint Ice

HEX
#588076
RGB
rgb(88, 128, 118)
HSL
hsl(165, 19%, 42%)
HSB
hsb(165, 31%, 50%)
CMYK
cmyk(31%, 0%, 8%, 50%)
Oklch
oklch(56.7% 0.047 177.2)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F89C95
96F2F8

Analogous

F896C0
F89C95
F8CD96

Triadic

F89C95
96F89C
9C96F8

Split-Comp.

F89C95
96F8CD
96C0F8

Tetradic

F89C95
C0F896
96F2F8
CD96F8

Contrast Matrix WCAG 2.1 Contrast

F89C95
FBFFF7
F5F7CE
B0CC9E
588076
—
2.0
Fail
1.9
Fail
1.2
Fail
2.1
Fail
2.0
Fail
—
1.1
Fail
1.7
Fail
4.4
AA Large
1.9
Fail
1.1
Fail
—
1.6
Fail
4.0
AA Large
1.2
Fail
1.7
Fail
1.6
Fail
—
2.5
Fail
2.1
Fail
4.4
AA Large
4.0
AA Large
2.5
Fail
—
White BG
2.1Fail
1.0Fail
1.1Fail
1.8Fail
4.4AA Large
Black BG
10.2AAA
20.7AAA
19.1AAA
12.0AAA
4.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D0CF97
FDFDF9
F6F6D8
BCBCA9
696A78

Deuteranopia

D6DC97
FDFCF9
F6F6DA
BBB8AC
676479

Tritanopia

F39898
FBFAFB
F5E0E1
B1B2B4
5A7A7B

Achromatopsia

B7B7B7
FDFDFD
F2F2F2
BEBEBE
737373

Shades & Tints Shades & Tints

#F89C95

Dark
Light

#FBFFF7

Dark
Light

#F5F7CE

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f89c95;
  --color-2: #fbfff7;
  --color-3: #f5f7ce;
  --color-4: #b0cc9e;
  --color-5: #588076;
}

SCSS

$color-1: #f89c95;
$color-2: #fbfff7;
$color-3: #f5f7ce;
$color-4: #b0cc9e;
$color-5: #588076;

TAILWIND

colors: {
  'brand-1': '#f89c95',
  'brand-2': '#fbfff7',
  'brand-3': '#f5f7ce',
  'brand-4': '#b0cc9e',
  'brand-5': '#588076',
}

RGB Array

[248, 156, 149], [251, 255, 247], [245, 247, 206], [176, 204, 158], [88, 128, 118]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #F89C95, #FBFFF7, #F5F7CE, #B0CC9E, #588076 is ideal for: social media posters, mobile apps, e-commerce promos, health products, baby brands, fresh-style blogs, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. 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: #f89c95; --color-2: #fbfff7; --color-3: #f5f7ce; --color-4: #b0cc9e; --color-5: #588076. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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