← Back to Editor

#C4D2AF · #97CFC4 · #90C0C7 · #9DABC4 · #AD9DAA

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 WebsiteBlog

Color Details Color Details

#C4D2AF

Willow Green · Silver · Apple Green

HEX
#C4D2AF
RGB
rgb(196, 210, 175)
HSL
hsl(84, 28%, 75%)
HSB
hsb(84, 17%, 82%)
CMYK
cmyk(7%, 0%, 17%, 18%)
Oklch
oklch(84.4% 0.050 125.2)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

#97CFC4

Jade · LightSteelBlue · Lake Green

HEX
#97CFC4
RGB
rgb(151, 207, 196)
HSL
hsl(168, 37%, 70%)
HSB
hsb(168, 27%, 81%)
CMYK
cmyk(27%, 0%, 5%, 19%)
Oklch
oklch(81.3% 0.060 181.2)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#90C0C7

Sky Blue · LightSteelBlue · Lake Green

HEX
#90C0C7
RGB
rgb(144, 192, 199)
HSL
hsl(188, 33%, 67%)
HSB
hsb(188, 28%, 78%)
CMYK
cmyk(28%, 4%, 0%, 22%)
Oklch
oklch(77.6% 0.051 207.3)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#9DABC4

Azure · DarkGray · Cobalt Blue

HEX
#9DABC4
RGB
rgb(157, 171, 196)
HSL
hsl(218, 25%, 69%)
HSB
hsb(218, 20%, 77%)
CMYK
cmyk(20%, 13%, 0%, 23%)
Oklch
oklch(73.9% 0.039 262.1)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

#AD9DAA

Mauve · DarkGray · Silver Sand

HEX
#AD9DAA
RGB
rgb(173, 157, 170)
HSL
hsl(311, 9%, 65%)
HSB
hsb(311, 9%, 68%)
CMYK
cmyk(0%, 9%, 2%, 32%)
Oklch
oklch(71.4% 0.026 332.1)

Traditional「Mauve」· Paint「Silver Sand」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C4D2AF
BCADD1

Analogous

D1CEAD
C4D2AF
B1D1AD

Triadic

C4D2AF
ADC3D1
D1ADC3

Split-Comp.

C4D2AF
ADB1D1
CEADD1

Tetradic

C4D2AF
ADD1CE
BCADD1
D1ADB1

Contrast Matrix WCAG 2.1 Contrast

C4D2AF
97CFC4
90C0C7
9DABC4
AD9DAA
—
1.1
Fail
1.2
Fail
1.5
Fail
1.6
Fail
1.1
Fail
—
1.1
Fail
1.3
Fail
1.5
Fail
1.2
Fail
1.1
Fail
—
1.2
Fail
1.3
Fail
1.5
Fail
1.3
Fail
1.2
Fail
—
1.1
Fail
1.6
Fail
1.5
Fail
1.3
Fail
1.1
Fail
—
White BG
1.6Fail
1.7Fail
2.0Fail
2.3Fail
2.6Fail
Black BG
13.2AAA
12.0AAA
10.6AAA
9.1AAA
8.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CACAB7
AFB0C7
A5A5C5
A3A3BE
A6A6A7

Deuteranopia

C9C8BA
ACA8C7
A29EC5
A2A1BD
A7A8A6

Tritanopia

C5BEC0
9AC9C9
92C4C4
9EB9B8
ACA4A4

Achromatopsia

CACACA
BDBDBD
B2B2B2
AAAAAA
A3A3A3

Shades & Tints Shades & Tints

#C4D2AF

Dark
Light

#97CFC4

Dark
Light

#90C0C7

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c4d2af;
  --color-2: #97cfc4;
  --color-3: #90c0c7;
  --color-4: #9dabc4;
  --color-5: #ad9daa;
}

SCSS

$color-1: #c4d2af;
$color-2: #97cfc4;
$color-3: #90c0c7;
$color-4: #9dabc4;
$color-5: #ad9daa;

TAILWIND

colors: {
  'brand-1': '#c4d2af',
  'brand-2': '#97cfc4',
  'brand-3': '#90c0c7',
  'brand-4': '#9dabc4',
  'brand-5': '#ad9daa',
}

RGB Array

[196, 210, 175], [151, 207, 196], [144, 192, 199], [157, 171, 196], [173, 157, 170]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #C4D2AF, #97CFC4, #90C0C7, #9DABC4, #AD9DAA is ideal for: brand design, premium product pages, magazine layouts, health products, baby brands, fresh-style blogs. Low-saturation colors convey a sophisticated, premium feel. 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: #c4d2af; --color-2: #97cfc4; --color-3: #90c0c7; --color-4: #9dabc4; --color-5: #ad9daa. 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 beauty, lifestyle, arts 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