#141728 + #31838E + #2EA098 + #09BDB1 + #151618 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#141728

Indigo · Black · Deep Sea Blue

HEX

#141728

RGB

rgb(20, 23, 40)

HSL

hsl(231, 33%, 12%)

HSB

hsb(231, 50%, 16%)

CMYK

cmyk(50%, 42%, 0%, 84%)

Oklch

oklch(21.1% 0.034 275.5)

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

#31838E

Slate Blue · SteelBlue · Mint Ice

HEX

#31838E

RGB

rgb(49, 131, 142)

HSL

hsl(187, 49%, 37%)

HSB

hsb(187, 65%, 56%)

CMYK

cmyk(65%, 8%, 0%, 44%)

Oklch

oklch(56.5% 0.079 207.5)

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

#2EA098

Mineral Blue · LightSeaGreen · Mint Ice

HEX

#2EA098

RGB

rgb(46, 160, 152)

HSL

hsl(176, 55%, 40%)

HSB

hsb(176, 71%, 63%)

CMYK

cmyk(71%, 0%, 5%, 37%)

Oklch

oklch(64.2% 0.099 188.1)

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

#09BDB1

Mineral Blue · LightSeaGreen · Mint Ice

HEX

#09BDB1

RGB

rgb(9, 189, 177)

HSL

hsl(176, 91%, 39%)

HSB

hsb(176, 95%, 74%)

CMYK

cmyk(95%, 0%, 6%, 26%)

Oklch

oklch(71.9% 0.125 186.8)

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

#151618

Ink Black · Black · Jet Black

HEX

#151618

RGB

rgb(21, 22, 24)

HSL

hsl(220, 7%, 9%)

HSB

hsb(220, 13%, 9%)

CMYK

cmyk(12%, 8%, 0%, 91%)

Oklch

oklch(20.0% 0.004 264.5)

Traditional「Ink Black」· Paint「Jet Black」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

141728

292615

Analogous

152229

141728

1C1529

Triadic

141728

291518

182915

Split-Comp.

141728

291C15

222915

Tetradic

141728

291522

292615

15291C

Contrast Matrix WCAG 2.1 Contrast

141728	31838E	2EA098	09BDB1	151618
—	4.0 AA Large	5.6 AA	7.5 AAA	1.0 Fail
4.0 AA Large	—	1.4 Fail	1.9 Fail	4.1 AA Large
5.6 AA	1.4 Fail	—	1.4 Fail	5.7 AA
7.5 AAA	1.9 Fail	1.4 Fail	—	7.7 AAA
1.0 Fail	4.1 AA Large	5.7 AA	7.7 AAA	—

White BG

17.8AAA

4.4AA Large

3.2AA Large

2.4Fail

18.1AAA

Black BG

1.2Fail

4.8AA

6.6AA

8.9AAA

1.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

151524

55558B

5F609A

5759B4

151518

Deuteranopia

151523

504A8B

59509A

4D3FB5

151517

Tritanopia

142120

358989

349B9C

12B6B7

151717

Achromatopsia

181818

6C6C6C

7D7D7D

868686

161616

Shades & Tints Shades & Tints

#141728

Dark

Light

#31838E

Dark

Light

#2EA098

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #141728;
  --color-2: #31838e;
  --color-3: #2ea098;
  --color-4: #09bdb1;
  --color-5: #151618;
}

SCSS

$color-1: #141728;
$color-2: #31838e;
$color-3: #2ea098;
$color-4: #09bdb1;
$color-5: #151618;

TAILWIND

colors: {
  'brand-1': '#141728',
  'brand-2': '#31838e',
  'brand-3': '#2ea098',
  'brand-4': '#09bdb1',
  'brand-5': '#151618',
}

RGB Array

[20, 23, 40], [49, 131, 142], [46, 160, 152], [9, 189, 177], [21, 22, 24]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #141728, #31838E, #2EA098, #09BDB1, #151618 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: #141728; --color-2: #31838e; --color-3: #2ea098; --color-4: #09bdb1; --color-5: #151618. 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