#997766 + #D18A81 + #D9B3A2 + #CCCBA8 + #C9D9C2 · nature - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarm

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#997766

Tangerine · Gray · Amber Brown

HEX

#997766

RGB

rgb(153, 119, 102)

HSL

hsl(20, 20%, 50%)

HSB

hsb(20, 33%, 60%)

CMYK

cmyk(0%, 22%, 33%, 40%)

Oklch

oklch(59.8% 0.050 47.9)

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

#D18A81

Peach Pink · DarkSalmon · Coral Red

HEX

#D18A81

RGB

rgb(209, 138, 129)

HSL

hsl(7, 47%, 66%)

HSB

hsb(7, 38%, 82%)

CMYK

cmyk(0%, 34%, 38%, 18%)

Oklch

oklch(70.3% 0.089 27.5)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#D9B3A2

Apricot · Tan · Warm Sun

HEX

#D9B3A2

RGB

rgb(217, 179, 162)

HSL

hsl(19, 42%, 74%)

HSB

hsb(19, 25%, 85%)

CMYK

cmyk(0%, 18%, 25%, 15%)

Oklch

oklch(79.6% 0.050 45.4)

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

#CCCBA8

Fresh Green · Silver · Sunflower

HEX

#CCCBA8

RGB

rgb(204, 203, 168)

HSL

hsl(58, 26%, 73%)

HSB

hsb(58, 18%, 80%)

CMYK

cmyk(0%, 0%, 18%, 20%)

Oklch

oklch(83.4% 0.047 106.0)

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

#C9D9C2

Celadon · LightGray · Mint Green

HEX

#C9D9C2

RGB

rgb(201, 217, 194)

HSL

hsl(102, 23%, 81%)

HSB

hsb(102, 11%, 85%)

CMYK

cmyk(7%, 0%, 11%, 15%)

Oklch

oklch(86.7% 0.036 136.0)

Traditional「Celadon」· Paint「Mint Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

997766

668899

Analogous

99666F

997766

999166

Triadic

997766

669977

776699

Split-Comp.

997766

669991

666E99

Tetradic

997766

6F9966

668899

916699

Contrast Matrix WCAG 2.1 Contrast

997766	D18A81	D9B3A2	CCCBA8	C9D9C2
—	1.5 Fail	2.1 Fail	2.4 Fail	2.7 Fail
1.5 Fail	—	1.4 Fail	1.7 Fail	1.9 Fail
2.1 Fail	1.4 Fail	—	1.2 Fail	1.3 Fail
2.4 Fail	1.7 Fail	1.2 Fail	—	1.1 Fail
2.7 Fail	1.9 Fail	1.3 Fail	1.1 Fail	—

White BG

4.1AA Large

2.7Fail

1.9Fail

1.7Fail

1.5Fail

Black BG

5.2AA

7.7AAA

10.9AAA

12.7AAA

14.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8A8A6A

B2B283

C9C8A6

CCCCB0

D0D0C8

Deuteranopia

8C8F6B

B6BC84

CBCEA7

CCCCB3

CFCEC9

Tritanopia

976D6E

CD8585

D7A9AA

CCB7B9

CACCCD

Achromatopsia

7F7F7F

9E9E9E

BCBCBC

C7C7C7

D2D2D2

Shades & Tints Shades & Tints

#997766

Dark

Light

#D18A81

Dark

Light

#D9B3A2

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #997766;
  --color-2: #d18a81;
  --color-3: #d9b3a2;
  --color-4: #cccba8;
  --color-5: #c9d9c2;
}

SCSS

$color-1: #997766;
$color-2: #d18a81;
$color-3: #d9b3a2;
$color-4: #cccba8;
$color-5: #c9d9c2;

TAILWIND

colors: {
  'brand-1': '#997766',
  'brand-2': '#d18a81',
  'brand-3': '#d9b3a2',
  'brand-4': '#cccba8',
  'brand-5': '#c9d9c2',
}

RGB Array

[153, 119, 102], [209, 138, 129], [217, 179, 162], [204, 203, 168], [201, 217, 194]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #997766, #D18A81, #D9B3A2, #CCCBA8, #C9D9C2 is ideal for: health products, baby brands, fresh-style blogs. 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: #997766; --color-2: #d18a81; --color-3: #d9b3a2; --color-4: #cccba8; --color-5: #c9d9c2. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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