← Back to Editor

#A3BAA0 · #530201 · #912113 · #DD793E · #F6BE8B

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

#A3BAA0

Celadon · DarkGray · Apple Green

HEX
#A3BAA0
RGB
rgb(163, 186, 160)
HSL
hsl(113, 16%, 68%)
HSB
hsb(113, 14%, 73%)
CMYK
cmyk(12%, 0%, 14%, 27%)
Oklch
oklch(76.4% 0.044 141.9)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

#530201

Vermilion · Maroon · Deep Berry

HEX
#530201
RGB
rgb(83, 2, 1)
HSL
hsl(1, 98%, 16%)
HSB
hsb(1, 99%, 33%)
CMYK
cmyk(0%, 98%, 99%, 67%)
Oklch
oklch(28.0% 0.112 29.3)

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

#912113

Vermilion · Brown · Wine Red

HEX
#912113
RGB
rgb(145, 33, 19)
HSL
hsl(7, 77%, 32%)
HSB
hsb(7, 87%, 57%)
CMYK
cmyk(0%, 77%, 87%, 43%)
Oklch
oklch(43.3% 0.150 30.8)

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

#DD793E

Tangerine · Chocolate · Warm Sun

HEX
#DD793E
RGB
rgb(221, 121, 62)
HSL
hsl(22, 70%, 55%)
HSB
hsb(22, 72%, 87%)
CMYK
cmyk(0%, 45%, 72%, 13%)
Oklch
oklch(67.8% 0.144 48.9)

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

#F6BE8B

Apricot · BurlyWood · Warm Sun

HEX
#F6BE8B
RGB
rgb(246, 190, 139)
HSL
hsl(29, 86%, 75%)
HSB
hsb(29, 43%, 96%)
CMYK
cmyk(0%, 23%, 43%, 4%)
Oklch
oklch(84.0% 0.092 63.4)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A3BAA0
B7A0BA

Analogous

B0BAA0
A3BAA0
A0BAAA

Triadic

A3BAA0
A0A3BA
BAA0A3

Split-Comp.

A3BAA0
AAA0BA
BAA0B0

Tetradic

A3BAA0
A0B0BA
B7A0BA
BAAAA0

Contrast Matrix WCAG 2.1 Contrast

A3BAA0
530201
912113
DD793E
F6BE8B
—
7.3
AAA
4.2
AA Large
1.5
Fail
1.3
Fail
7.3
AAA
—
1.8
Fail
5.0
AA
9.2
AAA
4.2
AA Large
1.8
Fail
—
2.8
Fail
5.2
AA
1.5
Fail
5.0
AA
2.8
Fail
—
1.8
Fail
1.3
Fail
9.2
AAA
5.2
AA
1.8
Fail
—
White BG
2.1Fail
15.3AAA
8.6AAA
3.1AA Large
1.7Fail
Black BG
10.1AAA
1.4Fail
2.4Fail
6.9AA
12.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

ADADA6
302F01
615F16
B2B14C
DEDD97

Deuteranopia

ACAAA8
353B01
676F17
B8BF50
E1E59A

Tritanopia

A4ABAC
4F0101
8B191A
D8585A
F3A1A3

Achromatopsia

B0B0B0
1A1A1A
414141
909090
C9C9C9

Shades & Tints Shades & Tints

#A3BAA0

Dark
Light

#530201

Dark
Light

#912113

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a3baa0;
  --color-2: #530201;
  --color-3: #912113;
  --color-4: #dd793e;
  --color-5: #f6be8b;
}

SCSS

$color-1: #a3baa0;
$color-2: #530201;
$color-3: #912113;
$color-4: #dd793e;
$color-5: #f6be8b;

TAILWIND

colors: {
  'brand-1': '#a3baa0',
  'brand-2': '#530201',
  'brand-3': '#912113',
  'brand-4': '#dd793e',
  'brand-5': '#f6be8b',
}

RGB Array

[163, 186, 160], [83, 2, 1], [145, 33, 19], [221, 121, 62], [246, 190, 139]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #A3BAA0, #530201, #912113, #DD793E, #F6BE8B 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: #a3baa0; --color-2: #530201; --color-3: #912113; --color-4: #dd793e; --color-5: #f6be8b. 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