← Back to Editor

#C0D88C · #F7A472 · #F07877 · #FA2A3A · #0A5C5A

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

#C0D88C

Willow Green · Tan · Apple Green

HEX
#C0D88C
RGB
rgb(192, 216, 140)
HSL
hsl(79, 49%, 70%)
HSB
hsb(79, 35%, 85%)
CMYK
cmyk(11%, 0%, 35%, 15%)
Oklch
oklch(84.6% 0.103 122.9)

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

#F7A472

Apricot · LightSalmon · Warm Sun

HEX
#F7A472
RGB
rgb(247, 164, 114)
HSL
hsl(23, 89%, 71%)
HSB
hsb(23, 54%, 97%)
CMYK
cmyk(0%, 34%, 54%, 3%)
Oklch
oklch(79.0% 0.118 51.4)

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

#F07877

Peach Pink · LightCoral · Coral Red

HEX
#F07877
RGB
rgb(240, 120, 119)
HSL
hsl(0, 80%, 70%)
HSB
hsb(0, 50%, 94%)
CMYK
cmyk(0%, 50%, 50%, 6%)
Oklch
oklch(71.1% 0.148 22.0)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#FA2A3A

Vermilion · Crimson · Passion Red

HEX
#FA2A3A
RGB
rgb(250, 42, 58)
HSL
hsl(355, 95%, 57%)
HSB
hsb(355, 83%, 98%)
CMYK
cmyk(0%, 83%, 77%, 2%)
Oklch
oklch(63.5% 0.237 24.3)

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

#0A5C5A

Mineral Blue · DarkSlateGray · Peacock Green

HEX
#0A5C5A
RGB
rgb(10, 92, 90)
HSL
hsl(179, 80%, 20%)
HSB
hsb(179, 89%, 36%)
CMYK
cmyk(89%, 0%, 2%, 64%)
Oklch
oklch(43.1% 0.071 192.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C0D88C
A58DD8

Analogous

D8CA8D
C0D88C
9BD88D

Triadic

C0D88C
8DC0D8
D88DC0

Split-Comp.

C0D88C
8D9BD8
CA8DD8

Tetradic

C0D88C
8DD8CA
A58DD8
D88D9B

Contrast Matrix WCAG 2.1 Contrast

C0D88C
F7A472
F07877
FA2A3A
0A5C5A
—
1.3
Fail
1.8
Fail
2.5
Fail
5.0
AA
1.3
Fail
—
1.4
Fail
1.9
Fail
3.9
AA Large
1.8
Fail
1.4
Fail
—
1.4
Fail
2.8
Fail
2.5
Fail
1.9
Fail
1.4
Fail
—
2.0
Fail
5.0
AA
3.9
AA Large
2.8
Fail
2.0
Fail
—
White BG
1.6Fail
2.0Fail
2.7Fail
3.8AA Large
7.8AAA
Black BG
13.4AAA
10.5AAA
7.7AAA
5.5AA
2.7Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

CACB9E
D3D27E
BCBB77
A09E36
2E2E5A

Deuteranopia

C9C7A3
D8DE81
C3CC77
ACBC35
29235B

Tritanopia

C1ADB0
F3888A
EA7777
F03332
0E5B5B

Achromatopsia

C8C8C8
B7B7B7
9C9C9C
6A6A6A
434343

Shades & Tints Shades & Tints

#C0D88C

Dark
Light

#F7A472

Dark
Light

#F07877

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c0d88c;
  --color-2: #f7a472;
  --color-3: #f07877;
  --color-4: #fa2a3a;
  --color-5: #0a5c5a;
}

SCSS

$color-1: #c0d88c;
$color-2: #f7a472;
$color-3: #f07877;
$color-4: #fa2a3a;
$color-5: #0a5c5a;

TAILWIND

colors: {
  'brand-1': '#c0d88c',
  'brand-2': '#f7a472',
  'brand-3': '#f07877',
  'brand-4': '#fa2a3a',
  'brand-5': '#0a5c5a',
}

RGB Array

[192, 216, 140], [247, 164, 114], [240, 120, 119], [250, 42, 58], [10, 92, 90]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #C0D88C, #F7A472, #F07877, #FA2A3A, #0A5C5A 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: #c0d88c; --color-2: #f7a472; --color-3: #f07877; --color-4: #fa2a3a; --color-5: #0a5c5a. 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