← Back to Editor

#C2BF88 · #B2A475 · #B3906A · #CE5D4F · #E49375

nature

A 5-color nature palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarm

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#C2BF88

Fresh Green · Tan · Sunflower

HEX
#C2BF88
RGB
rgb(194, 191, 136)
HSL
hsl(57, 32%, 65%)
HSB
hsb(57, 30%, 76%)
CMYK
cmyk(0%, 2%, 30%, 24%)
Oklch
oklch(79.4% 0.073 105.3)

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

#B2A475

Ginger · Tan · Sunflower

HEX
#B2A475
RGB
rgb(178, 164, 117)
HSL
hsl(46, 28%, 58%)
HSB
hsb(46, 34%, 70%)
CMYK
cmyk(0%, 8%, 34%, 30%)
Oklch
oklch(71.9% 0.066 93.5)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#B3906A

Ginger · DarkSalmon · Warm Sun

HEX
#B3906A
RGB
rgb(179, 144, 106)
HSL
hsl(31, 32%, 56%)
HSB
hsb(31, 41%, 70%)
CMYK
cmyk(0%, 20%, 41%, 30%)
Oklch
oklch(67.7% 0.067 68.6)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#CE5D4F

Crimson · Tomato · Passion Red

HEX
#CE5D4F
RGB
rgb(206, 93, 79)
HSL
hsl(7, 56%, 56%)
HSB
hsb(7, 62%, 81%)
CMYK
cmyk(0%, 55%, 62%, 19%)
Oklch
oklch(61.6% 0.146 29.1)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

#E49375

Apricot · DarkSalmon · Warm Sun

HEX
#E49375
RGB
rgb(228, 147, 117)
HSL
hsl(16, 67%, 68%)
HSB
hsb(16, 49%, 89%)
CMYK
cmyk(0%, 36%, 49%, 11%)
Oklch
oklch(73.9% 0.107 41.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C2BF88
898CC2

Analogous

C2A389
C2BF88
A9C289

Triadic

C2BF88
89C2BF
BF89C2

Split-Comp.

C2BF88
89A9C2
A389C2

Tetradic

C2BF88
89C2A3
898CC2
C289A9

Contrast Matrix WCAG 2.1 Contrast

C2BF88
B2A475
B3906A
CE5D4F
E49375
—
1.3
Fail
1.6
Fail
2.1
Fail
1.3
Fail
1.3
Fail
—
1.2
Fail
1.6
Fail
1.0
Fail
1.6
Fail
1.2
Fail
—
1.3
Fail
1.2
Fail
2.1
Fail
1.6
Fail
1.3
Fail
—
1.6
Fail
1.3
Fail
1.0
Fail
1.2
Fail
1.6
Fail
—
White BG
1.9Fail
2.5Fail
3.0Fail
4.0AA Large
2.4Fail
Black BG
11.1AAA
8.5AAA
7.1AAA
5.3AA
8.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C1C195
ACAC80
A4A473
9D9C52
C1C07C

Deuteranopia

C1C199
ADAE83
A6A975
A4AC53
C6CC7E

Tritanopia

C2A0A2
B1898B
B17A7C
C85556
E08283

Achromatopsia

BABABA
A3A3A3
969696
7D7D7D
A8A8A8

Shades & Tints Shades & Tints

#C2BF88

Dark
Light

#B2A475

Dark
Light

#B3906A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c2bf88;
  --color-2: #b2a475;
  --color-3: #b3906a;
  --color-4: #ce5d4f;
  --color-5: #e49375;
}

SCSS

$color-1: #c2bf88;
$color-2: #b2a475;
$color-3: #b3906a;
$color-4: #ce5d4f;
$color-5: #e49375;

TAILWIND

colors: {
  'brand-1': '#c2bf88',
  'brand-2': '#b2a475',
  'brand-3': '#b3906a',
  'brand-4': '#ce5d4f',
  'brand-5': '#e49375',
}

RGB Array

[194, 191, 136], [178, 164, 117], [179, 144, 106], [206, 93, 79], [228, 147, 117]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #C2BF88, #B2A475, #B3906A, #CE5D4F, #E49375 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: #c2bf88; --color-2: #b2a475; --color-3: #b3906a; --color-4: #ce5d4f; --color-5: #e49375. 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