← Back to Editor

#AFA895 · #E6F3D0 · #CBDACF · #81AFA1 · #148D81

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

#AFA895

Ginger · DarkGray · Sunflower

HEX
#AFA895
RGB
rgb(175, 168, 149)
HSL
hsl(44, 14%, 64%)
HSB
hsb(44, 15%, 69%)
CMYK
cmyk(0%, 4%, 15%, 31%)
Oklch
oklch(73.2% 0.028 90.1)

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

#E6F3D0

Willow Green · Beige · Mint Green

HEX
#E6F3D0
RGB
rgb(230, 243, 208)
HSL
hsl(82, 59%, 88%)
HSB
hsb(82, 14%, 95%)
CMYK
cmyk(5%, 0%, 14%, 5%)
Oklch
oklch(94.5% 0.048 123.9)

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

#CBDACF

Celadon · LightGray · Mint Green

HEX
#CBDACF
RGB
rgb(203, 218, 207)
HSL
hsl(136, 17%, 83%)
HSB
hsb(136, 7%, 85%)
CMYK
cmyk(7%, 0%, 5%, 15%)
Oklch
oklch(87.4% 0.022 154.1)

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

#81AFA1

Mineral Blue · DarkSeaGreen · Lake Green

HEX
#81AFA1
RGB
rgb(129, 175, 161)
HSL
hsl(162, 22%, 60%)
HSB
hsb(162, 26%, 69%)
CMYK
cmyk(26%, 0%, 8%, 31%)
Oklch
oklch(71.7% 0.053 174.0)

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

#148D81

Mineral Blue · Teal · Mint Ice

HEX
#148D81
RGB
rgb(20, 141, 129)
HSL
hsl(174, 75%, 32%)
HSB
hsb(174, 86%, 55%)
CMYK
cmyk(86%, 0%, 9%, 45%)
Oklch
oklch(58.0% 0.099 184.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

AFA895
969DB0

Analogous

B09C96
AFA895
AAB096

Triadic

AFA895
96B0A9
A996B0

Split-Comp.

AFA895
96AAB0
9C96B0

Tetradic

AFA895
96B09C
969DB0
B096AA

Contrast Matrix WCAG 2.1 Contrast

AFA895
E6F3D0
CBDACF
81AFA1
148D81
—
2.0
Fail
1.6
Fail
1.0
Fail
1.7
Fail
2.0
Fail
—
1.3
Fail
2.1
Fail
3.5
AA Large
1.6
Fail
1.3
Fail
—
1.7
Fail
2.8
Fail
1.0
Fail
2.1
Fail
1.7
Fail
—
1.7
Fail
1.7
Fail
3.5
AA Large
2.8
Fail
1.7
Fail
—
White BG
2.4Fail
1.2Fail
1.5Fail
2.4Fail
4.1AA Large
Black BG
8.9AAA
18.1AAA
14.5AAA
8.6AAA
5.2AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

ACAC9A
ECECD8
D1D2D2
9595A4
484984

Deuteranopia

ACAD9B
EBEADB
D1D0D2
928FA5
413885

Tritanopia

AF9D9E
E7DFE1
CCD4D4
83A7A8
1A8687

Achromatopsia

A8A8A8
EBEBEB
D4D4D4
A0A0A0
676767

Shades & Tints Shades & Tints

#AFA895

Dark
Light

#E6F3D0

Dark
Light

#CBDACF

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #afa895;
  --color-2: #e6f3d0;
  --color-3: #cbdacf;
  --color-4: #81afa1;
  --color-5: #148d81;
}

SCSS

$color-1: #afa895;
$color-2: #e6f3d0;
$color-3: #cbdacf;
$color-4: #81afa1;
$color-5: #148d81;

TAILWIND

colors: {
  'brand-1': '#afa895',
  'brand-2': '#e6f3d0',
  'brand-3': '#cbdacf',
  'brand-4': '#81afa1',
  'brand-5': '#148d81',
}

RGB Array

[175, 168, 149], [230, 243, 208], [203, 218, 207], [129, 175, 161], [20, 141, 129]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #AFA895, #E6F3D0, #CBDACF, #81AFA1, #148D81 is ideal for: health products, baby brands, fresh-style blogs, 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: #afa895; --color-2: #e6f3d0; --color-3: #cbdacf; --color-4: #81afa1; --color-5: #148d81. 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. 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