#480B1B + #3B3343 + #2E5B6B + #218393 + #14ABBB - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#480B1B

Dark Violet · Maroon · Raspberry

HEX

#480B1B

RGB

rgb(72, 11, 27)

HSL

hsl(344, 73%, 16%)

HSB

hsb(344, 85%, 28%)

CMYK

cmyk(0%, 85%, 63%, 72%)

Oklch

oklch(26.9% 0.091 10.9)

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

#3B3343

Dark Plum · DarkSlateGray · Eggplant

HEX

#3B3343

RGB

rgb(59, 51, 67)

HSL

hsl(270, 14%, 23%)

HSB

hsb(270, 24%, 26%)

CMYK

cmyk(12%, 24%, 0%, 74%)

Oklch

oklch(33.6% 0.030 307.5)

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

#2E5B6B

Slate Blue · DarkSlateGray · Mint Ice

HEX

#2E5B6B

RGB

rgb(46, 91, 107)

HSL

hsl(196, 40%, 30%)

HSB

hsb(196, 57%, 42%)

CMYK

cmyk(57%, 15%, 0%, 58%)

Oklch

oklch(44.6% 0.056 223.5)

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

#218393

Lake Blue · Teal · Mint Ice

HEX

#218393

RGB

rgb(33, 131, 147)

HSL

hsl(188, 63%, 35%)

HSB

hsb(188, 78%, 58%)

CMYK

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

Oklch

oklch(56.3% 0.089 211.2)

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

#14ABBB

Lake Blue · LightSeaGreen · Mint Ice

HEX

#14ABBB

RGB

rgb(20, 171, 187)

HSL

hsl(186, 81%, 41%)

HSB

hsb(186, 89%, 73%)

CMYK

cmyk(89%, 9%, 0%, 27%)

Oklch

oklch(67.9% 0.113 206.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

480B1B

0B4737

Analogous

470B39

480B1B

47190B

Triadic

480B1B

1B470B

0B1B47

Split-Comp.

480B1B

0B4719

0B3947

Tetradic

480B1B

39470B

0B4737

190B47

Contrast Matrix WCAG 2.1 Contrast

480B1B	3B3343	2E5B6B	218393	14ABBB
—	1.3 Fail	2.1 Fail	3.5 AA Large	5.7 AA
1.3 Fail	—	1.6 Fail	2.7 Fail	4.4 AA Large
2.1 Fail	1.6 Fail	—	1.7 Fail	2.7 Fail
3.5 AA Large	2.7 Fail	1.7 Fail	—	1.6 Fail
5.7 AA	4.4 AA Large	2.7 Fail	1.6 Fail	—

White BG

15.7AAA

12.1AAA

7.4AAA

4.4AA Large

2.8Fail

Black BG

1.3Fail

1.7Fail

2.8Fail

4.7AA

7.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

2E2D17

38373F

414267

4B4C8F

5557B7

Deuteranopia

313616

38393E

3F3C66

463E8E

4D41B6

Tritanopia

451413

3B3C3B

306463

268C8B

1CB4B3

Achromatopsia

1F1F1F

373737

4F4F4F

686868

808080

Shades & Tints Shades & Tints

#480B1B

Dark

Light

#3B3343

Dark

Light

#2E5B6B

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #480b1b;
  --color-2: #3b3343;
  --color-3: #2e5b6b;
  --color-4: #218393;
  --color-5: #14abbb;
}

SCSS

$color-1: #480b1b;
$color-2: #3b3343;
$color-3: #2e5b6b;
$color-4: #218393;
$color-5: #14abbb;

TAILWIND

colors: {
  'brand-1': '#480b1b',
  'brand-2': '#3b3343',
  'brand-3': '#2e5b6b',
  'brand-4': '#218393',
  'brand-5': '#14abbb',
}

RGB Array

[72, 11, 27], [59, 51, 67], [46, 91, 107], [33, 131, 147], [20, 171, 187]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #480B1B, #3B3343, #2E5B6B, #218393, #14ABBB 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: #480b1b; --color-2: #3b3343; --color-3: #2e5b6b; --color-4: #218393; --color-5: #14abbb. 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