← Back to Editor

#503045 · #9B3D57 · #B36D64 · #CB9C70 · #7C6158

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

#503045

Rose Purple · DarkSlateGray · Raspberry

HEX
#503045
RGB
rgb(80, 48, 69)
HSL
hsl(321, 25%, 25%)
HSB
hsb(321, 40%, 31%)
CMYK
cmyk(0%, 40%, 14%, 69%)
Oklch
oklch(35.6% 0.056 340.7)

Traditional「Rose Purple」· Paint「Raspberry」· Creative Blush Sunrise

#9B3D57

Dark Violet · Sienna · Camellia

HEX
#9B3D57
RGB
rgb(155, 61, 87)
HSL
hsl(343, 44%, 42%)
HSB
hsb(343, 61%, 61%)
CMYK
cmyk(0%, 61%, 44%, 39%)
Oklch
oklch(49.5% 0.128 5.8)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#B36D64

Crimson · Gray · Passion Red

HEX
#B36D64
RGB
rgb(179, 109, 100)
HSL
hsl(7, 34%, 55%)
HSB
hsb(7, 44%, 70%)
CMYK
cmyk(0%, 39%, 44%, 30%)
Oklch
oklch(60.9% 0.091 27.9)

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

#CB9C70

Apricot · DarkSalmon · Warm Sun

HEX
#CB9C70
RGB
rgb(203, 156, 112)
HSL
hsl(29, 47%, 62%)
HSB
hsb(29, 45%, 80%)
CMYK
cmyk(0%, 23%, 45%, 20%)
Oklch
oklch(72.7% 0.081 64.1)

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

#7C6158

Tangerine · DimGray · Amber Brown

HEX
#7C6158
RGB
rgb(124, 97, 88)
HSL
hsl(15, 17%, 42%)
HSB
hsb(15, 29%, 49%)
CMYK
cmyk(0%, 22%, 29%, 51%)
Oklch
oklch(51.7% 0.038 39.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

503045
30503B

Analogous

4B3050
503045
503035

Triadic

503045
455030
304550

Split-Comp.

503045
355030
30504B

Tetradic

503045
504B30
30503B
303550

Contrast Matrix WCAG 2.1 Contrast

503045
9B3D57
B36D64
CB9C70
7C6158
—
1.7
Fail
2.9
Fail
4.6
AA
2.0
Fail
1.7
Fail
—
1.7
Fail
2.7
Fail
1.2
Fail
2.9
Fail
1.7
Fail
—
1.6
Fail
1.4
Fail
4.6
AA
2.7
Fail
1.6
Fail
—
2.3
Fail
2.0
Fail
1.2
Fail
1.4
Fail
2.3
Fail
—
White BG
11.4AAA
6.6AA
4.0AA Large
2.5Fail
5.7AA
Black BG
1.8Fail
3.2AA Large
5.3AA
8.5AAA
3.7AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

424240
727151
959466
B7B67B
70705A

Deuteranopia

44463F
787F4F
999E67
B9BD7D
72745B

Tritanopia

4E3C3B
964C4B
AF6868
C98385
7B5C5C

Achromatopsia

3C3C3C
5C5C5C
818181
A5A5A5
686868

Shades & Tints Shades & Tints

#503045

Dark
Light

#9B3D57

Dark
Light

#B36D64

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #503045;
  --color-2: #9b3d57;
  --color-3: #b36d64;
  --color-4: #cb9c70;
  --color-5: #7c6158;
}

SCSS

$color-1: #503045;
$color-2: #9b3d57;
$color-3: #b36d64;
$color-4: #cb9c70;
$color-5: #7c6158;

TAILWIND

colors: {
  'brand-1': '#503045',
  'brand-2': '#9b3d57',
  'brand-3': '#b36d64',
  'brand-4': '#cb9c70',
  'brand-5': '#7c6158',
}

RGB Array

[80, 48, 69], [155, 61, 87], [179, 109, 100], [203, 156, 112], [124, 97, 88]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #503045, #9B3D57, #B36D64, #CB9C70, #7C6158 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: #503045; --color-2: #9b3d57; --color-3: #b36d64; --color-4: #cb9c70; --color-5: #7c6158. 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