← Back to Editor

#FFCC00 · #FAFBDF · #336600 · #498013 · #679936

nature

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

VibrantFreshWarm

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Landing PageMobile AppData Visualization

Color Details Color Details

#FFCC00

Ochre · Gold · Honey Gold

HEX
#FFCC00
RGB
rgb(255, 204, 0)
HSL
hsl(48, 100%, 50%)
HSB
hsb(48, 100%, 100%)
CMYK
cmyk(0%, 20%, 100%, 0%)
Oklch
oklch(86.5% 0.177 90.4)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#FAFBDF

Fresh Green · LightYellow · Lemon Cream

HEX
#FAFBDF
RGB
rgb(250, 251, 223)
HSL
hsl(62, 78%, 93%)
HSB
hsb(62, 11%, 98%)
CMYK
cmyk(0%, 0%, 11%, 2%)
Oklch
oklch(98.0% 0.037 108.7)

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

#336600

Pine Green · DarkGreen · Dark Green

HEX
#336600
RGB
rgb(51, 102, 0)
HSL
hsl(90, 100%, 20%)
HSB
hsb(90, 100%, 40%)
CMYK
cmyk(50%, 0%, 100%, 60%)
Oklch
oklch(45.6% 0.133 134.8)

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

#498013

Pine Green · DarkOliveGreen · Forest Green

HEX
#498013
RGB
rgb(73, 128, 19)
HSL
hsl(90, 74%, 29%)
HSB
hsb(90, 85%, 50%)
CMYK
cmyk(43%, 0%, 85%, 50%)
Oklch
oklch(54.1% 0.146 133.8)

Traditional「Pine Green」· Paint「Forest Green」· Creative Blush Sunrise

#679936

Celadon · DarkOliveGreen · Olive Green

HEX
#679936
RGB
rgb(103, 153, 54)
HSL
hsl(90, 48%, 41%)
HSB
hsb(90, 65%, 60%)
CMYK
cmyk(33%, 0%, 65%, 40%)
Oklch
oklch(62.6% 0.141 132.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFCC00
0033FF

Analogous

FF4C00
FFCC00
B3FF00

Triadic

FFCC00
00FFCC
CC00FF

Split-Comp.

FFCC00
00B3FF
4C00FF

Tetradic

FFCC00
00FF4C
0033FF
FF00B3

Contrast Matrix WCAG 2.1 Contrast

FFCC00
FAFBDF
336600
498013
679936
—
1.4
Fail
4.6
AA
3.2
AA Large
2.2
Fail
1.4
Fail
—
6.6
AA
4.5
AA
3.2
AA Large
4.6
AA
6.6
AA
—
1.4
Fail
2.0
Fail
3.2
AA Large
4.5
AA
1.4
Fail
—
1.4
Fail
2.2
Fail
3.2
AA Large
2.0
Fail
1.4
Fail
—
White BG
1.5Fail
1.1Fail
6.9AA
4.8AA
3.4AA Large
Black BG
13.9AAA
19.9AAA
3.0AA Large
4.4AA Large
6.2AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E9E831
FAFAE6
494A19
61612D
7D7D4E

Deuteranopia

ECF03D
FAFAE7
46421F
5E5A34
7A7654

Tritanopia

FC5861
FAEBEC
362C30
4C4247
6A6165

Achromatopsia

C4C4C4
F8F8F8
4B4B4B
636363
7F7F7F

Shades & Tints Shades & Tints

#FFCC00

Dark
Light

#FAFBDF

Dark
Light

#336600

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ffcc00;
  --color-2: #fafbdf;
  --color-3: #336600;
  --color-4: #498013;
  --color-5: #679936;
}

SCSS

$color-1: #ffcc00;
$color-2: #fafbdf;
$color-3: #336600;
$color-4: #498013;
$color-5: #679936;

TAILWIND

colors: {
  'brand-1': '#ffcc00',
  'brand-2': '#fafbdf',
  'brand-3': '#336600',
  'brand-4': '#498013',
  'brand-5': '#679936',
}

RGB Array

[255, 204, 0], [250, 251, 223], [51, 102, 0], [73, 128, 19], [103, 153, 54]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #FFCC00, #FAFBDF, #336600, #498013, #679936 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: #ffcc00; --color-2: #fafbdf; --color-3: #336600; --color-4: #498013; --color-5: #679936. 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