← Back to Editor

#776A85 · #BF9795 · #CCB09B · #CCBCA5 · #9DBFAE

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

#776A85

Deep Indigo · Gray · Violet

HEX
#776A85
RGB
rgb(119, 106, 133)
HSL
hsl(269, 11%, 47%)
HSB
hsb(269, 20%, 52%)
CMYK
cmyk(11%, 20%, 0%, 48%)
Oklch
oklch(54.6% 0.044 306.8)

TraditionalDeep Indigo」· PaintViolet」· Creative Blush Sunrise

#BF9795

Peach Pink · DarkGray · Coral Red

HEX
#BF9795
RGB
rgb(191, 151, 149)
HSL
hsl(3, 25%, 67%)
HSB
hsb(3, 22%, 75%)
CMYK
cmyk(0%, 21%, 22%, 25%)
Oklch
oklch(71.3% 0.048 21.7)

TraditionalPeach Pink」· PaintCoral Red」· Creative Blush Sunrise

#CCB09B

Apricot · Tan · Warm Sun

HEX
#CCB09B
RGB
rgb(204, 176, 155)
HSL
hsl(26, 32%, 70%)
HSB
hsb(26, 24%, 80%)
CMYK
cmyk(0%, 14%, 24%, 20%)
Oklch
oklch(77.6% 0.044 58.9)

TraditionalApricot」· PaintWarm Sun」· Creative Honey Glow

#CCBCA5

Goose Yellow · Tan · Warm Sun

HEX
#CCBCA5
RGB
rgb(204, 188, 165)
HSL
hsl(35, 28%, 72%)
HSB
hsb(35, 19%, 80%)
CMYK
cmyk(0%, 8%, 19%, 20%)
Oklch
oklch(80.2% 0.036 77.0)

TraditionalGoose Yellow」· PaintWarm Sun」· Creative Honey Glow

#9DBFAE

Jade · DarkGray · Apple Green

HEX
#9DBFAE
RGB
rgb(157, 191, 174)
HSL
hsl(150, 21%, 68%)
HSB
hsb(150, 18%, 75%)
CMYK
cmyk(18%, 0%, 9%, 25%)
Oklch
oklch(77.5% 0.044 163.6)

TraditionalJade」· PaintApple Green」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

776A85
78856B

Analogous

6B6B85
776A85
856B85

Triadic

776A85
85776B
6B8577

Split-Comp.

776A85
85856B
6B856B

Tetradic

776A85
856B6B
78856B
6B8585

Contrast Matrix WCAG 2.1 Contrast

776A85
BF9795
CCB09B
CCBCA5
9DBFAE
1.9
Fail
2.4
Fail
2.7
Fail
2.5
Fail
1.9
Fail
1.3
Fail
1.4
Fail
1.3
Fail
2.4
Fail
1.3
Fail
1.1
Fail
1.0
Fail
2.7
Fail
1.4
Fail
1.1
Fail
1.1
Fail
2.5
Fail
1.3
Fail
1.0
Fail
1.1
Fail
White BG
5.0AA
2.6Fail
2.0Fail
1.9Fail
2.0Fail
Black BG
4.2AA Large
8.1AAA
10.3AAA
11.3AAA
10.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

71717E
AEAD95
C0C0A0
C5C5AB
ACACB2

Deuteranopia

72737D
B0B396
C2C4A1
C6C7AC
AAA7B3

Tritanopia

767978
BD9696
CBA4A5
CBAFB0
9FB5B6

Achromatopsia

717171
A3A3A3
B6B6B6
BEBEBE
B3B3B3

Shades & Tints Shades & Tints

#776A85

Dark
Light

#BF9795

Dark
Light

#CCB09B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #776a85;
  --color-2: #bf9795;
  --color-3: #ccb09b;
  --color-4: #ccbca5;
  --color-5: #9dbfae;
}

SCSS

$color-1: #776a85;
$color-2: #bf9795;
$color-3: #ccb09b;
$color-4: #ccbca5;
$color-5: #9dbfae;

TAILWIND

colors: {
  'brand-1': '#776a85',
  'brand-2': '#bf9795',
  'brand-3': '#ccb09b',
  'brand-4': '#ccbca5',
  'brand-5': '#9dbfae',
}

RGB Array

[119, 106, 133], [191, 151, 149], [204, 176, 155], [204, 188, 165], [157, 191, 174]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #776A85, #BF9795, #CCB09B, #CCBCA5, #9DBFAE is ideal for: brand design, premium product pages, magazine layouts. 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: #776a85; --color-2: #bf9795; --color-3: #ccb09b; --color-4: #ccbca5; --color-5: #9dbfae. 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. 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