← Back to Editor

#71A69C · #A6717A · #A0574E · #FF3C00 · #F28100

nature

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarmCool

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#71A69C

Mineral Blue · CadetBlue · Lake Green

HEX
#71A69C
RGB
rgb(113, 166, 156)
HSL
hsl(169, 23%, 55%)
HSB
hsb(169, 32%, 65%)
CMYK
cmyk(32%, 0%, 6%, 35%)
Oklch
oklch(68.5% 0.058 181.4)

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

#A6717A

Crimson · Gray · Passion Red

HEX
#A6717A
RGB
rgb(166, 113, 122)
HSL
hsl(350, 23%, 55%)
HSB
hsb(350, 32%, 65%)
CMYK
cmyk(0%, 32%, 27%, 35%)
Oklch
oklch(60.6% 0.068 8.1)

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

#A0574E

Crimson · Sienna · Passion Red

HEX
#A0574E
RGB
rgb(160, 87, 78)
HSL
hsl(7, 34%, 47%)
HSB
hsb(7, 51%, 63%)
CMYK
cmyk(0%, 46%, 51%, 37%)
Oklch
oklch(54.0% 0.098 28.1)

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

#FF3C00

Vermilion · OrangeRed · Passion Red

HEX
#FF3C00
RGB
rgb(255, 60, 0)
HSL
hsl(14, 100%, 50%)
HSB
hsb(14, 100%, 100%)
CMYK
cmyk(0%, 76%, 100%, 0%)
Oklch
oklch(65.3% 0.235 33.9)

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

#F28100

Ochre · Orange · Amber Brown

HEX
#F28100
RGB
rgb(242, 129, 0)
HSL
hsl(32, 100%, 47%)
HSB
hsb(32, 100%, 95%)
CMYK
cmyk(0%, 47%, 100%, 5%)
Oklch
oklch(71.6% 0.174 56.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

71A69C
A7727C

Analogous

72A783
71A69C
7296A7

Triadic

71A69C
9D72A7
A79D72

Split-Comp.

71A69C
A77296
A78372

Tetradic

71A69C
8372A7
A7727C
96A772

Contrast Matrix WCAG 2.1 Contrast

71A69C
A6717A
A0574E
FF3C00
F28100
—
1.5
Fail
1.9
Fail
1.3
Fail
1.0
Fail
1.5
Fail
—
1.3
Fail
1.1
Fail
1.5
Fail
1.9
Fail
1.3
Fail
—
1.5
Fail
2.0
Fail
1.3
Fail
1.1
Fail
1.5
Fail
—
1.3
Fail
1.0
Fail
1.5
Fail
2.0
Fail
1.3
Fail
—
White BG
2.7Fail
4.0AA Large
5.3AA
3.6AA Large
2.7Fail
Black BG
7.6AAA
5.3AA
4.0AA Large
5.9AA
7.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

88889E
8F8F78
808050
ABA90F
C1C01F

Deuteranopia

85819F
929677
858A51
B6C512
C8D027

Tritanopia

74A0A1
A37676
9C5252
F51A1D
EC383D

Achromatopsia

959595
828282
6C6C6C
6F6F6F
949494

Shades & Tints Shades & Tints

#71A69C

Dark
Light

#A6717A

Dark
Light

#A0574E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #71a69c;
  --color-2: #a6717a;
  --color-3: #a0574e;
  --color-4: #ff3c00;
  --color-5: #f28100;
}

SCSS

$color-1: #71a69c;
$color-2: #a6717a;
$color-3: #a0574e;
$color-4: #ff3c00;
$color-5: #f28100;

TAILWIND

colors: {
  'brand-1': '#71a69c',
  'brand-2': '#a6717a',
  'brand-3': '#a0574e',
  'brand-4': '#ff3c00',
  'brand-5': '#f28100',
}

RGB Array

[113, 166, 156], [166, 113, 122], [160, 87, 78], [255, 60, 0], [242, 129, 0]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #71A69C, #A6717A, #A0574E, #FF3C00, #F28100 is ideal for: corporate websites, product showcases, portfolios. 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: #71a69c; --color-2: #a6717a; --color-3: #a0574e; --color-4: #ff3c00; --color-5: #f28100. 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. 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