#388C70 + #187C72 + #253F59 + #321740 + #21121E - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#388C70

Mineral Blue · SeaGreen · Mint Ice

HEX

#388C70

RGB

rgb(56, 140, 112)

HSL

hsl(160, 43%, 38%)

HSB

hsb(160, 60%, 55%)

CMYK

cmyk(60%, 0%, 20%, 45%)

Oklch

oklch(58.1% 0.093 168.1)

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

#187C72

Mineral Blue · Teal · Mint Ice

HEX

#187C72

RGB

rgb(24, 124, 114)

HSL

hsl(174, 68%, 29%)

HSB

hsb(174, 81%, 49%)

CMYK

cmyk(81%, 0%, 8%, 51%)

Oklch

oklch(53.0% 0.088 184.6)

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

#253F59

Indigo · DarkSlateGray · Prussian Blue

HEX

#253F59

RGB

rgb(37, 63, 89)

HSL

hsl(210, 41%, 25%)

HSB

hsb(210, 58%, 35%)

CMYK

cmyk(58%, 29%, 0%, 65%)

Oklch

oklch(35.9% 0.056 249.6)

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

#321740

Dark Plum · MidnightBlue · Dark Purple

HEX

#321740

RGB

rgb(50, 23, 64)

HSL

hsl(280, 47%, 17%)

HSB

hsb(280, 64%, 25%)

CMYK

cmyk(22%, 64%, 0%, 75%)

Oklch

oklch(26.4% 0.079 312.6)

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

#21121E

Rose Purple · Black · Dark Purple

HEX

#21121E

RGB

rgb(33, 18, 30)

HSL

hsl(312, 29%, 10%)

HSB

hsb(312, 45%, 13%)

CMYK

cmyk(0%, 45%, 9%, 87%)

Oklch

oklch(20.8% 0.033 334.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

388C70

8B3753

Analogous

378B45

388C70

377D8B

Triadic

388C70

6F378B

8B6F37

Split-Comp.

388C70

8B377D

8B4537

Tetradic

388C70

45378B

8B3753

7D8B37

Contrast Matrix WCAG 2.1 Contrast

388C70	187C72	253F59	321740	21121E
—	1.2 Fail	2.7 Fail	3.9 AA Large	4.4 AA Large
1.2 Fail	—	2.2 Fail	3.1 AA Large	3.6 AA Large
2.7 Fail	2.2 Fail	—	1.5 Fail	1.7 Fail
3.9 AA Large	3.1 AA Large	1.5 Fail	—	1.1 Fail
4.4 AA Large	3.6 AA Large	1.7 Fail	1.1 Fail	—

White BG

4.1AA Large

5.0AA

10.9AAA

15.8AAA

17.9AAA

Black BG

5.2AA

4.2AA Large

1.9Fail

1.3Fail

1.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

5C5D77

434474

303053

262636

1B1A1B

Deuteranopia

585178

3E3675

2F2D51

282A34

1B1C1A

Tritanopia

3C7C7D

1D7677

264E4D

312E2D

201918

Achromatopsia

707070

5D5D5D

3A3A3A

242424

181818

Shades & Tints Shades & Tints

#388C70

Dark

Light

#187C72

Dark

Light

#253F59

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #388c70;
  --color-2: #187c72;
  --color-3: #253f59;
  --color-4: #321740;
  --color-5: #21121e;
}

SCSS

$color-1: #388c70;
$color-2: #187c72;
$color-3: #253f59;
$color-4: #321740;
$color-5: #21121e;

TAILWIND

colors: {
  'brand-1': '#388c70',
  'brand-2': '#187c72',
  'brand-3': '#253f59',
  'brand-4': '#321740',
  'brand-5': '#21121e',
}

RGB Array

[56, 140, 112], [24, 124, 114], [37, 63, 89], [50, 23, 64], [33, 18, 30]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #388C70, #187C72, #253F59, #321740, #21121E 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: #388c70; --color-2: #187c72; --color-3: #253f59; --color-4: #321740; --color-5: #21121e. 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