← Back to Editor

#12181A · #273438 · #375B66 · #3C91AB · #3BC2EB

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#12181A

Slate Blue · Black · Peacock Green

HEX
#12181A
RGB
rgb(18, 24, 26)
HSL
hsl(195, 18%, 9%)
HSB
hsb(195, 31%, 10%)
CMYK
cmyk(31%, 8%, 0%, 90%)
Oklch
oklch(20.4% 0.010 220.0)

Traditional「Slate Blue」· Paint「Peacock Green」· Creative Blush Sunrise

#273438

Slate Blue · DarkSlateGray · Peacock Green

HEX
#273438
RGB
rgb(39, 52, 56)
HSL
hsl(194, 18%, 19%)
HSB
hsb(194, 30%, 22%)
CMYK
cmyk(30%, 7%, 0%, 78%)
Oklch
oklch(31.5% 0.019 218.5)

Traditional「Slate Blue」· Paint「Peacock Green」· Creative Blush Sunrise

#375B66

Slate Blue · DarkSlateGray · Mint Ice

HEX
#375B66
RGB
rgb(55, 91, 102)
HSL
hsl(194, 30%, 31%)
HSB
hsb(194, 46%, 40%)
CMYK
cmyk(46%, 11%, 0%, 60%)
Oklch
oklch(44.9% 0.045 219.3)

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

#3C91AB

Slate Blue · SteelBlue · Mint Ice

HEX
#3C91AB
RGB
rgb(60, 145, 171)
HSL
hsl(194, 48%, 45%)
HSB
hsb(194, 65%, 67%)
CMYK
cmyk(65%, 15%, 0%, 33%)
Oklch
oklch(61.6% 0.090 221.3)

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

#3BC2EB

Lake Blue · MediumTurquoise · Lake Green

HEX
#3BC2EB
RGB
rgb(59, 194, 235)
HSL
hsl(194, 81%, 58%)
HSB
hsb(194, 75%, 92%)
CMYK
cmyk(75%, 17%, 0%, 8%)
Oklch
oklch(76.0% 0.126 222.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

12181A
1B1513

Analogous

131B19
12181A
13151B

Triadic

12181A
1B1319
191B13

Split-Comp.

12181A
1B1315
1B1913

Tetradic

12181A
19131B
1B1513
151B13

Contrast Matrix WCAG 2.1 Contrast

12181A
273438
375B66
3C91AB
3BC2EB
—
1.4
Fail
2.4
Fail
5.0
AA
8.6
AAA
1.4
Fail
—
1.7
Fail
3.6
AA Large
6.2
AA
2.4
Fail
1.7
Fail
—
2.0
Fail
3.5
AA Large
5.0
AA
3.6
AA Large
2.0
Fail
—
1.7
Fail
8.6
AAA
6.2
AA
3.5
AA Large
1.7
Fail
—
White BG
17.9AAA
12.8AAA
7.4AAA
3.6AA Large
2.1Fail
Black BG
1.2Fail
1.6Fail
2.9Fail
5.8AA
10.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

15151A
2D2D37
474763
6162A5
7577E1

Deuteranopia

141419
2C2B37
454263
5C56A3
6E64DF

Tritanopia

121919
283636
396161
40A09F
42D9D8

Achromatopsia

161616
313131
515151
7B7B7B
9E9E9E

Shades & Tints Shades & Tints

#12181A

Dark
Light

#273438

Dark
Light

#375B66

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #12181a;
  --color-2: #273438;
  --color-3: #375b66;
  --color-4: #3c91ab;
  --color-5: #3bc2eb;
}

SCSS

$color-1: #12181a;
$color-2: #273438;
$color-3: #375b66;
$color-4: #3c91ab;
$color-5: #3bc2eb;

TAILWIND

colors: {
  'brand-1': '#12181a',
  'brand-2': '#273438',
  'brand-3': '#375b66',
  'brand-4': '#3c91ab',
  'brand-5': '#3bc2eb',
}

RGB Array

[18, 24, 26], [39, 52, 56], [55, 91, 102], [60, 145, 171], [59, 194, 235]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #12181A, #273438, #375B66, #3C91AB, #3BC2EB is ideal for: tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #12181a; --color-2: #273438; --color-3: #375b66; --color-4: #3c91ab; --color-5: #3bc2eb. 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. 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. 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