← Back to Editor

#680B37 · #A04521 · #ED7907 · #FCDD87 · #03AFB6

nature

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

VibrantFreshWarmCool

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Landing PageMobile AppData Visualization

Color Details Color Details

#680B37

Dark Violet · Maroon · Raspberry

HEX
#680B37
RGB
rgb(104, 11, 55)
HSL
hsl(332, 81%, 23%)
HSB
hsb(332, 89%, 41%)
CMYK
cmyk(0%, 89%, 47%, 59%)
Oklch
oklch(34.3% 0.129 359.1)

Traditional「Dark Violet」· Paint「Raspberry」· Creative Blush Sunrise

#A04521

Tangerine · Sienna · Amber Brown

HEX
#A04521
RGB
rgb(160, 69, 33)
HSL
hsl(17, 66%, 38%)
HSB
hsb(17, 79%, 63%)
CMYK
cmyk(0%, 57%, 79%, 37%)
Oklch
oklch(50.4% 0.131 40.7)

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

#ED7907

Ochre · Chocolate · Amber Brown

HEX
#ED7907
RGB
rgb(237, 121, 7)
HSL
hsl(30, 94%, 48%)
HSB
hsb(30, 97%, 93%)
CMYK
cmyk(0%, 49%, 97%, 7%)
Oklch
oklch(69.6% 0.174 53.7)

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

#FCDD87

Goose Yellow · Khaki · Lemon Cream

HEX
#FCDD87
RGB
rgb(252, 221, 135)
HSL
hsl(44, 95%, 76%)
HSB
hsb(44, 46%, 99%)
CMYK
cmyk(0%, 12%, 46%, 1%)
Oklch
oklch(90.5% 0.111 90.3)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#03AFB6

Lake Blue · LightSeaGreen · Mint Ice

HEX
#03AFB6
RGB
rgb(3, 175, 182)
HSL
hsl(182, 97%, 36%)
HSB
hsb(182, 98%, 71%)
CMYK
cmyk(98%, 4%, 0%, 29%)
Oklch
oklch(68.5% 0.116 199.9)

Traditional「Lake Blue」· Paint「Mint Ice」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

680B37
0B6A3E

Analogous

6A0B67
680B37
6A0E0B

Triadic

680B37
376A0B
0B376A

Split-Comp.

680B37
0B6A0E
0B676A

Tetradic

680B37
676A0B
0B6A3E
0E0B6A

Contrast Matrix WCAG 2.1 Contrast

680B37
A04521
ED7907
FCDD87
03AFB6
—
2.0
Fail
4.3
AA Large
9.4
AAA
4.6
AA
2.0
Fail
—
2.2
Fail
4.7
AA
2.3
Fail
4.3
AA Large
2.2
Fail
—
2.2
Fail
1.1
Fail
9.4
AAA
4.7
AA
2.2
Fail
—
2.0
Fail
4.6
AA
2.3
Fail
1.1
Fail
2.0
Fail
—
White BG
12.4AAA
6.2AA
2.9Fail
1.3Fail
2.7Fail
Black BG
1.7Fail
3.4AA Large
7.3AAA
15.8AAA
7.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

403F2C
79782A
BBBA23
EFEE9C
4D4FB4

Deuteranopia

454C2A
7E852C
C2CA29
F0F3A1
4437B4

Tritanopia

632422
9B3132
E7383D
FAACB0
0CB3B3

Achromatopsia

2C2C2C
5C5C5C
8F8F8F
DCDCDC
7C7C7C

Shades & Tints Shades & Tints

#680B37

Dark
Light

#A04521

Dark
Light

#ED7907

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #680b37;
  --color-2: #a04521;
  --color-3: #ed7907;
  --color-4: #fcdd87;
  --color-5: #03afb6;
}

SCSS

$color-1: #680b37;
$color-2: #a04521;
$color-3: #ed7907;
$color-4: #fcdd87;
$color-5: #03afb6;

TAILWIND

colors: {
  'brand-1': '#680b37',
  'brand-2': '#a04521',
  'brand-3': '#ed7907',
  'brand-4': '#fcdd87',
  'brand-5': '#03afb6',
}

RGB Array

[104, 11, 55], [160, 69, 33], [237, 121, 7], [252, 221, 135], [3, 175, 182]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #680B37, #A04521, #ED7907, #FCDD87, #03AFB6 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: #680b37; --color-2: #a04521; --color-3: #ed7907; --color-4: #fcdd87; --color-5: #03afb6. 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