← Back to Editor

#323F30 · #AFA5A0 · #F3F6EB · #E1D8CA · #9DA7A4

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#323F30

Celadon · DarkSlateGray · Forest Green

HEX
#323F30
RGB
rgb(50, 63, 48)
HSL
hsl(112, 14%, 22%)
HSB
hsb(112, 24%, 25%)
CMYK
cmyk(21%, 0%, 24%, 75%)
Oklch
oklch(35.1% 0.031 141.3)

Traditional「Celadon」· Paint「Forest Green」· Creative Blush Sunrise

#AFA5A0

Apricot · DarkGray · Silver Sand

HEX
#AFA5A0
RGB
rgb(175, 165, 160)
HSL
hsl(20, 9%, 66%)
HSB
hsb(20, 9%, 69%)
CMYK
cmyk(0%, 6%, 9%, 31%)
Oklch
oklch(72.9% 0.014 48.5)

Traditional「Apricot」· Paint「Silver Sand」· Creative Urban Concrete

#F3F6EB

Willow Green · Linen · Mint Green

HEX
#F3F6EB
RGB
rgb(243, 246, 235)
HSL
hsl(76, 38%, 94%)
HSB
hsb(76, 4%, 96%)
CMYK
cmyk(1%, 0%, 4%, 4%)
Oklch
oklch(96.8% 0.015 119.1)

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

#E1D8CA

Goose Yellow · LightGray · Peach Orange

HEX
#E1D8CA
RGB
rgb(225, 216, 202)
HSL
hsl(37, 28%, 84%)
HSB
hsb(37, 10%, 88%)
CMYK
cmyk(0%, 4%, 10%, 12%)
Oklch
oklch(88.6% 0.021 79.1)

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

#9DA7A4

Ash · DarkGray · Silver Sand

HEX
#9DA7A4
RGB
rgb(157, 167, 164)
HSL
hsl(162, 5%, 64%)
HSB
hsb(162, 6%, 65%)
CMYK
cmyk(6%, 0%, 2%, 35%)
Oklch
oklch(71.9% 0.012 176.2)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

323F30
3E3040

Analogous

3A4030
323F30
304036

Triadic

323F30
303240
403032

Split-Comp.

323F30
363040
40303A

Tetradic

323F30
303A40
3E3040
403630

Contrast Matrix WCAG 2.1 Contrast

323F30
AFA5A0
F3F6EB
E1D8CA
9DA7A4
—
4.6
AA
10.2
AAA
7.9
AAA
4.5
AA Large
4.6
AA
—
2.2
Fail
1.7
Fail
1.0
Fail
10.2
AAA
2.2
Fail
—
1.3
Fail
2.3
Fail
7.9
AAA
1.7
Fail
1.3
Fail
—
1.8
Fail
4.5
AA Large
1.0
Fail
2.3
Fail
1.8
Fail
—
White BG
11.1AAA
2.4Fail
1.1Fail
1.4Fail
2.5Fail
Black BG
1.9Fail
8.7AAA
19.2AAA
14.9AAA
8.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

383834
ABABA1
F4F4EE
DDDDCD
A1A1A5

Deuteranopia

373634
ABACA2
F4F4EE
DEDECE
A1A0A5

Tritanopia

333637
AFA2A2
F3F0F0
E1D0D1
9EA5A5

Achromatopsia

393939
A7A7A7
F4F4F4
D9D9D9
A4A4A4

Shades & Tints Shades & Tints

#323F30

Dark
Light

#AFA5A0

Dark
Light

#F3F6EB

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #323f30;
  --color-2: #afa5a0;
  --color-3: #f3f6eb;
  --color-4: #e1d8ca;
  --color-5: #9da7a4;
}

SCSS

$color-1: #323f30;
$color-2: #afa5a0;
$color-3: #f3f6eb;
$color-4: #e1d8ca;
$color-5: #9da7a4;

TAILWIND

colors: {
  'brand-1': '#323f30',
  'brand-2': '#afa5a0',
  'brand-3': '#f3f6eb',
  'brand-4': '#e1d8ca',
  'brand-5': '#9da7a4',
}

RGB Array

[50, 63, 48], [175, 165, 160], [243, 246, 235], [225, 216, 202], [157, 167, 164]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #323F30, #AFA5A0, #F3F6EB, #E1D8CA, #9DA7A4 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: #323f30; --color-2: #afa5a0; --color-3: #f3f6eb; --color-4: #e1d8ca; --color-5: #9da7a4. 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 general-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