← Back to Editor

#613F3D · #577F77 · #CA936A · #DDB496 · #FFEACC

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 WebsiteBlogData Visualization

Color Details Color Details

#613F3D

Crimson · DarkOliveGreen · Wine Red

HEX
#613F3D
RGB
rgb(97, 63, 61)
HSL
hsl(3, 23%, 31%)
HSB
hsb(3, 37%, 38%)
CMYK
cmyk(0%, 35%, 37%, 62%)
Oklch
oklch(40.6% 0.048 23.1)

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

#577F77

Mineral Blue · DimGray · Mint Ice

HEX
#577F77
RGB
rgb(87, 127, 119)
HSL
hsl(168, 19%, 42%)
HSB
hsb(168, 31%, 50%)
CMYK
cmyk(31%, 0%, 6%, 50%)
Oklch
oklch(56.4% 0.046 180.7)

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

#CA936A

Tangerine · DarkSalmon · Warm Sun

HEX
#CA936A
RGB
rgb(202, 147, 106)
HSL
hsl(26, 48%, 60%)
HSB
hsb(26, 48%, 79%)
CMYK
cmyk(0%, 27%, 48%, 21%)
Oklch
oklch(70.7% 0.087 57.5)

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

#DDB496

Apricot · Tan · Warm Sun

HEX
#DDB496
RGB
rgb(221, 180, 150)
HSL
hsl(25, 51%, 73%)
HSB
hsb(25, 32%, 87%)
CMYK
cmyk(0%, 19%, 32%, 13%)
Oklch
oklch(79.9% 0.063 57.9)

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

#FFEACC

Goose Yellow · Bisque · Peach Orange

HEX
#FFEACC
RGB
rgb(255, 234, 204)
HSL
hsl(35, 100%, 90%)
HSB
hsb(35, 20%, 100%)
CMYK
cmyk(0%, 8%, 20%, 0%)
Oklch
oklch(94.6% 0.046 76.8)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

613F3D
3D5F61

Analogous

613D4D
613F3D
61513D

Triadic

613F3D
3D613F
3F3D61

Split-Comp.

613F3D
3D6151
3D4D61

Tetradic

613F3D
4D613D
3D5F61
513D61

Contrast Matrix WCAG 2.1 Contrast

613F3D
577F77
CA936A
DDB496
FFEACC
—
2.1
Fail
3.5
AA Large
4.8
AA
7.8
AAA
2.1
Fail
—
1.7
Fail
2.3
Fail
3.8
AA Large
3.5
AA Large
1.7
Fail
—
1.4
Fail
2.3
Fail
4.8
AA
2.3
Fail
1.4
Fail
—
1.6
Fail
7.8
AAA
3.8
AA Large
2.3
Fail
1.6
Fail
—
White BG
9.2AAA
4.5AA Large
2.7Fail
1.9Fail
1.2Fail
Black BG
2.3Fail
4.7AA
7.9AAA
11.0AAA
17.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

52523D
686979
B2B274
CBCB9D
F6F6D3

Deuteranopia

54573E
666379
B5B976
CED19F
F7F9D5

Tritanopia

5F3E3E
597A7B
C77C7D
DBA3A4
FED9DA

Achromatopsia

494949
727272
9F9F9F
BDBDBD
EDEDED

Shades & Tints Shades & Tints

#613F3D

Dark
Light

#577F77

Dark
Light

#CA936A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #613f3d;
  --color-2: #577f77;
  --color-3: #ca936a;
  --color-4: #ddb496;
  --color-5: #ffeacc;
}

SCSS

$color-1: #613f3d;
$color-2: #577f77;
$color-3: #ca936a;
$color-4: #ddb496;
$color-5: #ffeacc;

TAILWIND

colors: {
  'brand-1': '#613f3d',
  'brand-2': '#577f77',
  'brand-3': '#ca936a',
  'brand-4': '#ddb496',
  'brand-5': '#ffeacc',
}

RGB Array

[97, 63, 61], [87, 127, 119], [202, 147, 106], [221, 180, 150], [255, 234, 204]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #613F3D, #577F77, #CA936A, #DDB496, #FFEACC is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #613f3d; --color-2: #577f77; --color-3: #ca936a; --color-4: #ddb496; --color-5: #ffeacc. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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