← Back to Editor

#33BEAD · #7C89A3 · #932F5B · #534647 · #212528

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

ProfoundPremiumWarmCool

Industry INDUSTRY

FinanceLuxury

UI Context UI CONTEXT

Dark ThemeCorporateData Visualization

Color Details Color Details

#33BEAD

Mineral Blue · LightSeaGreen · Mint Ice

HEX
#33BEAD
RGB
rgb(51, 190, 173)
HSL
hsl(173, 58%, 47%)
HSB
hsb(173, 73%, 75%)
CMYK
cmyk(73%, 0%, 9%, 25%)
Oklch
oklch(72.6% 0.117 182.9)

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

#7C89A3

Azure · LightSlateGray · Navy Blue

HEX
#7C89A3
RGB
rgb(124, 137, 163)
HSL
hsl(220, 17%, 56%)
HSB
hsb(220, 24%, 64%)
CMYK
cmyk(24%, 16%, 0%, 36%)
Oklch
oklch(62.9% 0.042 264.2)

Traditional「Azure」· Paint「Navy Blue」· Creative Blush Sunrise

#932F5B

Dark Violet · Brown · Camellia

HEX
#932F5B
RGB
rgb(147, 47, 91)
HSL
hsl(334, 52%, 38%)
HSB
hsb(334, 68%, 58%)
CMYK
cmyk(0%, 68%, 38%, 42%)
Oklch
oklch(46.6% 0.140 356.9)

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

#534647

Crimson · DarkSlateGray · Charcoal

HEX
#534647
RGB
rgb(83, 70, 71)
HSL
hsl(355, 8%, 30%)
HSB
hsb(355, 16%, 33%)
CMYK
cmyk(0%, 16%, 14%, 67%)
Oklch
oklch(40.8% 0.018 12.6)

Traditional「Crimson」· Paint「Charcoal」· Creative Midnight Shadow

#212528

Slate Blue · DarkSlateGray · Deep Sea Blue

HEX
#212528
RGB
rgb(33, 37, 40)
HSL
hsl(206, 10%, 14%)
HSB
hsb(206, 17%, 16%)
CMYK
cmyk(18%, 7%, 0%, 84%)
Oklch
oklch(26.2% 0.008 240.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

33BEAD
BD3243

Analogous

32BD68
33BEAD
3288BD

Triadic

33BEAD
AD32BD
BDAD32

Split-Comp.

33BEAD
BD3288
BD6832

Tetradic

33BEAD
6832BD
BD3243
88BD32

Contrast Matrix WCAG 2.1 Contrast

33BEAD
7C89A3
932F5B
534647
212528
—
1.5
Fail
3.3
AA Large
3.9
AA Large
6.7
AA
1.5
Fail
—
2.1
Fail
2.6
Fail
4.4
AA Large
3.3
AA Large
2.1
Fail
—
1.2
Fail
2.1
Fail
3.9
AA Large
2.6
Fail
1.2
Fail
—
1.7
Fail
6.7
AA
4.4
AA Large
2.1
Fail
1.7
Fail
—
White BG
2.3Fail
3.5AA Large
7.5AAA
9.0AAA
15.4AAA
Black BG
9.1AAA
6.0AA
2.8Fail
2.3Fail
1.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

6F70B1
82829D
686750
4D4D47
232327

Deuteranopia

675DB2
81809B
6E754E
4E4F47
232227

Tritanopia

3AB4B5
7D9897
8E4846
524747
212727

Achromatopsia

939393
888888
525252
4A4A4A
242424

Shades & Tints Shades & Tints

#33BEAD

Dark
Light

#7C89A3

Dark
Light

#932F5B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #33bead;
  --color-2: #7c89a3;
  --color-3: #932f5b;
  --color-4: #534647;
  --color-5: #212528;
}

SCSS

$color-1: #33bead;
$color-2: #7c89a3;
$color-3: #932f5b;
$color-4: #534647;
$color-5: #212528;

TAILWIND

colors: {
  'brand-1': '#33bead',
  'brand-2': '#7c89a3',
  'brand-3': '#932f5b',
  'brand-4': '#534647',
  'brand-5': '#212528',
}

RGB Array

[51, 190, 173], [124, 137, 163], [147, 47, 91], [83, 70, 71], [33, 37, 40]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #33BEAD, #7C89A3, #932F5B, #534647, #212528 is ideal for: brand design, premium product pages, magazine layouts, tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #33bead; --color-2: #7c89a3; --color-3: #932f5b; --color-4: #534647; --color-5: #212528. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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 finance, legal, luxury industries. Restrained colors convey professionalism and trust. 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