← Back to Editor

#DED17E · #8A7B96 · #6E5782 · #574369 · #2C2333

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

Color Details Color Details

#DED17E

Fresh Green · BurlyWood · Sunflower

HEX
#DED17E
RGB
rgb(222, 209, 126)
HSL
hsl(52, 59%, 68%)
HSB
hsb(52, 43%, 87%)
CMYK
cmyk(0%, 6%, 43%, 13%)
Oklch
oklch(85.3% 0.105 100.5)

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

#8A7B96

Dark Plum · LightSlateGray · Violet

HEX
#8A7B96
RGB
rgb(138, 123, 150)
HSL
hsl(273, 11%, 54%)
HSB
hsb(273, 18%, 59%)
CMYK
cmyk(8%, 18%, 0%, 41%)
Oklch
oklch(60.6% 0.044 310.0)

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

#6E5782

Dark Plum · DimGray · Violet

HEX
#6E5782
RGB
rgb(110, 87, 130)
HSL
hsl(272, 20%, 43%)
HSB
hsb(272, 33%, 51%)
CMYK
cmyk(15%, 33%, 0%, 49%)
Oklch
oklch(49.7% 0.072 308.4)

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

#574369

Dark Plum · DarkSlateBlue · Eggplant

HEX
#574369
RGB
rgb(87, 67, 105)
HSL
hsl(272, 22%, 34%)
HSB
hsb(272, 36%, 41%)
CMYK
cmyk(17%, 36%, 0%, 59%)
Oklch
oklch(42.0% 0.066 307.9)

Traditional「Dark Plum」· Paint「Eggplant」· Creative Blush Sunrise

#2C2333

Dark Plum · DarkSlateGray · Dark Purple

HEX
#2C2333
RGB
rgb(44, 35, 51)
HSL
hsl(274, 19%, 17%)
HSB
hsb(274, 31%, 20%)
CMYK
cmyk(14%, 31%, 0%, 80%)
Oklch
oklch(27.4% 0.032 309.9)

Traditional「Dark Plum」· Paint「Dark Purple」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DED17E
7D8ADE

Analogous

DEA17D
DED17E
BADE7D

Triadic

DED17E
7DDED1
D17DDE

Split-Comp.

DED17E
7DBADE
A17DDE

Tetradic

DED17E
7DDEA1
7D8ADE
DE7DBA

Contrast Matrix WCAG 2.1 Contrast

DED17E
8A7B96
6E5782
574369
2C2333
—
2.5
Fail
4.0
AA Large
5.6
AA
9.7
AAA
2.5
Fail
—
1.6
Fail
2.2
Fail
3.8
AA Large
4.0
AA Large
1.6
Fail
—
1.4
Fail
2.4
Fail
5.6
AA
2.2
Fail
1.4
Fail
—
1.7
Fail
9.7
AAA
3.8
AA Large
2.4
Fail
1.7
Fail
—
White BG
1.6Fail
3.9AA Large
6.3AA
8.7AAA
15.1AAA
Black BG
13.5AAA
5.4AA
3.3AA Large
2.4Fail
1.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

D8D892
84838F
646478
4E4E60
28282F

Deuteranopia

D9DA97
84868E
656775
50515E
29292E

Tritanopia

DDA2A5
898A89
6D6F6E
565957
2C2C2B

Achromatopsia

CBCBCB
838383
636363
4D4D4D
282828

Shades & Tints Shades & Tints

#DED17E

Dark
Light

#8A7B96

Dark
Light

#6E5782

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ded17e;
  --color-2: #8a7b96;
  --color-3: #6e5782;
  --color-4: #574369;
  --color-5: #2c2333;
}

SCSS

$color-1: #ded17e;
$color-2: #8a7b96;
$color-3: #6e5782;
$color-4: #574369;
$color-5: #2c2333;

TAILWIND

colors: {
  'brand-1': '#ded17e',
  'brand-2': '#8a7b96',
  'brand-3': '#6e5782',
  'brand-4': '#574369',
  'brand-5': '#2c2333',
}

RGB Array

[222, 209, 126], [138, 123, 150], [110, 87, 130], [87, 67, 105], [44, 35, 51]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #DED17E, #8A7B96, #6E5782, #574369, #2C2333 is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #ded17e; --color-2: #8a7b96; --color-3: #6e5782; --color-4: #574369; --color-5: #2c2333. 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. Restrained colors convey professionalism and trust. 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