← Back to Editor

#AF1F00 · #D48759 · #B3A73B · #FFFF94 · #FBFFC8

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

#AF1F00

Vermilion · FireBrick · Wine Red

HEX
#AF1F00
RGB
rgb(175, 31, 0)
HSL
hsl(11, 100%, 34%)
HSB
hsb(11, 100%, 69%)
CMYK
cmyk(0%, 82%, 100%, 31%)
Oklch
oklch(48.7% 0.182 32.5)

Traditional「Vermilion」· Paint「Wine Red」· Creative Blush Sunrise

#D48759

Tangerine · DarkSalmon · Warm Sun

HEX
#D48759
RGB
rgb(212, 135, 89)
HSL
hsl(22, 59%, 59%)
HSB
hsb(22, 58%, 83%)
CMYK
cmyk(0%, 36%, 58%, 17%)
Oklch
oklch(69.4% 0.113 50.9)

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

#B3A73B

Autumn Sage · GoldenRod · Honey Gold

HEX
#B3A73B
RGB
rgb(179, 167, 59)
HSL
hsl(54, 50%, 47%)
HSB
hsb(54, 67%, 70%)
CMYK
cmyk(0%, 7%, 67%, 30%)
Oklch
oklch(71.8% 0.127 102.9)

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

#FFFF94

Fresh Green · Khaki · Lemon Cream

HEX
#FFFF94
RGB
rgb(255, 255, 148)
HSL
hsl(60, 100%, 79%)
HSB
hsb(60, 42%, 100%)
CMYK
cmyk(0%, 0%, 42%, 0%)
Oklch
oklch(97.8% 0.130 108.6)

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

#FBFFC8

Fresh Green · Beige · Lemon Cream

HEX
#FBFFC8
RGB
rgb(251, 255, 200)
HSL
hsl(64, 100%, 89%)
HSB
hsb(64, 22%, 100%)
CMYK
cmyk(2%, 0%, 22%, 0%)
Oklch
oklch(98.4% 0.071 111.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

AF1F00
008EAD

Analogous

AD0037
AF1F00
AD7600

Triadic

AF1F00
00AD20
2000AD

Split-Comp.

AF1F00
00AD76
0037AD

Tetradic

AF1F00
37AD00
008EAD
7600AD

Contrast Matrix WCAG 2.1 Contrast

AF1F00
D48759
B3A73B
FFFF94
FBFFC8
—
2.5
Fail
2.8
Fail
6.6
AA
6.7
AA
2.5
Fail
—
1.1
Fail
2.7
Fail
2.7
Fail
2.8
Fail
1.1
Fail
—
2.3
Fail
2.4
Fail
6.6
AA
2.7
Fail
2.3
Fail
—
1.0
Fail
6.7
AA
2.7
Fail
2.4
Fail
1.0
Fail
—
White BG
7.0AA
2.8Fail
2.5Fail
1.1Fail
1.0Fail
Black BG
3.0AA Large
7.4AAA
8.5AAA
20.0AAA
20.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

716F08
B3B264
AEAE55
FFFFAE
FDFDD5

Deuteranopia

798409
B7BD67
AFAF5B
FFFFB4
FDFCD9

Tritanopia

A80D0F
D06D6F
B26A6E
FFC2C7
FBE0E2

Achromatopsia

474747
999999
9E9E9E
F3F3F3
F8F8F8

Shades & Tints Shades & Tints

#AF1F00

Dark
Light

#D48759

Dark
Light

#B3A73B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #af1f00;
  --color-2: #d48759;
  --color-3: #b3a73b;
  --color-4: #ffff94;
  --color-5: #fbffc8;
}

SCSS

$color-1: #af1f00;
$color-2: #d48759;
$color-3: #b3a73b;
$color-4: #ffff94;
$color-5: #fbffc8;

TAILWIND

colors: {
  'brand-1': '#af1f00',
  'brand-2': '#d48759',
  'brand-3': '#b3a73b',
  'brand-4': '#ffff94',
  'brand-5': '#fbffc8',
}

RGB Array

[175, 31, 0], [212, 135, 89], [179, 167, 59], [255, 255, 148], [251, 255, 200]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #AF1F00, #D48759, #B3A73B, #FFFF94, #FBFFC8 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: #af1f00; --color-2: #d48759; --color-3: #b3a73b; --color-4: #ffff94; --color-5: #fbffc8. 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