#14F3AF + #23B78E + #337C6D + #42404C + #51042B · dark - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#14F3AF

Mineral Blue · MediumSpringGreen · Lake Green

HEX

#14F3AF

RGB

rgb(20, 243, 175)

HSL

hsl(162, 90%, 52%)

HSB

hsb(162, 92%, 95%)

CMYK

cmyk(92%, 0%, 28%, 5%)

Oklch

oklch(85.5% 0.180 164.0)

Traditional「Mineral Blue」· Paint「Lake Green」· Creative Blush Sunrise

#23B78E

Mineral Blue · LightSeaGreen · Mint Ice

HEX

#23B78E

RGB

rgb(35, 183, 142)

HSL

hsl(163, 68%, 43%)

HSB

hsb(163, 81%, 72%)

CMYK

cmyk(81%, 0%, 22%, 28%)

Oklch

oklch(69.6% 0.133 168.5)

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

#337C6D

Mineral Blue · SeaGreen · Mint Ice

HEX

#337C6D

RGB

rgb(51, 124, 109)

HSL

hsl(168, 42%, 34%)

HSB

hsb(168, 59%, 49%)

CMYK

cmyk(59%, 0%, 12%, 51%)

Oklch

oklch(53.6% 0.077 177.6)

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

#42404C

Deep Indigo · DarkSlateGray · Charcoal

HEX

#42404C

RGB

rgb(66, 64, 76)

HSL

hsl(250, 9%, 27%)

HSB

hsb(250, 16%, 30%)

CMYK

cmyk(13%, 16%, 0%, 70%)

Oklch

oklch(37.8% 0.020 293.0)

Traditional「Deep Indigo」· Paint「Charcoal」· Creative Midnight Shadow

#51042B

Dark Violet · Maroon · Raspberry

HEX

#51042B

RGB

rgb(81, 4, 43)

HSL

hsl(330, 91%, 17%)

HSB

hsb(330, 95%, 32%)

CMYK

cmyk(0%, 95%, 47%, 68%)

Oklch

oklch(28.7% 0.111 357.2)

Traditional「Dark Violet」· Paint「Raspberry」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

14F3AF

F31659

Analogous

16F343

14F3AF

16C7F3

Triadic

14F3AF

B116F3

F3B116

Split-Comp.

14F3AF

F316C7

F34316

Tetradic

14F3AF

4316F3

F31659

C7F316

Contrast Matrix WCAG 2.1 Contrast

14F3AF	23B78E	337C6D	42404C	51042B
—	1.8 Fail	3.4 AA Large	7.0 AA	10.3 AAA
1.8 Fail	—	1.9 Fail	4.0 AA Large	5.9 AA
3.4 AA Large	1.9 Fail	—	2.1 Fail	3.0 AA Large
7.0 AA	4.0 AA Large	2.1 Fail	—	1.5 Fail
10.3 AAA	5.9 AA	3.0 AA Large	1.5 Fail	—

White BG

1.5Fail

2.5Fail

4.9AA

10.1AAA

15.0AAA

Black BG

14.5AAA

8.2AAA

4.2AA Large

2.1Fail

1.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

7577BF

636498

535371

414149

302F22

Deuteranopia

6857C3

5B4F9A

4E4972

414148

343A1F

Tritanopia

1FCCCF

2AA0A1

377374

424746

4D1A18

Achromatopsia

A9A9A9

868686

646464

424242

1F1F1F

Shades & Tints Shades & Tints

#14F3AF

Dark

Light

#23B78E

Dark

Light

#337C6D

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #14f3af;
  --color-2: #23b78e;
  --color-3: #337c6d;
  --color-4: #42404c;
  --color-5: #51042b;
}

SCSS

$color-1: #14f3af;
$color-2: #23b78e;
$color-3: #337c6d;
$color-4: #42404c;
$color-5: #51042b;

TAILWIND

colors: {
  'brand-1': '#14f3af',
  'brand-2': '#23b78e',
  'brand-3': '#337c6d',
  'brand-4': '#42404c',
  'brand-5': '#51042b',
}

RGB Array

[20, 243, 175], [35, 183, 142], [51, 124, 109], [66, 64, 76], [81, 4, 43]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This dark-style palette of #14F3AF, #23B78E, #337C6D, #42404C, #51042B 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: #14f3af; --color-2: #23b78e; --color-3: #337c6d; --color-4: #42404c; --color-5: #51042b. 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 dark-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