#312527 + #553D23 + #8B3E48 + #D2193B + #A37E58 · nature - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarm

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#312527

Crimson · DarkSlateGray · Deep Berry

HEX

#312527

RGB

rgb(49, 37, 39)

HSL

hsl(350, 14%, 17%)

HSB

hsb(350, 24%, 19%)

CMYK

cmyk(0%, 24%, 20%, 81%)

Oklch

oklch(27.9% 0.018 7.1)

Traditional「Crimson」· Paint「Deep Berry」· Creative Blush Sunrise

#553D23

Ochre · DarkOliveGreen · Cinnamon

HEX

#553D23

RGB

rgb(85, 61, 35)

HSL

hsl(31, 42%, 24%)

HSB

hsb(31, 59%, 33%)

CMYK

cmyk(0%, 28%, 59%, 67%)

Oklch

oklch(38.0% 0.052 67.4)

Traditional「Ochre」· Paint「Cinnamon」· Creative Blush Sunrise

#8B3E48

Crimson · Sienna · Wine Red

HEX

#8B3E48

RGB

rgb(139, 62, 72)

HSL

hsl(352, 38%, 39%)

HSB

hsb(352, 55%, 55%)

CMYK

cmyk(0%, 55%, 48%, 45%)

Oklch

oklch(46.8% 0.105 14.0)

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

#D2193B

Vermilion · Crimson · Passion Red

HEX

#D2193B

RGB

rgb(210, 25, 59)

HSL

hsl(349, 79%, 46%)

HSB

hsb(349, 88%, 82%)

CMYK

cmyk(0%, 88%, 72%, 18%)

Oklch

oklch(55.4% 0.212 19.9)

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

#A37E58

Ochre · Gray · Amber Brown

HEX

#A37E58

RGB

rgb(163, 126, 88)

HSL

hsl(30, 30%, 49%)

HSB

hsb(30, 46%, 64%)

CMYK

cmyk(0%, 23%, 46%, 36%)

Oklch

oklch(62.0% 0.070 66.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

312527

25312F

Analogous

31252D

312527

312925

Triadic

312527

273125

252731

Split-Comp.

312527

253129

252D31

Tetradic

312527

2D3125

25312F

292531

Contrast Matrix WCAG 2.1 Contrast

312527	553D23	8B3E48	D2193B	A37E58
—	1.5 Fail	2.0 Fail	2.8 Fail	4.0 AA Large
1.5 Fail	—	1.4 Fail	1.9 Fail	2.7 Fail
2.0 Fail	1.4 Fail	—	1.4 Fail	2.0 Fail
2.8 Fail	1.9 Fail	1.4 Fail	—	1.4 Fail
4.0 AA Large	2.7 Fail	2.0 Fail	1.4 Fail	—

White BG

14.7AAA

10.1AAA

7.3AAA

5.3AA

3.7AA Large

Black BG

1.4Fail

2.1Fail

2.9Fail

3.9AA Large

5.7AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

2C2C27

4B4A29

6A6946

828033

939361

Deuteranopia

2D2D26

4C4E2B

6E7445

8D9B31

959863

Tritanopia

302626

542E2F

874443

C92C2B

A1686A

Achromatopsia

292929

414141

565656

545454

858585

Shades & Tints Shades & Tints

#312527

Dark

Light

#553D23

Dark

Light

#8B3E48

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #312527;
  --color-2: #553d23;
  --color-3: #8b3e48;
  --color-4: #d2193b;
  --color-5: #a37e58;
}

SCSS

$color-1: #312527;
$color-2: #553d23;
$color-3: #8b3e48;
$color-4: #d2193b;
$color-5: #a37e58;

TAILWIND

colors: {
  'brand-1': '#312527',
  'brand-2': '#553d23',
  'brand-3': '#8b3e48',
  'brand-4': '#d2193b',
  'brand-5': '#a37e58',
}

RGB Array

[49, 37, 39], [85, 61, 35], [139, 62, 72], [210, 25, 59], [163, 126, 88]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #312527, #553D23, #8B3E48, #D2193B, #A37E58 is ideal for: tech websites, dark mode UIs, game UIs. 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: #312527; --color-2: #553d23; --color-3: #8b3e48; --color-4: #d2193b; --color-5: #a37e58. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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