← Back to Editor

#38353B · #5E5C54 · #C4B997 · #EAF2C7 · #BBCFB6

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#38353B

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#38353B
RGB
rgb(56, 53, 59)
HSL
hsl(270, 5%, 22%)
HSB
hsb(270, 10%, 23%)
CMYK
cmyk(5%, 10%, 0%, 77%)
Oklch
oklch(33.4% 0.011 308.1)

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

#5E5C54

Ink Gray · DimGray · Charcoal

HEX
#5E5C54
RGB
rgb(94, 92, 84)
HSL
hsl(48, 6%, 35%)
HSB
hsb(48, 11%, 37%)
CMYK
cmyk(0%, 2%, 11%, 63%)
Oklch
oklch(47.4% 0.013 95.3)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

#C4B997

Ginger · Tan · Sunflower

HEX
#C4B997
RGB
rgb(196, 185, 151)
HSL
hsl(45, 28%, 68%)
HSB
hsb(45, 23%, 77%)
CMYK
cmyk(0%, 6%, 23%, 23%)
Oklch
oklch(78.6% 0.048 92.2)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#EAF2C7

Willow Green · Beige · Mint Green

HEX
#EAF2C7
RGB
rgb(234, 242, 199)
HSL
hsl(71, 62%, 86%)
HSB
hsb(71, 18%, 95%)
CMYK
cmyk(3%, 0%, 18%, 5%)
Oklch
oklch(94.4% 0.057 116.1)

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

#BBCFB6

Celadon · Silver · Apple Green

HEX
#BBCFB6
RGB
rgb(187, 207, 182)
HSL
hsl(108, 21%, 76%)
HSB
hsb(108, 12%, 81%)
CMYK
cmyk(10%, 0%, 12%, 19%)
Oklch
oklch(83.3% 0.041 139.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

38353B
383B35

Analogous

35353B
38353B
3B353B

Triadic

38353B
3B3835
353B38

Split-Comp.

38353B
3B3B35
353B35

Tetradic

38353B
3B3535
383B35
353B3B

Contrast Matrix WCAG 2.1 Contrast

38353B
5E5C54
C4B997
EAF2C7
BBCFB6
—
1.8
Fail
6.2
AA
10.4
AAA
7.3
AAA
1.8
Fail
—
3.4
AA Large
5.7
AA
4.1
AA Large
6.2
AA
3.4
AA Large
—
1.7
Fail
1.2
Fail
10.4
AAA
5.7
AA
1.7
Fail
—
1.4
Fail
7.3
AAA
4.1
AA Large
1.2
Fail
1.4
Fail
—
White BG
12.1AAA
6.7AA
2.0Fail
1.2Fail
1.7Fail
Black BG
1.7Fail
3.1AA Large
10.7AAA
18.0AAA
12.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

37373A
5D5D56
BFBF9F
EDEED1
C4C4BC

Deuteranopia

373739
5D5D56
C0C1A1
EDECD4
C3C1BE

Tritanopia

383838
5E5758
C3A6A7
EADADB
BCC1C2

Achromatopsia

373737
5C5C5C
B8B8B8
EBEBEB
C6C6C6

Shades & Tints Shades & Tints

#38353B

Dark
Light

#5E5C54

Dark
Light

#C4B997

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #38353b;
  --color-2: #5e5c54;
  --color-3: #c4b997;
  --color-4: #eaf2c7;
  --color-5: #bbcfb6;
}

SCSS

$color-1: #38353b;
$color-2: #5e5c54;
$color-3: #c4b997;
$color-4: #eaf2c7;
$color-5: #bbcfb6;

TAILWIND

colors: {
  'brand-1': '#38353b',
  'brand-2': '#5e5c54',
  'brand-3': '#c4b997',
  'brand-4': '#eaf2c7',
  'brand-5': '#bbcfb6',
}

RGB Array

[56, 53, 59], [94, 92, 84], [196, 185, 151], [234, 242, 199], [187, 207, 182]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #38353B, #5E5C54, #C4B997, #EAF2C7, #BBCFB6 is ideal for: brand design, premium product pages, magazine layouts, 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: #38353b; --color-2: #5e5c54; --color-3: #c4b997; --color-4: #eaf2c7; --color-5: #bbcfb6. 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. 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 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