← Back to Editor

#3F3C3A · #5A5856 · #26867E · #1EACA0 · #B7DA4B

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 Library

Color Details Color Details

#3F3C3A

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#3F3C3A
RGB
rgb(63, 60, 58)
HSL
hsl(24, 4%, 24%)
HSB
hsb(24, 8%, 25%)
CMYK
cmyk(0%, 5%, 8%, 75%)
Oklch
oklch(35.8% 0.005 56.2)

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

#5A5856

Ink Gray · DimGray · Charcoal

HEX
#5A5856
RGB
rgb(90, 88, 86)
HSL
hsl(30, 2%, 35%)
HSB
hsb(30, 4%, 35%)
CMYK
cmyk(0%, 2%, 4%, 65%)
Oklch
oklch(46.2% 0.004 67.7)

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

#26867E

Mineral Blue · Teal · Mint Ice

HEX
#26867E
RGB
rgb(38, 134, 126)
HSL
hsl(175, 56%, 34%)
HSB
hsb(175, 72%, 53%)
CMYK
cmyk(72%, 0%, 6%, 47%)
Oklch
oklch(56.4% 0.087 186.9)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#1EACA0

Mineral Blue · LightSeaGreen · Mint Ice

HEX
#1EACA0
RGB
rgb(30, 172, 160)
HSL
hsl(175, 70%, 40%)
HSB
hsb(175, 83%, 67%)
CMYK
cmyk(83%, 0%, 7%, 33%)
Oklch
oklch(67.2% 0.113 185.8)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#B7DA4B

Grass Green · GreenYellow · Olive Green

HEX
#B7DA4B
RGB
rgb(183, 218, 75)
HSL
hsl(75, 66%, 57%)
HSB
hsb(75, 66%, 85%)
CMYK
cmyk(16%, 0%, 66%, 15%)
Oklch
oklch(83.6% 0.171 122.0)

Traditional「Grass Green」· Paint「Olive Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3F3C3A
3B3E40

Analogous

403B3B
3F3C3A
403F3B

Triadic

3F3C3A
3B403D
3D3B40

Split-Comp.

3F3C3A
3B403F
3B3B40

Tetradic

3F3C3A
3B403B
3B3E40
3F3B40

Contrast Matrix WCAG 2.1 Contrast

3F3C3A
5A5856
26867E
1EACA0
B7DA4B
—
1.5
Fail
2.5
Fail
3.9
AA Large
6.8
AA
1.5
Fail
—
1.6
Fail
2.5
Fail
4.4
AA Large
2.5
Fail
1.6
Fail
—
1.6
Fail
2.7
Fail
3.9
AA Large
2.5
Fail
1.6
Fail
—
1.8
Fail
6.8
AA
4.4
AA Large
2.7
Fail
1.8
Fail
—
White BG
10.9AAA
7.1AAA
4.4AA Large
2.8Fail
1.6Fail
Black BG
1.9Fail
3.0Fail
4.8AA
7.5AAA
13.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

3E3E3A
595956
505080
5B5DA3
C6C66E

Deuteranopia

3E3E3B
595957
4A4380
5349A4
C4C276

Tritanopia

3F3B3B
5A5757
2B8182
25A5A6
B9898F

Achromatopsia

3D3D3D
585858
686868
808080
BFBFBF

Shades & Tints Shades & Tints

#3F3C3A

Dark
Light

#5A5856

Dark
Light

#26867E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3f3c3a;
  --color-2: #5a5856;
  --color-3: #26867e;
  --color-4: #1eaca0;
  --color-5: #b7da4b;
}

SCSS

$color-1: #3f3c3a;
$color-2: #5a5856;
$color-3: #26867e;
$color-4: #1eaca0;
$color-5: #b7da4b;

TAILWIND

colors: {
  'brand-1': '#3f3c3a',
  'brand-2': '#5a5856',
  'brand-3': '#26867e',
  'brand-4': '#1eaca0',
  'brand-5': '#b7da4b',
}

RGB Array

[63, 60, 58], [90, 88, 86], [38, 134, 126], [30, 172, 160], [183, 218, 75]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #3F3C3A, #5A5856, #26867E, #1EACA0, #B7DA4B is ideal for: tech websites, dark mode UIs, game UIs. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #3f3c3a; --color-2: #5a5856; --color-3: #26867e; --color-4: #1eaca0; --color-5: #b7da4b. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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. 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