← Back to Editor

#C3C689 · #C8D140 · #C7EC23 · #8AA348 · #564C45

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 WebsiteBlog

Color Details Color Details

#C3C689

Fresh Green · Tan · Sunflower

HEX
#C3C689
RGB
rgb(195, 198, 137)
HSL
hsl(63, 35%, 66%)
HSB
hsb(63, 31%, 78%)
CMYK
cmyk(2%, 0%, 31%, 22%)
Oklch
oklch(81.0% 0.081 110.4)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#C8D140

Autumn Sage · GreenYellow · Sunflower

HEX
#C8D140
RGB
rgb(200, 209, 64)
HSL
hsl(64, 61%, 54%)
HSB
hsb(64, 69%, 82%)
CMYK
cmyk(4%, 0%, 69%, 18%)
Oklch
oklch(82.8% 0.162 112.9)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#C7EC23

Grass Green · GreenYellow · Olive Green

HEX
#C7EC23
RGB
rgb(199, 236, 35)
HSL
hsl(71, 84%, 53%)
HSB
hsb(71, 85%, 93%)
CMYK
cmyk(16%, 0%, 85%, 7%)
Oklch
oklch(88.5% 0.205 120.7)

Traditional「Grass Green」· Paint「Olive Green」· Creative Blush Sunrise

#8AA348

Grass Green · Gray · Olive Green

HEX
#8AA348
RGB
rgb(138, 163, 72)
HSL
hsl(76, 39%, 46%)
HSB
hsb(76, 56%, 64%)
CMYK
cmyk(15%, 0%, 56%, 36%)
Oklch
oklch(67.7% 0.121 122.5)

Traditional「Grass Green」· Paint「Olive Green」· Creative Blush Sunrise

#564C45

Tangerine · DarkOliveGreen · Amber Brown

HEX
#564C45
RGB
rgb(86, 76, 69)
HSL
hsl(25, 11%, 30%)
HSB
hsb(25, 20%, 34%)
CMYK
cmyk(0%, 12%, 20%, 66%)
Oklch
oklch(42.4% 0.018 57.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C3C689
8D8AC7

Analogous

C7AB8A
C3C689
A5C78A

Triadic

C3C689
8AC4C7
C78AC4

Split-Comp.

C3C689
8AA5C7
AB8AC7

Tetradic

C3C689
8AC7AB
8D8AC7
C78AA5

Contrast Matrix WCAG 2.1 Contrast

C3C689
C8D140
C7EC23
8AA348
564C45
—
1.1
Fail
1.3
Fail
1.6
Fail
4.7
AA
1.1
Fail
—
1.2
Fail
1.7
Fail
5.0
AA
1.3
Fail
1.2
Fail
—
2.1
Fail
6.1
AA
1.6
Fail
1.7
Fail
2.1
Fail
—
2.9
Fail
4.7
AA
5.0
AA
6.1
AA
2.9
Fail
—
White BG
1.8Fail
1.7Fail
1.4Fail
2.8Fail
8.3AAA
Black BG
11.8AAA
12.7AAA
15.5AAA
7.4AAA
2.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

C4C498
CCCC63
D7D754
95955E
525247

Deuteranopia

C4C49B
CBCB6C
D5D25F
939263
525347

Tritanopia

C3A3A6
C87F85
C97A82
8B6F73
564848

Achromatopsia

BEBEBE
BEBEBE
CACACA
919191
4E4E4E

Shades & Tints Shades & Tints

#C3C689

Dark
Light

#C8D140

Dark
Light

#C7EC23

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c3c689;
  --color-2: #c8d140;
  --color-3: #c7ec23;
  --color-4: #8aa348;
  --color-5: #564c45;
}

SCSS

$color-1: #c3c689;
$color-2: #c8d140;
$color-3: #c7ec23;
$color-4: #8aa348;
$color-5: #564c45;

TAILWIND

colors: {
  'brand-1': '#c3c689',
  'brand-2': '#c8d140',
  'brand-3': '#c7ec23',
  'brand-4': '#8aa348',
  'brand-5': '#564c45',
}

RGB Array

[195, 198, 137], [200, 209, 64], [199, 236, 35], [138, 163, 72], [86, 76, 69]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #C3C689, #C8D140, #C7EC23, #8AA348, #564C45 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: #c3c689; --color-2: #c8d140; --color-3: #c7ec23; --color-4: #8aa348; --color-5: #564c45. 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