#696D52 + #7C9C91 + #DCBF87 + #DA9A77 + #D5666D · nature - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarmCool

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#696D52

Autumn Sage · DimGray · Honey Gold

HEX

#696D52

RGB

rgb(105, 109, 82)

HSL

hsl(69, 14%, 37%)

HSB

hsb(69, 25%, 43%)

CMYK

cmyk(4%, 0%, 25%, 57%)

Oklch

oklch(52.4% 0.041 114.7)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#7C9C91

Mineral Blue · LightSlateGray · Olive Green

HEX

#7C9C91

RGB

rgb(124, 156, 145)

HSL

hsl(159, 14%, 55%)

HSB

hsb(159, 21%, 61%)

CMYK

cmyk(21%, 0%, 7%, 39%)

Oklch

oklch(66.5% 0.039 172.1)

Traditional「Mineral Blue」· Paint「Olive Green」· Creative Blush Sunrise

#DCBF87

Ginger · BurlyWood · Sunflower

HEX

#DCBF87

RGB

rgb(220, 191, 135)

HSL

hsl(40, 55%, 70%)

HSB

hsb(40, 39%, 86%)

CMYK

cmyk(0%, 13%, 39%, 14%)

Oklch

oklch(81.6% 0.080 83.4)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#DA9A77

Apricot · DarkSalmon · Warm Sun

HEX

#DA9A77

RGB

rgb(218, 154, 119)

HSL

hsl(21, 57%, 66%)

HSB

hsb(21, 45%, 85%)

CMYK

cmyk(0%, 29%, 45%, 15%)

Oklch

oklch(74.0% 0.091 49.5)

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

#D5666D

Peach Pink · LightCoral · Coral Red

HEX

#D5666D

RGB

rgb(213, 102, 109)

HSL

hsl(356, 57%, 62%)

HSB

hsb(356, 52%, 84%)

CMYK

cmyk(0%, 52%, 49%, 16%)

Oklch

oklch(64.5% 0.140 17.9)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

696D52

55516C

Analogous

6C6251

696D52

5A6C51

Triadic

696D52

51686C

6C5168

Split-Comp.

696D52

515A6C

62516C

Tetradic

696D52

516C62

55516C

6C515A

Contrast Matrix WCAG 2.1 Contrast

696D52	7C9C91	DCBF87	DA9A77	D5666D
—	1.8 Fail	3.0 AA Large	2.3 Fail	1.5 Fail
1.8 Fail	—	1.7 Fail	1.3 Fail	1.2 Fail
3.0 AA Large	1.7 Fail	—	1.3 Fail	2.0 Fail
2.3 Fail	1.3 Fail	1.3 Fail	—	1.5 Fail
1.5 Fail	1.2 Fail	2.0 Fail	1.5 Fail	—

White BG

5.4AA

3.0Fail

1.8Fail

2.4Fail

3.5AA Large

Black BG

3.9AA Large

7.0AAA

11.8AAA

8.9AAA

6.0AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

6B6B59

8A8A94

CFCF95

BEBE7F

A5A46B

Deuteranopia

6B6A5A

888694

D1D398

C2C782

ABB46B

Tritanopia

695E5F

7E9696

DB9FA2

D78688

CF6A6A

Achromatopsia

696969

919191

C1C1C1

A9A9A9

888888

Shades & Tints Shades & Tints

#696D52

Dark

Light

#7C9C91

Dark

Light

#DCBF87

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #696d52;
  --color-2: #7c9c91;
  --color-3: #dcbf87;
  --color-4: #da9a77;
  --color-5: #d5666d;
}

SCSS

$color-1: #696d52;
$color-2: #7c9c91;
$color-3: #dcbf87;
$color-4: #da9a77;
$color-5: #d5666d;

TAILWIND

colors: {
  'brand-1': '#696d52',
  'brand-2': '#7c9c91',
  'brand-3': '#dcbf87',
  'brand-4': '#da9a77',
  'brand-5': '#d5666d',
}

RGB Array

[105, 109, 82], [124, 156, 145], [220, 191, 135], [218, 154, 119], [213, 102, 109]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #696D52, #7C9C91, #DCBF87, #DA9A77, #D5666D 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: #696d52; --color-2: #7c9c91; --color-3: #dcbf87; --color-4: #da9a77; --color-5: #d5666d. 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