#1D989B + #367787 + #454A66 + #453C52 + #362C31 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#1D989B

Lake Blue · LightSeaGreen · Mint Ice

HEX

#1D989B

RGB

rgb(29, 152, 155)

HSL

hsl(181, 68%, 36%)

HSB

hsb(181, 81%, 61%)

CMYK

cmyk(81%, 2%, 0%, 39%)

Oklch

oklch(61.9% 0.100 197.5)

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

#367787

Slate Blue · SteelBlue · Mint Ice

HEX

#367787

RGB

rgb(54, 119, 135)

HSL

hsl(192, 43%, 37%)

HSB

hsb(192, 60%, 53%)

CMYK

cmyk(60%, 12%, 0%, 47%)

Oklch

oklch(53.4% 0.070 216.3)

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

#454A66

Indigo · DarkSlateGray · Prussian Blue

HEX

#454A66

RGB

rgb(69, 74, 102)

HSL

hsl(231, 19%, 34%)

HSB

hsb(231, 32%, 40%)

CMYK

cmyk(32%, 27%, 0%, 60%)

Oklch

oklch(41.6% 0.047 276.3)

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

#453C52

Deep Indigo · DarkSlateGray · Eggplant

HEX

#453C52

RGB

rgb(69, 60, 82)

HSL

hsl(265, 15%, 28%)

HSB

hsb(265, 27%, 32%)

CMYK

cmyk(16%, 27%, 0%, 68%)

Oklch

oklch(37.4% 0.039 303.3)

Traditional「Deep Indigo」· Paint「Eggplant」· Creative Blush Sunrise

#362C31

Dark Violet · DarkSlateGray · Raspberry

HEX

#362C31

RGB

rgb(54, 44, 49)

HSL

hsl(330, 10%, 19%)

HSB

hsb(330, 19%, 21%)

CMYK

cmyk(0%, 19%, 9%, 79%)

Oklch

oklch(30.6% 0.017 346.5)

Traditional「Dark Violet」· Paint「Raspberry」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

1D989B

9A1F1D

Analogous

1D9A5E

1D989B

1D5A9A

Triadic

1D989B

9A1D98

989A1D

Split-Comp.

1D989B

9A1D5A

9A5E1D

Tetradic

1D989B

5E1D9A

9A1F1D

5A9A1D

Contrast Matrix WCAG 2.1 Contrast

1D989B	367787	454A66	453C52	362C31
—	1.5 Fail	2.5 Fail	3.0 Fail	3.9 AA Large
1.5 Fail	—	1.7 Fail	2.1 Fail	2.7 Fail
2.5 Fail	1.7 Fail	—	1.2 Fail	1.6 Fail
3.0 Fail	2.1 Fail	1.2 Fail	—	1.3 Fail
3.9 AA Large	2.7 Fail	1.6 Fail	1.3 Fail	—

White BG

3.5AA Large

5.1AA

8.7AAA

10.4AAA

13.4AAA

Black BG

6.0AA

4.1AA Large

2.4Fail

2.0Fail

1.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

52539A

525383

47475F

41414D

323230

Deuteranopia

4B429A

4E4A82

47475E

42424B

323330

Tritanopia

239A9A

39807F

455A59

454848

362F2F

Achromatopsia

747474

656565

4C4C4C

414141

303030

Shades & Tints Shades & Tints

#1D989B

Dark

Light

#367787

Dark

Light

#454A66

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #1d989b;
  --color-2: #367787;
  --color-3: #454a66;
  --color-4: #453c52;
  --color-5: #362c31;
}

SCSS

$color-1: #1d989b;
$color-2: #367787;
$color-3: #454a66;
$color-4: #453c52;
$color-5: #362c31;

TAILWIND

colors: {
  'brand-1': '#1d989b',
  'brand-2': '#367787',
  'brand-3': '#454a66',
  'brand-4': '#453c52',
  'brand-5': '#362c31',
}

RGB Array

[29, 152, 155], [54, 119, 135], [69, 74, 102], [69, 60, 82], [54, 44, 49]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #1D989B, #367787, #454A66, #453C52, #362C31 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: #1d989b; --color-2: #367787; --color-3: #454a66; --color-4: #453c52; --color-5: #362c31. 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