#098789 + #156B71 + #224F5C + #2D3348 + #391733 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#098789

Lake Blue · Teal · Mint Ice

HEX

#098789

RGB

rgb(9, 135, 137)

HSL

hsl(181, 88%, 29%)

HSB

hsb(181, 93%, 54%)

CMYK

cmyk(93%, 1%, 0%, 46%)

Oklch

oklch(56.6% 0.095 196.7)

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

#156B71

Lake Blue · Teal · Mint Ice

HEX

#156B71

RGB

rgb(21, 107, 113)

HSL

hsl(184, 69%, 26%)

HSB

hsb(184, 81%, 44%)

CMYK

cmyk(81%, 5%, 0%, 56%)

Oklch

oklch(48.3% 0.076 202.2)

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

#224F5C

Slate Blue · DarkSlateGray · Peacock Green

HEX

#224F5C

RGB

rgb(34, 79, 92)

HSL

hsl(193, 46%, 25%)

HSB

hsb(193, 63%, 36%)

CMYK

cmyk(63%, 14%, 0%, 64%)

Oklch

oklch(40.2% 0.054 219.5)

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

#2D3348

Indigo · DarkSlateGray · Prussian Blue

HEX

#2D3348

RGB

rgb(45, 51, 72)

HSL

hsl(227, 23%, 23%)

HSB

hsb(227, 37%, 28%)

CMYK

cmyk(37%, 29%, 0%, 72%)

Oklch

oklch(32.5% 0.038 271.8)

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

#391733

Rose Purple · DarkSlateGray · Dark Purple

HEX

#391733

RGB

rgb(57, 23, 51)

HSL

hsl(311, 43%, 16%)

HSB

hsb(311, 60%, 22%)

CMYK

cmyk(0%, 60%, 11%, 78%)

Oklch

oklch(26.7% 0.068 334.4)

Traditional「Rose Purple」· Paint「Dark Purple」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

098789

8B0B09

Analogous

098B4C

098789

09488B

Triadic

098789

8B0989

898B09

Split-Comp.

098789

8B0948

8B4C09

Tetradic

098789

4C098B

8B0B09

488B09

Contrast Matrix WCAG 2.1 Contrast

098789	156B71	224F5C	2D3348	391733
—	1.4 Fail	2.1 Fail	2.9 Fail	3.6 AA Large
1.4 Fail	—	1.4 Fail	2.0 Fail	2.5 Fail
2.1 Fail	1.4 Fail	—	1.4 Fail	1.7 Fail
2.9 Fail	2.0 Fail	1.4 Fail	—	1.2 Fail
3.6 AA Large	2.5 Fail	1.7 Fail	1.2 Fail	—

White BG

4.3AA Large

6.2AA

9.0AAA

12.5AAA

15.6AAA

Black BG

4.8AA

3.4AA Large

2.3Fail

1.7Fail

1.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

404189

3A3B70

353659

303043

2A2A2C

Deuteranopia

382F88

352F6F

333058

2F2F42

2C2F2B

Tritanopia

0F8888

196E6E

245656

2D3F3E

372726

Achromatopsia

626262

525252

434343

343434

242424

Shades & Tints Shades & Tints

#098789

Dark

Light

#156B71

Dark

Light

#224F5C

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #098789;
  --color-2: #156b71;
  --color-3: #224f5c;
  --color-4: #2d3348;
  --color-5: #391733;
}

SCSS

$color-1: #098789;
$color-2: #156b71;
$color-3: #224f5c;
$color-4: #2d3348;
$color-5: #391733;

TAILWIND

colors: {
  'brand-1': '#098789',
  'brand-2': '#156b71',
  'brand-3': '#224f5c',
  'brand-4': '#2d3348',
  'brand-5': '#391733',
}

RGB Array

[9, 135, 137], [21, 107, 113], [34, 79, 92], [45, 51, 72], [57, 23, 51]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #098789, #156B71, #224F5C, #2D3348, #391733 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: #098789; --color-2: #156b71; --color-3: #224f5c; --color-4: #2d3348; --color-5: #391733. 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