← Back to Editor

#D27031 · #DB573E · #B75842 · #7C534D · #28352C

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

#D27031

Tangerine · Chocolate · Warm Sun

HEX
#D27031
RGB
rgb(210, 112, 49)
HSL
hsl(23, 64%, 51%)
HSB
hsb(23, 77%, 82%)
CMYK
cmyk(0%, 47%, 77%, 18%)
Oklch
oklch(64.7% 0.144 50.0)

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

#DB573E

Vermilion · Chocolate · Passion Red

HEX
#DB573E
RGB
rgb(219, 87, 62)
HSL
hsl(10, 69%, 55%)
HSB
hsb(10, 72%, 86%)
CMYK
cmyk(0%, 60%, 72%, 14%)
Oklch
oklch(62.5% 0.171 32.7)

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

#B75842

Crimson · Sienna · Passion Red

HEX
#B75842
RGB
rgb(183, 88, 66)
HSL
hsl(11, 47%, 49%)
HSB
hsb(11, 64%, 72%)
CMYK
cmyk(0%, 52%, 64%, 28%)
Oklch
oklch(57.3% 0.128 34.3)

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

#7C534D

Crimson · DimGray · Wine Red

HEX
#7C534D
RGB
rgb(124, 83, 77)
HSL
hsl(8, 23%, 39%)
HSB
hsb(8, 38%, 49%)
CMYK
cmyk(0%, 33%, 38%, 51%)
Oklch
oklch(48.5% 0.056 28.5)

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

#28352C

Celadon · DarkSlateGray · Dark Green

HEX
#28352C
RGB
rgb(40, 53, 44)
HSL
hsl(138, 14%, 18%)
HSB
hsb(138, 25%, 21%)
CMYK
cmyk(25%, 0%, 17%, 79%)
Oklch
oklch(31.4% 0.024 154.6)

Traditional「Celadon」· Paint「Dark Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D27031
3295D2

Analogous

D23245
D27031
D2BF32

Triadic

D27031
32D26F
6F32D2

Split-Comp.

D27031
32D2BF
3245D2

Tetradic

D27031
45D232
3295D2
BF32D2

Contrast Matrix WCAG 2.1 Contrast

D27031
DB573E
B75842
7C534D
28352C
—
1.1
Fail
1.4
Fail
1.9
Fail
3.7
AA Large
1.1
Fail
—
1.2
Fail
1.7
Fail
3.3
AA Large
1.4
Fail
1.2
Fail
—
1.4
Fail
2.7
Fail
1.9
Fail
1.7
Fail
1.4
Fail
—
2.0
Fail
3.7
AA Large
3.3
AA Large
2.7
Fail
2.0
Fail
—
White BG
3.4AA Large
3.9AA Large
4.7AA
6.6AA
12.8AAA
Black BG
6.1AA
5.4AA
4.5AA Large
3.2AA Large
1.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

A8A740
A2A144
8E8D47
6A6A4E
2E2E2E

Deuteranopia

ADB544
AAB346
939B49
6D704F
2D2C2F

Tritanopia

CD4C4F
D4494A
B24C4C
7A5050
293030

Achromatopsia

868686
7C7C7C
727272
5F5F5F
303030

Shades & Tints Shades & Tints

#D27031

Dark
Light

#DB573E

Dark
Light

#B75842

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d27031;
  --color-2: #db573e;
  --color-3: #b75842;
  --color-4: #7c534d;
  --color-5: #28352c;
}

SCSS

$color-1: #d27031;
$color-2: #db573e;
$color-3: #b75842;
$color-4: #7c534d;
$color-5: #28352c;

TAILWIND

colors: {
  'brand-1': '#d27031',
  'brand-2': '#db573e',
  'brand-3': '#b75842',
  'brand-4': '#7c534d',
  'brand-5': '#28352c',
}

RGB Array

[210, 112, 49], [219, 87, 62], [183, 88, 66], [124, 83, 77], [40, 53, 44]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #D27031, #DB573E, #B75842, #7C534D, #28352C 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: #d27031; --color-2: #db573e; --color-3: #b75842; --color-4: #7c534d; --color-5: #28352c. 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