← Back to Editor

#242817 · #CE7E05 · #7AC0A8 · #8AEAFF · #FEF9C1

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

#242817

Grass Green · Black · Dark Green

HEX
#242817
RGB
rgb(36, 40, 23)
HSL
hsl(74, 27%, 12%)
HSB
hsb(74, 43%, 16%)
CMYK
cmyk(10%, 0%, 42%, 84%)
Oklch
oklch(26.7% 0.030 119.3)

Traditional「Grass Green」· Paint「Dark Green」· Creative Blush Sunrise

#CE7E05

Ochre · DarkGoldenRod · Amber Brown

HEX
#CE7E05
RGB
rgb(206, 126, 5)
HSL
hsl(36, 95%, 41%)
HSB
hsb(36, 98%, 81%)
CMYK
cmyk(0%, 39%, 98%, 19%)
Oklch
oklch(66.3% 0.146 66.4)

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

#7AC0A8

Jade · MediumAquaMarine · Apple Green

HEX
#7AC0A8
RGB
rgb(122, 192, 168)
HSL
hsl(159, 36%, 62%)
HSB
hsb(159, 36%, 75%)
CMYK
cmyk(36%, 0%, 13%, 25%)
Oklch
oklch(75.4% 0.079 170.4)

Traditional「Jade」· Paint「Apple Green」· Creative Arctic Pool

#8AEAFF

Sky Blue · LightSkyBlue · Glacier Blue

HEX
#8AEAFF
RGB
rgb(138, 234, 255)
HSL
hsl(191, 100%, 77%)
HSB
hsb(191, 46%, 100%)
CMYK
cmyk(46%, 8%, 0%, 0%)
Oklch
oklch(88.5% 0.095 213.3)

Traditional「Sky Blue」· Paint「Glacier Blue」· Creative Arctic Pool

#FEF9C1

Fresh Green · Bisque · Lemon Cream

HEX
#FEF9C1
RGB
rgb(254, 249, 193)
HSL
hsl(55, 97%, 88%)
HSB
hsb(55, 24%, 100%)
CMYK
cmyk(0%, 2%, 24%, 0%)
Oklch
oklch(97.3% 0.072 103.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

242817
1A1627

Analogous

272216
242817
1B2716

Triadic

242817
162327
271623

Split-Comp.

242817
161B27
221627

Tetradic

242817
162722
1A1627
27161B

Contrast Matrix WCAG 2.1 Contrast

242817
CE7E05
7AC0A8
8AEAFF
FEF9C1
—
4.8
AA
7.1
AAA
11.0
AAA
14.0
AAA
4.8
AA
—
1.5
Fail
2.3
Fail
3.0
Fail
7.1
AAA
1.5
Fail
—
1.5
Fail
2.0
Fail
11.0
AAA
2.3
Fail
1.5
Fail
—
1.3
Fail
14.0
AAA
3.0
Fail
2.0
Fail
1.3
Fail
—
White BG
15.1AAA
3.2AA Large
2.1Fail
1.4Fail
1.1Fail
Black BG
1.4Fail
6.6AA
9.9AAA
15.3AAA
19.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

26261B
ABAB22
9899AE
B4B4FA
FCFCCF

Deuteranopia

26251C
B0B629
948FAF
AEA7F9
FCFDD2

Tritanopia

241E1F
CA393E
7EB2B3
8FF6F5
FED9DC

Achromatopsia

252525
888888
A8A8A8
D0D0D0
F4F4F4

Shades & Tints Shades & Tints

#242817

Dark
Light

#CE7E05

Dark
Light

#7AC0A8

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #242817;
  --color-2: #ce7e05;
  --color-3: #7ac0a8;
  --color-4: #8aeaff;
  --color-5: #fef9c1;
}

SCSS

$color-1: #242817;
$color-2: #ce7e05;
$color-3: #7ac0a8;
$color-4: #8aeaff;
$color-5: #fef9c1;

TAILWIND

colors: {
  'brand-1': '#242817',
  'brand-2': '#ce7e05',
  'brand-3': '#7ac0a8',
  'brand-4': '#8aeaff',
  'brand-5': '#fef9c1',
}

RGB Array

[36, 40, 23], [206, 126, 5], [122, 192, 168], [138, 234, 255], [254, 249, 193]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #242817, #CE7E05, #7AC0A8, #8AEAFF, #FEF9C1 is ideal for: social media posters, mobile apps, e-commerce promos, 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: #242817; --color-2: #ce7e05; --color-3: #7ac0a8; --color-4: #8aeaff; --color-5: #fef9c1. 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. 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