← Back to Editor

#FFE53D · #C9C412 · #ABB70F · #0E2E23 · #44210D

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

#FFE53D

Fresh Green · Gold · Sunflower

HEX
#FFE53D
RGB
rgb(255, 229, 61)
HSL
hsl(52, 100%, 62%)
HSB
hsb(52, 76%, 100%)
CMYK
cmyk(0%, 10%, 76%, 0%)
Oklch
oklch(91.6% 0.175 100.0)

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

#C9C412

Autumn Sage · GoldenRod · Honey Gold

HEX
#C9C412
RGB
rgb(201, 196, 18)
HSL
hsl(58, 84%, 43%)
HSB
hsb(58, 91%, 79%)
CMYK
cmyk(0%, 2%, 91%, 21%)
Oklch
oklch(79.9% 0.169 107.8)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#ABB70F

Autumn Sage · DarkGoldenRod · Honey Gold

HEX
#ABB70F
RGB
rgb(171, 183, 15)
HSL
hsl(64, 85%, 39%)
HSB
hsb(64, 92%, 72%)
CMYK
cmyk(7%, 0%, 92%, 28%)
Oklch
oklch(74.5% 0.165 114.4)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#0E2E23

Mineral Blue · Black · Dark Green

HEX
#0E2E23
RGB
rgb(14, 46, 35)
HSL
hsl(159, 53%, 12%)
HSB
hsb(159, 70%, 18%)
CMYK
cmyk(70%, 0%, 24%, 82%)
Oklch
oklch(27.3% 0.043 167.6)

Traditional「Mineral Blue」· Paint「Dark Green」· Creative Blush Sunrise

#44210D

Tangerine · Maroon · Cinnamon

HEX
#44210D
RGB
rgb(68, 33, 13)
HSL
hsl(22, 68%, 16%)
HSB
hsb(22, 81%, 27%)
CMYK
cmyk(0%, 51%, 81%, 73%)
Oklch
oklch(29.2% 0.062 48.3)

Traditional「Tangerine」· Paint「Cinnamon」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFE53D
3D57FF

Analogous

FF843D
FFE53D
B8FF3D

Triadic

FFE53D
3DFFE5
E53DFF

Split-Comp.

FFE53D
3DB8FF
843DFF

Tetradic

FFE53D
3DFF84
3D57FF
FF3DB8

Contrast Matrix WCAG 2.1 Contrast

FFE53D
C9C412
ABB70F
0E2E23
44210D
—
1.5
Fail
1.7
Fail
11.5
AAA
11.2
AAA
1.5
Fail
—
1.2
Fail
7.9
AAA
7.8
AAA
1.7
Fail
1.2
Fail
—
6.6
AA
6.5
AA
11.5
AAA
7.9
AAA
6.6
AA
—
1.0
Fail
11.2
AAA
7.8
AAA
6.5
AA
1.0
Fail
—
White BG
1.3Fail
1.8Fail
2.2Fail
14.6AAA
14.3AAA
Black BG
16.5AAA
11.4AAA
9.5AAA
1.4Fail
1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

F4F466
C7C73D
B0B038
1C1C26
353512

Deuteranopia

F5F76F
C7C847
B0AF41
1A1826
373913

Tritanopia

FE868D
C95F67
AC585F
102828
421617

Achromatopsia

DADADA
B1B1B1
A0A0A0
232323
292929

Shades & Tints Shades & Tints

#FFE53D

Dark
Light

#C9C412

Dark
Light

#ABB70F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ffe53d;
  --color-2: #c9c412;
  --color-3: #abb70f;
  --color-4: #0e2e23;
  --color-5: #44210d;
}

SCSS

$color-1: #ffe53d;
$color-2: #c9c412;
$color-3: #abb70f;
$color-4: #0e2e23;
$color-5: #44210d;

TAILWIND

colors: {
  'brand-1': '#ffe53d',
  'brand-2': '#c9c412',
  'brand-3': '#abb70f',
  'brand-4': '#0e2e23',
  'brand-5': '#44210d',
}

RGB Array

[255, 229, 61], [201, 196, 18], [171, 183, 15], [14, 46, 35], [68, 33, 13]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #FFE53D, #C9C412, #ABB70F, #0E2E23, #44210D is ideal for: social media posters, mobile apps, e-commerce promos, tech websites, dark mode UIs, game UIs, 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: #ffe53d; --color-2: #c9c412; --color-3: #abb70f; --color-4: #0e2e23; --color-5: #44210d. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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