← Back to Editor

#ADDB58 · #B6B879 · #B89879 · #AD8096 · #C75482

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

#ADDB58

Grass Green · GreenYellow · Olive Green

HEX
#ADDB58
RGB
rgb(173, 219, 88)
HSL
hsl(81, 65%, 60%)
HSB
hsb(81, 60%, 86%)
CMYK
cmyk(21%, 0%, 60%, 14%)
Oklch
oklch(83.3% 0.166 126.1)

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

#B6B879

Autumn Sage · Tan · Sunflower

HEX
#B6B879
RGB
rgb(182, 184, 121)
HSL
hsl(62, 31%, 60%)
HSB
hsb(62, 34%, 72%)
CMYK
cmyk(1%, 0%, 34%, 28%)
Oklch
oklch(76.6% 0.084 109.8)

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

#B89879

Ginger · Tan · Warm Sun

HEX
#B89879
RGB
rgb(184, 152, 121)
HSL
hsl(30, 31%, 60%)
HSB
hsb(30, 34%, 72%)
CMYK
cmyk(0%, 17%, 34%, 28%)
Oklch
oklch(70.1% 0.058 65.8)

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

#AD8096

Dark Violet · DarkGray · Rose Pink

HEX
#AD8096
RGB
rgb(173, 128, 150)
HSL
hsl(331, 22%, 59%)
HSB
hsb(331, 26%, 68%)
CMYK
cmyk(0%, 26%, 13%, 32%)
Oklch
oklch(65.1% 0.063 348.1)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

#C75482

Dark Violet · LightCoral · Rose Pink

HEX
#C75482
RGB
rgb(199, 84, 130)
HSL
hsl(336, 51%, 55%)
HSB
hsb(336, 58%, 78%)
CMYK
cmyk(0%, 58%, 35%, 22%)
Oklch
oklch(60.6% 0.154 357.7)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

ADDB58
8557DB

Analogous

DBC757
ADDB58
6BDB57

Triadic

ADDB58
57ADDB
DB57AD

Split-Comp.

ADDB58
576BDB
C757DB

Tetradic

ADDB58
57DBC7
8557DB
DB576B

Contrast Matrix WCAG 2.1 Contrast

ADDB58
B6B879
B89879
AD8096
C75482
—
1.3
Fail
1.7
Fail
2.1
Fail
2.6
Fail
1.3
Fail
—
1.3
Fail
1.6
Fail
2.0
Fail
1.7
Fail
1.3
Fail
—
1.2
Fail
1.6
Fail
2.1
Fail
1.6
Fail
1.2
Fail
—
1.3
Fail
2.6
Fail
2.0
Fail
1.6
Fail
1.3
Fail
—
White BG
1.6Fail
2.1Fail
2.7Fail
3.3AA Large
4.2AA Large
Black BG
13.1AAA
10.1AAA
7.8AAA
6.3AA
5.0AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C1C178
B7B788
AAAA81
9A9991
959477

Deuteranopia

BEBB7F
B7B78C
ACAE82
9CA08F
9CA474

Tritanopia

AF9196
B69497
B68688
AB8C8C
C16E6C

Achromatopsia

BEBEBE
B0B0B0
9E9E9E
909090
7C7C7C

Shades & Tints Shades & Tints

#ADDB58

Dark
Light

#B6B879

Dark
Light

#B89879

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #addb58;
  --color-2: #b6b879;
  --color-3: #b89879;
  --color-4: #ad8096;
  --color-5: #c75482;
}

SCSS

$color-1: #addb58;
$color-2: #b6b879;
$color-3: #b89879;
$color-4: #ad8096;
$color-5: #c75482;

TAILWIND

colors: {
  'brand-1': '#addb58',
  'brand-2': '#b6b879',
  'brand-3': '#b89879',
  'brand-4': '#ad8096',
  'brand-5': '#c75482',
}

RGB Array

[173, 219, 88], [182, 184, 121], [184, 152, 121], [173, 128, 150], [199, 84, 130]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #ADDB58, #B6B879, #B89879, #AD8096, #C75482 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: #addb58; --color-2: #b6b879; --color-3: #b89879; --color-4: #ad8096; --color-5: #c75482. 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