← Back to Editor

#AFA28F · #26A093 · #93AE8D · #D4C88E · #F7D595

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

#AFA28F

Ginger · DarkGray · Warm Sun

HEX
#AFA28F
RGB
rgb(175, 162, 143)
HSL
hsl(36, 17%, 62%)
HSB
hsb(36, 18%, 69%)
CMYK
cmyk(0%, 7%, 18%, 31%)
Oklch
oklch(71.8% 0.031 77.5)

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

#26A093

Mineral Blue · LightSeaGreen · Mint Ice

HEX
#26A093
RGB
rgb(38, 160, 147)
HSL
hsl(174, 62%, 39%)
HSB
hsb(174, 76%, 63%)
CMYK
cmyk(76%, 0%, 8%, 37%)
Oklch
oklch(63.9% 0.104 184.2)

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

#93AE8D

Celadon · DarkSeaGreen · Apple Green

HEX
#93AE8D
RGB
rgb(147, 174, 141)
HSL
hsl(109, 17%, 62%)
HSB
hsb(109, 19%, 68%)
CMYK
cmyk(16%, 0%, 19%, 32%)
Oklch
oklch(72.1% 0.056 140.0)

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

#D4C88E

Fresh Green · BurlyWood · Sunflower

HEX
#D4C88E
RGB
rgb(212, 200, 142)
HSL
hsl(50, 45%, 69%)
HSB
hsb(50, 33%, 83%)
CMYK
cmyk(0%, 6%, 33%, 17%)
Oklch
oklch(82.9% 0.077 97.9)

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

#F7D595

Goose Yellow · Khaki · Peach Orange

HEX
#F7D595
RGB
rgb(247, 213, 149)
HSL
hsl(39, 86%, 78%)
HSB
hsb(39, 40%, 97%)
CMYK
cmyk(0%, 14%, 40%, 3%)
Oklch
oklch(88.7% 0.090 82.8)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

AFA28F
8E9BAF

Analogous

AF918E
AFA28F
ABAF8E

Triadic

AFA28F
8EAFA1
A18EAF

Split-Comp.

AFA28F
8EABAF
918EAF

Tetradic

AFA28F
8EAF91
8E9BAF
AF8EAB

Contrast Matrix WCAG 2.1 Contrast

AFA28F
26A093
93AE8D
D4C88E
F7D595
—
1.3
Fail
1.0
Fail
1.5
Fail
1.8
Fail
1.3
Fail
—
1.3
Fail
1.9
Fail
2.3
Fail
1.0
Fail
1.3
Fail
—
1.4
Fail
1.7
Fail
1.5
Fail
1.9
Fail
1.4
Fail
—
1.2
Fail
1.8
Fail
2.3
Fail
1.7
Fail
1.2
Fail
—
White BG
2.5Fail
3.2AA Large
2.4Fail
1.7Fail
1.4Fail
Black BG
8.4AAA
6.5AA
8.7AAA
12.5AAA
14.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A9A994
5B5C96
9F9F95
CFCF9C
E8E8A4

Deuteranopia

AAAB95
544B97
9D9B97
D0D09F
EAEDA8

Tritanopia

AE9798
2C9999
949B9D
D3A7AA
F5B1B3

Achromatopsia

A4A4A4
7A7A7A
A2A2A2
C5C5C5
D8D8D8

Shades & Tints Shades & Tints

#AFA28F

Dark
Light

#26A093

Dark
Light

#93AE8D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #afa28f;
  --color-2: #26a093;
  --color-3: #93ae8d;
  --color-4: #d4c88e;
  --color-5: #f7d595;
}

SCSS

$color-1: #afa28f;
$color-2: #26a093;
$color-3: #93ae8d;
$color-4: #d4c88e;
$color-5: #f7d595;

TAILWIND

colors: {
  'brand-1': '#afa28f',
  'brand-2': '#26a093',
  'brand-3': '#93ae8d',
  'brand-4': '#d4c88e',
  'brand-5': '#f7d595',
}

RGB Array

[175, 162, 143], [38, 160, 147], [147, 174, 141], [212, 200, 142], [247, 213, 149]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #AFA28F, #26A093, #93AE8D, #D4C88E, #F7D595 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: #afa28f; --color-2: #26a093; --color-3: #93ae8d; --color-4: #d4c88e; --color-5: #f7d595. 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