#333242 + #3C4743 + #455C43 + #286D5F + #0A7D7B - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#333242

Deep Indigo · DarkSlateGray · Prussian Blue

HEX

#333242

RGB

rgb(51, 50, 66)

HSL

hsl(244, 14%, 23%)

HSB

hsb(244, 24%, 26%)

CMYK

cmyk(23%, 24%, 0%, 74%)

Oklch

oklch(32.5% 0.028 287.6)

Traditional「Deep Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

#3C4743

Mineral Blue · DarkSlateGray · Charcoal

HEX

#3C4743

RGB

rgb(60, 71, 67)

HSL

hsl(158, 8%, 26%)

HSB

hsb(158, 15%, 28%)

CMYK

cmyk(15%, 0%, 6%, 72%)

Oklch

oklch(38.7% 0.016 171.5)

Traditional「Mineral Blue」· Paint「Charcoal」· Creative Midnight Shadow

#455C43

Celadon · DarkSlateGray · Forest Green

HEX

#455C43

RGB

rgb(69, 92, 67)

HSL

hsl(115, 16%, 31%)

HSB

hsb(115, 27%, 36%)

CMYK

cmyk(25%, 0%, 27%, 64%)

Oklch

oklch(44.8% 0.049 142.7)

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

#286D5F

Mineral Blue · SeaGreen · Mint Ice

HEX

#286D5F

RGB

rgb(40, 109, 95)

HSL

hsl(168, 46%, 29%)

HSB

hsb(168, 63%, 43%)

CMYK

cmyk(63%, 0%, 13%, 57%)

Oklch

oklch(48.7% 0.073 177.4)

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

#0A7D7B

Mineral Blue · Teal · Mint Ice

HEX

#0A7D7B

RGB

rgb(10, 125, 123)

HSL

hsl(179, 85%, 26%)

HSB

hsb(179, 92%, 49%)

CMYK

cmyk(92%, 0%, 2%, 51%)

Oklch

oklch(53.4% 0.090 192.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

333242

424332

Analogous

323A43

333242

3C3243

Triadic

333242

433432

324334

Split-Comp.

333242

433C32

3A4332

Tetradic

333242

43323A

424332

32433C

Contrast Matrix WCAG 2.1 Contrast

333242	3C4743	455C43	286D5F	0A7D7B
—	1.3 Fail	1.7 Fail	2.1 Fail	2.5 Fail
1.3 Fail	—	1.3 Fail	1.6 Fail	1.9 Fail
1.7 Fail	1.3 Fail	—	1.2 Fail	1.5 Fail
2.1 Fail	1.6 Fail	1.2 Fail	—	1.2 Fail
2.5 Fail	1.9 Fail	1.5 Fail	1.2 Fail	—

White BG

12.5AAA

9.7AAA

7.3AAA

6.1AA

5.0AA

Black BG

1.7Fail

2.2Fail

2.9Fail

3.4AA Large

4.2AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

33333E

414144

4F4F49

464662

3C3D7B

Deuteranopia

33333D

403F44

4E4C4B

423D63

352D7C

Tritanopia

333B3A

3D4545

464E4F

2B6566

107C7C

Achromatopsia

343434

434343

525252

575757

5A5A5A

Shades & Tints Shades & Tints

#333242

Dark

Light

#3C4743

Dark

Light

#455C43

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #333242;
  --color-2: #3c4743;
  --color-3: #455c43;
  --color-4: #286d5f;
  --color-5: #0a7d7b;
}

SCSS

$color-1: #333242;
$color-2: #3c4743;
$color-3: #455c43;
$color-4: #286d5f;
$color-5: #0a7d7b;

TAILWIND

colors: {
  'brand-1': '#333242',
  'brand-2': '#3c4743',
  'brand-3': '#455c43',
  'brand-4': '#286d5f',
  'brand-5': '#0a7d7b',
}

RGB Array

[51, 50, 66], [60, 71, 67], [69, 92, 67], [40, 109, 95], [10, 125, 123]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #333242, #3C4743, #455C43, #286D5F, #0A7D7B 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: #333242; --color-2: #3c4743; --color-3: #455c43; --color-4: #286d5f; --color-5: #0a7d7b. 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