← Back to Editor

#F87456 · #F09862 · #BE9F6A · #7A8E6C · #626765

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 WebsiteBlog

Color Details Color Details

#F87456

Peach Pink · Coral · Coral Red

HEX
#F87456
RGB
rgb(248, 116, 86)
HSL
hsl(11, 92%, 65%)
HSB
hsb(11, 65%, 97%)
CMYK
cmyk(0%, 53%, 65%, 3%)
Oklch
oklch(71.0% 0.168 34.2)

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

#F09862

Apricot · SandyBrown · Warm Sun

HEX
#F09862
RGB
rgb(240, 152, 98)
HSL
hsl(23, 83%, 66%)
HSB
hsb(23, 59%, 94%)
CMYK
cmyk(0%, 37%, 59%, 6%)
Oklch
oklch(75.8% 0.127 51.4)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#BE9F6A

Ginger · Tan · Warm Sun

HEX
#BE9F6A
RGB
rgb(190, 159, 106)
HSL
hsl(38, 39%, 58%)
HSB
hsb(38, 44%, 75%)
CMYK
cmyk(0%, 16%, 44%, 25%)
Oklch
oklch(71.8% 0.079 80.4)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#7A8E6C

Celadon · Gray · Olive Green

HEX
#7A8E6C
RGB
rgb(122, 142, 108)
HSL
hsl(95, 14%, 49%)
HSB
hsb(95, 24%, 56%)
CMYK
cmyk(14%, 0%, 24%, 44%)
Oklch
oklch(62.1% 0.055 132.7)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

#626765

Ink Gray · DimGray · Charcoal

HEX
#626765
RGB
rgb(98, 103, 101)
HSL
hsl(156, 2%, 39%)
HSB
hsb(156, 5%, 40%)
CMYK
cmyk(5%, 0%, 2%, 60%)
Oklch
oklch(50.9% 0.007 170.2)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F87456
54DAF8

Analogous

F85488
F87456
F8C454

Triadic

F87456
54F872
7254F8

Split-Comp.

F87456
54F8C4
5488F8

Tetradic

F87456
88F854
54DAF8
C454F8

Contrast Matrix WCAG 2.1 Contrast

F87456
F09862
BE9F6A
7A8E6C
626765
—
1.2
Fail
1.1
Fail
1.3
Fail
2.1
Fail
1.2
Fail
—
1.1
Fail
1.6
Fail
2.6
Fail
1.1
Fail
1.1
Fail
—
1.4
Fail
2.3
Fail
1.3
Fail
1.6
Fail
1.4
Fail
—
1.6
Fail
2.1
Fail
2.6
Fail
2.3
Fail
1.6
Fail
—
White BG
2.8Fail
2.2Fail
2.5Fail
3.6AA Large
5.8AA
Black BG
7.6AAA
9.4AAA
8.4AAA
5.9AA
3.6AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

BFBE5D
CAC96F
B1B077
838374
646465

Deuteranopia

C7D05F
CFD672
B2B57A
828076
646466

Tritanopia

F16364
EC797C
BC8183
7B7B7C
626666

Achromatopsia

989898
ACACAC
A2A2A2
848484
656565

Shades & Tints Shades & Tints

#F87456

Dark
Light

#F09862

Dark
Light

#BE9F6A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f87456;
  --color-2: #f09862;
  --color-3: #be9f6a;
  --color-4: #7a8e6c;
  --color-5: #626765;
}

SCSS

$color-1: #f87456;
$color-2: #f09862;
$color-3: #be9f6a;
$color-4: #7a8e6c;
$color-5: #626765;

TAILWIND

colors: {
  'brand-1': '#f87456',
  'brand-2': '#f09862',
  'brand-3': '#be9f6a',
  'brand-4': '#7a8e6c',
  'brand-5': '#626765',
}

RGB Array

[248, 116, 86], [240, 152, 98], [190, 159, 106], [122, 142, 108], [98, 103, 101]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #F87456, #F09862, #BE9F6A, #7A8E6C, #626765 is ideal for: corporate websites, product showcases, portfolios. 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: #f87456; --color-2: #f09862; --color-3: #be9f6a; --color-4: #7a8e6c; --color-5: #626765. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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