← Back to Editor

#F1D8AF · #DA8E3A · #B8692C · #7E5C2C · #1C1817

nature

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarm

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlogData Visualization

Color Details Color Details

#F1D8AF

Goose Yellow · Wheat · Peach Orange

HEX
#F1D8AF
RGB
rgb(241, 216, 175)
HSL
hsl(37, 70%, 82%)
HSB
hsb(37, 27%, 95%)
CMYK
cmyk(0%, 10%, 27%, 5%)
Oklch
oklch(89.3% 0.060 80.0)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#DA8E3A

Ginger · GoldenRod · Warm Sun

HEX
#DA8E3A
RGB
rgb(218, 142, 58)
HSL
hsl(32, 68%, 54%)
HSB
hsb(32, 73%, 85%)
CMYK
cmyk(0%, 35%, 73%, 15%)
Oklch
oklch(71.0% 0.134 64.9)

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

#B8692C

Tangerine · Chocolate · Amber Brown

HEX
#B8692C
RGB
rgb(184, 105, 44)
HSL
hsl(26, 61%, 45%)
HSB
hsb(26, 76%, 72%)
CMYK
cmyk(0%, 43%, 76%, 28%)
Oklch
oklch(59.9% 0.125 54.7)

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

#7E5C2C

Ochre · Sienna · Amber Brown

HEX
#7E5C2C
RGB
rgb(126, 92, 44)
HSL
hsl(35, 48%, 33%)
HSB
hsb(35, 65%, 49%)
CMYK
cmyk(0%, 27%, 65%, 51%)
Oklch
oklch(50.0% 0.078 73.7)

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

#1C1817

Crimson · Black · Deep Berry

HEX
#1C1817
RGB
rgb(28, 24, 23)
HSL
hsl(12, 10%, 10%)
HSB
hsb(12, 18%, 11%)
CMYK
cmyk(0%, 14%, 18%, 89%)
Oklch
oklch(21.3% 0.007 34.3)

Traditional「Crimson」· Paint「Deep Berry」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F1D8AF
B1CAF1

Analogous

F1B8B1
F1D8AF
EAF1B1

Triadic

F1D8AF
B1F1D9
D9B1F1

Split-Comp.

F1D8AF
B1EAF1
B8B1F1

Tetradic

F1D8AF
B1F1B8
B1CAF1
F1B1EA

Contrast Matrix WCAG 2.1 Contrast

F1D8AF
DA8E3A
B8692C
7E5C2C
1C1817
—
1.9
Fail
3.0
Fail
4.4
AA Large
12.7
AAA
1.9
Fail
—
1.6
Fail
2.3
Fail
6.6
AA
3.0
Fail
1.6
Fail
—
1.5
Fail
4.3
AA Large
4.4
AA Large
2.3
Fail
1.5
Fail
—
2.9
Fail
12.7
AAA
6.6
AA
4.3
AA Large
2.9
Fail
—
White BG
1.4Fail
2.7Fail
4.1AA Large
6.1AA
17.6AAA
Black BG
15.2AAA
7.9AAA
5.1AA
3.5AA Large
1.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

E6E6B9
B9B84E
96953B
6F6F38
1A1A17

Deuteranopia

E8EABB
BEC353
9AA03E
71743A
1B1B17

Tritanopia

F0C1C2
D65E62
B44649
7C4143
1C1717

Achromatopsia

DBDBDB
9B9B9B
7A7A7A
616161
191919

Shades & Tints Shades & Tints

#F1D8AF

Dark
Light

#DA8E3A

Dark
Light

#B8692C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f1d8af;
  --color-2: #da8e3a;
  --color-3: #b8692c;
  --color-4: #7e5c2c;
  --color-5: #1c1817;
}

SCSS

$color-1: #f1d8af;
$color-2: #da8e3a;
$color-3: #b8692c;
$color-4: #7e5c2c;
$color-5: #1c1817;

TAILWIND

colors: {
  'brand-1': '#f1d8af',
  'brand-2': '#da8e3a',
  'brand-3': '#b8692c',
  'brand-4': '#7e5c2c',
  'brand-5': '#1c1817',
}

RGB Array

[241, 216, 175], [218, 142, 58], [184, 105, 44], [126, 92, 44], [28, 24, 23]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #F1D8AF, #DA8E3A, #B8692C, #7E5C2C, #1C1817 is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #f1d8af; --color-2: #da8e3a; --color-3: #b8692c; --color-4: #7e5c2c; --color-5: #1c1817. 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 tech, SaaS, healthcare, eco industries. 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