#272F37 + #13353A + #1D4B50 + #137C86 + #00DCF3 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#272F37

Indigo · DarkSlateGray · Deep Sea Blue

HEX

#272F37

RGB

rgb(39, 47, 55)

HSL

hsl(210, 17%, 18%)

HSB

hsb(210, 29%, 22%)

CMYK

cmyk(29%, 15%, 0%, 78%)

Oklch

oklch(30.1% 0.018 248.4)

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

#13353A

Lake Blue · DarkSlateGray · Peacock Green

HEX

#13353A

RGB

rgb(19, 53, 58)

HSL

hsl(188, 51%, 15%)

HSB

hsb(188, 67%, 23%)

CMYK

cmyk(67%, 9%, 0%, 77%)

Oklch

oklch(30.6% 0.040 208.3)

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

#1D4B50

Slate Blue · DarkSlateGray · Peacock Green

HEX

#1D4B50

RGB

rgb(29, 75, 80)

HSL

hsl(186, 47%, 21%)

HSB

hsb(186, 64%, 31%)

CMYK

cmyk(64%, 6%, 0%, 69%)

Oklch

oklch(38.3% 0.050 205.0)

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

#137C86

Lake Blue · Teal · Mint Ice

HEX

#137C86

RGB

rgb(19, 124, 134)

HSL

hsl(185, 75%, 30%)

HSB

hsb(185, 86%, 53%)

CMYK

cmyk(86%, 7%, 0%, 47%)

Oklch

oklch(53.7% 0.088 205.2)

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

#00DCF3

Lake Blue · DeepSkyBlue · Mint Ice

HEX

#00DCF3

RGB

rgb(0, 220, 243)

HSL

hsl(186, 100%, 48%)

HSB

hsb(186, 100%, 95%)

CMYK

cmyk(100%, 9%, 0%, 5%)

Oklch

oklch(81.8% 0.141 208.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

272F37

362E26

Analogous

263636

272F37

262636

Triadic

272F37

36262E

2E3626

Split-Comp.

272F37

362626

363626

Tetradic

272F37

362636

362E26

263626

Contrast Matrix WCAG 2.1 Contrast

272F37	13353A	1D4B50	137C86	00DCF3
—	1.0 Fail	1.4 Fail	2.7 Fail	8.1 AAA
1.0 Fail	—	1.4 Fail	2.7 Fail	7.8 AAA
1.4 Fail	1.4 Fail	—	2.0 Fail	5.8 AA
2.7 Fail	2.7 Fail	2.0 Fail	—	2.9 Fail
8.1 AAA	7.8 AAA	5.8 AA	2.9 Fail	—

White BG

13.6AAA

13.1AAA

9.7AAA

4.9AA

1.7Fail

Black BG

1.5Fail

1.6Fail

2.2Fail

4.3AA Large

12.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

2A2B35

222239

31314F

404184

5F61ED

Deuteranopia

2A2935

201D38

2E2B4F

3A3283

5342EC

Tritanopia

273433

153838

1F4E4E

188281

0BE9E8

Achromatopsia

2E2E2E

2B2B2B

3E3E3E

5E5E5E

9D9D9D

Shades & Tints Shades & Tints

#272F37

Dark

Light

#13353A

Dark

Light

#1D4B50

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #272f37;
  --color-2: #13353a;
  --color-3: #1d4b50;
  --color-4: #137c86;
  --color-5: #00dcf3;
}

SCSS

$color-1: #272f37;
$color-2: #13353a;
$color-3: #1d4b50;
$color-4: #137c86;
$color-5: #00dcf3;

TAILWIND

colors: {
  'brand-1': '#272f37',
  'brand-2': '#13353a',
  'brand-3': '#1d4b50',
  'brand-4': '#137c86',
  'brand-5': '#00dcf3',
}

RGB Array

[39, 47, 55], [19, 53, 58], [29, 75, 80], [19, 124, 134], [0, 220, 243]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #272F37, #13353A, #1D4B50, #137C86, #00DCF3 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: #272f37; --color-2: #13353a; --color-3: #1d4b50; --color-4: #137c86; --color-5: #00dcf3. 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