← Back to Editor

#3A3B40 · #95A1A9 · #BFBBC0 · #EBCDB8 · #F4E4CE

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

#3A3B40

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#3A3B40
RGB
rgb(58, 59, 64)
HSL
hsl(230, 5%, 24%)
HSB
hsb(230, 9%, 25%)
CMYK
cmyk(9%, 8%, 0%, 75%)
Oklch
oklch(35.3% 0.009 276.9)

Traditional「Dark Cyan」· Paint「Dark Stone」· Creative Midnight Shadow

#95A1A9

Sky Blue · DarkGray · Cobalt Blue

HEX
#95A1A9
RGB
rgb(149, 161, 169)
HSL
hsl(204, 10%, 62%)
HSB
hsb(204, 12%, 66%)
CMYK
cmyk(12%, 5%, 0%, 34%)
Oklch
oklch(70.2% 0.018 236.8)

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

#BFBBC0

Silver Gray · Silver · Pearl Gray

HEX
#BFBBC0
RGB
rgb(191, 187, 192)
HSL
hsl(288, 4%, 74%)
HSB
hsb(288, 3%, 75%)
CMYK
cmyk(1%, 3%, 0%, 25%)
Oklch
oklch(79.7% 0.008 319.4)

Traditional「Silver Gray」· Paint「Pearl Gray」· Creative Silver Lining

#EBCDB8

Apricot · Wheat · Peach Orange

HEX
#EBCDB8
RGB
rgb(235, 205, 184)
HSL
hsl(25, 56%, 82%)
HSB
hsb(25, 22%, 92%)
CMYK
cmyk(0%, 13%, 22%, 8%)
Oklch
oklch(86.8% 0.044 57.1)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#F4E4CE

Goose Yellow · Bisque · Peach Orange

HEX
#F4E4CE
RGB
rgb(244, 228, 206)
HSL
hsl(35, 63%, 88%)
HSB
hsb(35, 16%, 96%)
CMYK
cmyk(0%, 7%, 16%, 4%)
Oklch
oklch(92.6% 0.034 76.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3A3B40
403F3A

Analogous

3A3E40
3A3B40
3C3A40

Triadic

3A3B40
403A3B
3B403A

Split-Comp.

3A3B40
403C3A
3E403A

Tetradic

3A3B40
403A3E
403F3A
3A403C

Contrast Matrix WCAG 2.1 Contrast

3A3B40
95A1A9
BFBBC0
EBCDB8
F4E4CE
—
4.2
AA Large
5.9
AA
7.4
AAA
9.0
AAA
4.2
AA Large
—
1.4
Fail
1.8
Fail
2.1
Fail
5.9
AA
1.4
Fail
—
1.3
Fail
1.5
Fail
7.4
AAA
1.8
Fail
1.3
Fail
—
1.2
Fail
9.0
AAA
2.1
Fail
1.5
Fail
1.2
Fail
—
White BG
11.2AAA
2.6Fail
1.9Fail
1.5Fail
1.2Fail
Black BG
1.9Fail
7.9AAA
11.1AAA
14.0AAA
16.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

3A3A3F
9A9AA7
BDBDBF
DEDEBD
EDEDD3

Deuteranopia

3A3A3F
9A99A7
BEBEBE
E0E2BE
EEEFD5

Tritanopia

3A3E3E
96A6A5
BFBEBE
EAC1C2
F3D8D8

Achromatopsia

3B3B3B
9E9E9E
BDBDBD
D4D4D4
E6E6E6

Shades & Tints Shades & Tints

#3A3B40

Dark
Light

#95A1A9

Dark
Light

#BFBBC0

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3a3b40;
  --color-2: #95a1a9;
  --color-3: #bfbbc0;
  --color-4: #ebcdb8;
  --color-5: #f4e4ce;
}

SCSS

$color-1: #3a3b40;
$color-2: #95a1a9;
$color-3: #bfbbc0;
$color-4: #ebcdb8;
$color-5: #f4e4ce;

TAILWIND

colors: {
  'brand-1': '#3a3b40',
  'brand-2': '#95a1a9',
  'brand-3': '#bfbbc0',
  'brand-4': '#ebcdb8',
  'brand-5': '#f4e4ce',
}

RGB Array

[58, 59, 64], [149, 161, 169], [191, 187, 192], [235, 205, 184], [244, 228, 206]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #3A3B40, #95A1A9, #BFBBC0, #EBCDB8, #F4E4CE is ideal for: brand design, premium product pages, magazine layouts, health products, baby brands, fresh-style blogs, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. 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: #3a3b40; --color-2: #95a1a9; --color-3: #bfbbc0; --color-4: #ebcdb8; --color-5: #f4e4ce. 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 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