← Back to Editor

#28BD9C · #570B0B · #F0BE0C · #470A3B · #BD0B52

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial App

Color Details Color Details

#28BD9C

Mineral Blue · LightSeaGreen · Mint Ice

HEX
#28BD9C
RGB
rgb(40, 189, 156)
HSL
hsl(167, 65%, 45%)
HSB
hsb(167, 79%, 74%)
CMYK
cmyk(79%, 0%, 17%, 26%)
Oklch
oklch(71.6% 0.129 173.3)

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

#570B0B

Vermilion · Maroon · Deep Berry

HEX
#570B0B
RGB
rgb(87, 11, 11)
HSL
hsl(0, 78%, 19%)
HSB
hsb(0, 87%, 34%)
CMYK
cmyk(0%, 87%, 87%, 66%)
Oklch
oklch(29.7% 0.108 26.9)

Traditional「Vermilion」· Paint「Deep Berry」· Creative Blush Sunrise

#F0BE0C

Ochre · Orange · Honey Gold

HEX
#F0BE0C
RGB
rgb(240, 190, 12)
HSL
hsl(47, 90%, 49%)
HSB
hsb(47, 95%, 94%)
CMYK
cmyk(0%, 21%, 95%, 6%)
Oklch
oklch(82.3% 0.167 89.2)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#470A3B

Rose Purple · MidnightBlue · Dark Purple

HEX
#470A3B
RGB
rgb(71, 10, 59)
HSL
hsl(312, 75%, 16%)
HSB
hsb(312, 86%, 28%)
CMYK
cmyk(0%, 86%, 17%, 72%)
Oklch
oklch(28.0% 0.107 337.5)

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

#BD0B52

Dark Violet · Crimson · Camellia

HEX
#BD0B52
RGB
rgb(189, 11, 82)
HSL
hsl(336, 89%, 39%)
HSB
hsb(336, 94%, 74%)
CMYK
cmyk(0%, 94%, 57%, 26%)
Oklch
oklch(51.5% 0.202 7.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

28BD9C
BD2848

Analogous

28BD52
28BD9C
2893BD

Triadic

28BD9C
9D28BD
BD9D28

Split-Comp.

28BD9C
BD2893
BD5228

Tetradic

28BD9C
5228BD
BD2848
93BD28

Contrast Matrix WCAG 2.1 Contrast

28BD9C
570B0B
F0BE0C
470A3B
BD0B52
—
6.1
AA
1.4
Fail
6.4
AA
2.7
Fail
6.1
AA
—
8.3
AAA
1.1
Fail
2.3
Fail
1.4
Fail
8.3
AAA
—
8.8
AAA
3.6
AA Large
6.4
AA
1.1
Fail
8.8
AAA
—
2.4
Fail
2.7
Fail
2.3
Fail
3.6
AA Large
2.4
Fail
—
White BG
2.4Fail
14.4AAA
1.7Fail
15.3AAA
6.3AA
Black BG
8.8AAA
1.5Fail
12.1AAA
1.4Fail
3.3AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

696AA4
36350B
DADA37
2D2C2F
706E41

Deuteranopia

6055A6
3B400B
DDE141
30352C
7A883D

Tritanopia

2FAAAC
530B0B
EE5961
442624
B43330

Achromatopsia

8D8D8D
222222
B9B9B9
222222
484848

Shades & Tints Shades & Tints

#28BD9C

Dark
Light

#570B0B

Dark
Light

#F0BE0C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #28bd9c;
  --color-2: #570b0b;
  --color-3: #f0be0c;
  --color-4: #470a3b;
  --color-5: #bd0b52;
}

SCSS

$color-1: #28bd9c;
$color-2: #570b0b;
$color-3: #f0be0c;
$color-4: #470a3b;
$color-5: #bd0b52;

TAILWIND

colors: {
  'brand-1': '#28bd9c',
  'brand-2': '#570b0b',
  'brand-3': '#f0be0c',
  'brand-4': '#470a3b',
  'brand-5': '#bd0b52',
}

RGB Array

[40, 189, 156], [87, 11, 11], [240, 190, 12], [71, 10, 59], [189, 11, 82]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #28BD9C, #570B0B, #F0BE0C, #470A3B, #BD0B52 is ideal for: social media posters, mobile apps, e-commerce promos, tech websites, dark mode UIs, game UIs. Vivid colors effectively attract user attention. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #28bd9c; --color-2: #570b0b; --color-3: #f0be0c; --color-4: #470a3b; --color-5: #bd0b52. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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