← Back to Editor

#F26B7A · #F0F2DC · #D9EB52 · #8AC7DE · #87796F

nature

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarmCool

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlogData Visualization

Color Details Color Details

#F26B7A

Peach Pink · LightCoral · Coral Red

HEX
#F26B7A
RGB
rgb(242, 107, 122)
HSL
hsl(353, 84%, 68%)
HSB
hsb(353, 56%, 95%)
CMYK
cmyk(0%, 56%, 50%, 5%)
Oklch
oklch(69.6% 0.166 15.7)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#F0F2DC

Fresh Green · Beige · Lemon Cream

HEX
#F0F2DC
RGB
rgb(240, 242, 220)
HSL
hsl(65, 46%, 91%)
HSB
hsb(65, 9%, 95%)
CMYK
cmyk(1%, 0%, 9%, 5%)
Oklch
oklch(95.4% 0.029 111.2)

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

#D9EB52

Fresh Green · GreenYellow · Sunflower

HEX
#D9EB52
RGB
rgb(217, 235, 82)
HSL
hsl(67, 79%, 62%)
HSB
hsb(67, 65%, 92%)
CMYK
cmyk(8%, 0%, 65%, 8%)
Oklch
oklch(89.9% 0.174 115.7)

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

#8AC7DE

Sky Blue · SkyBlue · Lake Green

HEX
#8AC7DE
RGB
rgb(138, 199, 222)
HSL
hsl(196, 56%, 71%)
HSB
hsb(196, 38%, 87%)
CMYK
cmyk(38%, 10%, 0%, 13%)
Oklch
oklch(79.6% 0.070 223.5)

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

#87796F

Tangerine · Gray · Amber Brown

HEX
#87796F
RGB
rgb(135, 121, 111)
HSL
hsl(25, 10%, 48%)
HSB
hsb(25, 18%, 53%)
CMYK
cmyk(0%, 10%, 18%, 47%)
Oklch
oklch(58.6% 0.023 57.8)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F26B7A
69F2E2

Analogous

F269BD
F26B7A
F29D69

Triadic

F26B7A
79F269
6979F2

Split-Comp.

F26B7A
69F29D
69BDF2

Tetradic

F26B7A
BDF269
69F2E2
9D69F2

Contrast Matrix WCAG 2.1 Contrast

F26B7A
F0F2DC
D9EB52
8AC7DE
87796F
—
2.6
Fail
2.2
Fail
1.6
Fail
1.4
Fail
2.6
Fail
—
1.2
Fail
1.6
Fail
3.7
AA Large
2.2
Fail
1.2
Fail
—
1.4
Fail
3.2
AA Large
1.6
Fail
1.6
Fail
1.4
Fail
—
2.3
Fail
1.4
Fail
3.7
AA Large
3.2
AA Large
2.3
Fail
—
White BG
2.9Fail
1.1Fail
1.3Fail
1.9Fail
4.2AA Large
Black BG
7.2AAA
18.4AAA
16.0AAA
11.3AAA
5.0AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B8B676
F1F1E1
E1E177
A4A5D8
818171

Deuteranopia

BFC976
F1F1E3
E0DE80
A19CD7
828372

Tritanopia

EB7473
F0E6E6
DA949B
8DD4D3
867374

Achromatopsia

959595
EFEFEF
D4D4D4
B7B7B7
7C7C7C

Shades & Tints Shades & Tints

#F26B7A

Dark
Light

#F0F2DC

Dark
Light

#D9EB52

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f26b7a;
  --color-2: #f0f2dc;
  --color-3: #d9eb52;
  --color-4: #8ac7de;
  --color-5: #87796f;
}

SCSS

$color-1: #f26b7a;
$color-2: #f0f2dc;
$color-3: #d9eb52;
$color-4: #8ac7de;
$color-5: #87796f;

TAILWIND

colors: {
  'brand-1': '#f26b7a',
  'brand-2': '#f0f2dc',
  'brand-3': '#d9eb52',
  'brand-4': '#8ac7de',
  'brand-5': '#87796f',
}

RGB Array

[242, 107, 122], [240, 242, 220], [217, 235, 82], [138, 199, 222], [135, 121, 111]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #F26B7A, #F0F2DC, #D9EB52, #8AC7DE, #87796F is ideal for: health products, baby brands, fresh-style blogs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #f26b7a; --color-2: #f0f2dc; --color-3: #d9eb52; --color-4: #8ac7de; --color-5: #87796f. 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 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