← Back to Editor

#171813 · #FBF9C0 · #FDAA9F · #E41237 · #F7CD4F

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

#171813

Grass Green · Black · Dark Green

HEX
#171813
RGB
rgb(23, 24, 19)
HSL
hsl(72, 12%, 8%)
HSB
hsb(72, 21%, 9%)
CMYK
cmyk(4%, 0%, 21%, 91%)
Oklch
oklch(20.6% 0.010 116.4)

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

#FBF9C0

Fresh Green · Bisque · Lemon Cream

HEX
#FBF9C0
RGB
rgb(251, 249, 192)
HSL
hsl(58, 88%, 87%)
HSB
hsb(58, 24%, 98%)
CMYK
cmyk(0%, 1%, 24%, 2%)
Oklch
oklch(97.0% 0.073 106.0)

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

#FDAA9F

Peach Pink · LightPink · Cherry Blossom

HEX
#FDAA9F
RGB
rgb(253, 170, 159)
HSL
hsl(7, 96%, 81%)
HSB
hsb(7, 37%, 99%)
CMYK
cmyk(0%, 33%, 37%, 1%)
Oklch
oklch(81.6% 0.100 27.8)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

#E41237

Vermilion · Crimson · Passion Red

HEX
#E41237
RGB
rgb(228, 18, 55)
HSL
hsl(349, 85%, 48%)
HSB
hsb(349, 92%, 89%)
CMYK
cmyk(0%, 92%, 76%, 11%)
Oklch
oklch(58.5% 0.229 21.9)

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

#F7CD4F

Ginger · SandyBrown · Sunflower

HEX
#F7CD4F
RGB
rgb(247, 205, 79)
HSL
hsl(45, 91%, 64%)
HSB
hsb(45, 68%, 97%)
CMYK
cmyk(0%, 17%, 68%, 3%)
Oklch
oklch(86.3% 0.148 90.3)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

171813
131217

Analogous

171512
171813
131712

Triadic

171813
121617
171216

Split-Comp.

171813
121317
151217

Tetradic

171813
121715
131217
171213

Contrast Matrix WCAG 2.1 Contrast

171813
FBF9C0
FDAA9F
E41237
F7CD4F
—
16.5
AAA
9.7
AAA
3.8
AA Large
11.7
AAA
16.5
AAA
—
1.7
Fail
4.4
AA Large
1.4
Fail
9.7
AAA
1.7
Fail
—
2.6
Fail
1.2
Fail
3.8
AA Large
4.4
AA Large
2.6
Fail
—
3.1
AA Large
11.7
AAA
1.4
Fail
1.2
Fail
3.1
AA Large
—
White BG
17.8AAA
1.1Fail
1.8Fail
4.7AA
1.5Fail
Black BG
1.2Fail
19.4AAA
11.4AAA
4.4AA Large
13.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

171714
FAFACE
D9D8A2
89872E
E5E46D

Deuteranopia

171715
FAFAD1
DEE4A2
95A52C
E7EA75

Tritanopia

171515
FBD9DB
F9A4A4
DA2725
F5868B

Achromatopsia

171717
F3F3F3
C2C2C2
555555
CBCBCB

Shades & Tints Shades & Tints

#171813

Dark
Light

#FBF9C0

Dark
Light

#FDAA9F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #171813;
  --color-2: #fbf9c0;
  --color-3: #fdaa9f;
  --color-4: #e41237;
  --color-5: #f7cd4f;
}

SCSS

$color-1: #171813;
$color-2: #fbf9c0;
$color-3: #fdaa9f;
$color-4: #e41237;
$color-5: #f7cd4f;

TAILWIND

colors: {
  'brand-1': '#171813',
  'brand-2': '#fbf9c0',
  'brand-3': '#fdaa9f',
  'brand-4': '#e41237',
  'brand-5': '#f7cd4f',
}

RGB Array

[23, 24, 19], [251, 249, 192], [253, 170, 159], [228, 18, 55], [247, 205, 79]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #171813, #FBF9C0, #FDAA9F, #E41237, #F7CD4F 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: #171813; --color-2: #fbf9c0; --color-3: #fdaa9f; --color-4: #e41237; --color-5: #f7cd4f. 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