← Back to Editor

#383D42 · #757771 · #C0BFB1 · #E2E2D7 · #F9F8F3

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#383D42

Indigo · DarkSlateGray · Dark Stone

HEX
#383D42
RGB
rgb(56, 61, 66)
HSL
hsl(210, 8%, 24%)
HSB
hsb(210, 15%, 26%)
CMYK
cmyk(15%, 8%, 0%, 74%)
Oklch
oklch(35.7% 0.011 248.1)

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

#757771

Ink Gray · DimGray · Warm Gray

HEX
#757771
RGB
rgb(117, 119, 113)
HSL
hsl(80, 3%, 45%)
HSB
hsb(80, 5%, 47%)
CMYK
cmyk(2%, 0%, 5%, 53%)
Oklch
oklch(56.6% 0.009 121.8)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

#C0BFB1

Fresh Green · Silver · Sunflower

HEX
#C0BFB1
RGB
rgb(192, 191, 177)
HSL
hsl(56, 11%, 72%)
HSB
hsb(56, 8%, 75%)
CMYK
cmyk(0%, 1%, 8%, 25%)
Oklch
oklch(80.2% 0.019 103.5)

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

#E2E2D7

Fresh Green · LightGray · Lemon Cream

HEX
#E2E2D7
RGB
rgb(226, 226, 215)
HSL
hsl(60, 16%, 86%)
HSB
hsb(60, 5%, 89%)
CMYK
cmyk(0%, 0%, 5%, 11%)
Oklch
oklch(91.0% 0.015 106.7)

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

#F9F8F3

Fresh Green · SeaShell · Lemon Cream

HEX
#F9F8F3
RGB
rgb(249, 248, 243)
HSL
hsl(50, 33%, 96%)
HSB
hsb(50, 2%, 98%)
CMYK
cmyk(0%, 0%, 2%, 2%)
Oklch
oklch(97.9% 0.007 97.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

383D42
423D38

Analogous

384242
383D42
383842

Triadic

383D42
42383D
3D4238

Split-Comp.

383D42
423838
424238

Tetradic

383D42
423842
423D38
384238

Contrast Matrix WCAG 2.1 Contrast

383D42
757771
C0BFB1
E2E2D7
F9F8F3
—
2.4
Fail
5.9
AA
8.4
AAA
10.3
AAA
2.4
Fail
—
2.4
Fail
3.5
AA Large
4.3
AA Large
5.9
AA
2.4
Fail
—
1.4
Fail
1.7
Fail
8.4
AAA
3.5
AA Large
1.4
Fail
—
1.2
Fail
10.3
AAA
4.3
AA Large
1.7
Fail
1.2
Fail
—
White BG
11.0AAA
4.5AA
1.9Fail
1.3Fail
1.1Fail
Black BG
1.9Fail
4.6AA
11.3AAA
16.1AAA
19.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

3A3A41
767672
C0C0B4
E2E2DA
F9F9F4

Deuteranopia

3A3A41
767673
C0C0B5
E2E2DA
F9F9F5

Tritanopia

384040
757474
C0B7B8
E2DCDC
F9F5F5

Achromatopsia

3C3C3C
767676
BEBEBE
E1E1E1
F8F8F8

Shades & Tints Shades & Tints

#383D42

Dark
Light

#757771

Dark
Light

#C0BFB1

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #383d42;
  --color-2: #757771;
  --color-3: #c0bfb1;
  --color-4: #e2e2d7;
  --color-5: #f9f8f3;
}

SCSS

$color-1: #383d42;
$color-2: #757771;
$color-3: #c0bfb1;
$color-4: #e2e2d7;
$color-5: #f9f8f3;

TAILWIND

colors: {
  'brand-1': '#383d42',
  'brand-2': '#757771',
  'brand-3': '#c0bfb1',
  'brand-4': '#e2e2d7',
  'brand-5': '#f9f8f3',
}

RGB Array

[56, 61, 66], [117, 119, 113], [192, 191, 177], [226, 226, 215], [249, 248, 243]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #383D42, #757771, #C0BFB1, #E2E2D7, #F9F8F3 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: #383d42; --color-2: #757771; --color-3: #c0bfb1; --color-4: #e2e2d7; --color-5: #f9f8f3. 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