← Back to Editor

#976363 · #6D5C52 · #549D8A · #F75A54 · #CBD388

nature

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarmCool

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#976363

Crimson · DimGray · Passion Red

HEX
#976363
RGB
rgb(151, 99, 99)
HSL
hsl(0, 21%, 49%)
HSB
hsb(0, 34%, 59%)
CMYK
cmyk(0%, 34%, 34%, 41%)
Oklch
oklch(55.5% 0.068 19.4)

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

#6D5C52

Tangerine · DimGray · Amber Brown

HEX
#6D5C52
RGB
rgb(109, 92, 82)
HSL
hsl(22, 14%, 37%)
HSB
hsb(22, 25%, 43%)
CMYK
cmyk(0%, 16%, 25%, 57%)
Oklch
oklch(48.8% 0.027 52.3)

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

#549D8A

Mineral Blue · CadetBlue · Mint Ice

HEX
#549D8A
RGB
rgb(84, 157, 138)
HSL
hsl(164, 30%, 47%)
HSB
hsb(164, 46%, 62%)
CMYK
cmyk(46%, 0%, 12%, 38%)
Oklch
oklch(64.3% 0.079 174.8)

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

#F75A54

Peach Pink · Tomato · Coral Red

HEX
#F75A54
RGB
rgb(247, 90, 84)
HSL
hsl(2, 91%, 65%)
HSB
hsb(2, 66%, 97%)
CMYK
cmyk(0%, 64%, 66%, 3%)
Oklch
oklch(67.5% 0.193 25.9)

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

#CBD388

Fresh Green · Tan · Sunflower

HEX
#CBD388
RGB
rgb(203, 211, 136)
HSL
hsl(66, 46%, 68%)
HSB
hsb(66, 36%, 83%)
CMYK
cmyk(4%, 0%, 36%, 17%)
Oklch
oklch(84.3% 0.097 113.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

976363
639797

Analogous

97637D
976363
977D63

Triadic

976363
639763
636397

Split-Comp.

976363
63977D
637D97

Tetradic

976363
7D9763
639797
7D6397

Contrast Matrix WCAG 2.1 Contrast

976363
6D5C52
549D8A
F75A54
CBD388
—
1.3
Fail
1.5
Fail
1.5
Fail
3.1
AA Large
1.3
Fail
—
2.0
Fail
2.0
Fail
4.0
AA Large
1.5
Fail
2.0
Fail
—
1.0
Fail
2.0
Fail
1.5
Fail
2.0
Fail
1.0
Fail
—
2.0
Fail
3.1
AA Large
4.0
AA Large
2.0
Fail
2.0
Fail
—
White BG
4.9AA
6.4AA
3.2AA Large
3.2AA Large
1.6Fail
Black BG
4.3AA Large
3.3AA Large
6.6AA
6.5AA
13.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

808063
666554
74748F
B3B255
CECF9A

Deuteranopia

848763
676855
6F6A90
BCC856
CECD9F

Tritanopia

946363
6C5657
589293
EF5757
CBA8AC

Achromatopsia

737373
606060
858585
888888
C8C8C8

Shades & Tints Shades & Tints

#976363

Dark
Light

#6D5C52

Dark
Light

#549D8A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #976363;
  --color-2: #6d5c52;
  --color-3: #549d8a;
  --color-4: #f75a54;
  --color-5: #cbd388;
}

SCSS

$color-1: #976363;
$color-2: #6d5c52;
$color-3: #549d8a;
$color-4: #f75a54;
$color-5: #cbd388;

TAILWIND

colors: {
  'brand-1': '#976363',
  'brand-2': '#6d5c52',
  'brand-3': '#549d8a',
  'brand-4': '#f75a54',
  'brand-5': '#cbd388',
}

RGB Array

[151, 99, 99], [109, 92, 82], [84, 157, 138], [247, 90, 84], [203, 211, 136]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #976363, #6D5C52, #549D8A, #F75A54, #CBD388 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: #976363; --color-2: #6d5c52; --color-3: #549d8a; --color-4: #f75a54; --color-5: #cbd388. 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