Sign Up Sign Up
BLOC10

BLOC10

10-color palette · Warm · Mixed · Complementary harmony

Back to Library

BLOC10

10-color palette · Warm temperature · Mixed tone · Complementary harmony

Modify
Vibrant 10 colors Warm Mixed Complementary vibrant saturated bright 10
Likes 38
Colors 10

CSS variables

:root {
  --c-vibrant-1: #FFFFFF;
  --c-vibrant-2: #FF0077;
  --c-vibrant-3: #FFD000;
  --c-vibrant-4: #22F800;
  --c-vibrant-5: #00E1FF;
  --c-vibrant-6: #BA0000;
  --c-vibrant-7: #E85800;
  --c-vibrant-8: #0583CC;
  --c-vibrant-9: #8200E2;
  --c-vibrant-10: #36005C;
}

About this palette

This 10-color vibrant palette runs from White (#FFFFFF) as its lightest tone to Cotinga Purple (#36005C) as its darkest. It blends White, Guns N’ Roses, Electric Glow, Green Screen, Neon Blue, Harlock’s Cape, Poppy Flower, Lvivian Rain, Electric Violet and Cotinga Purple into a single set you can drop straight into a UI. Of its 45 color pairings, 10 meet the WCAG AA contrast threshold (4.5:1) for body text — the strongest is #FFFFFF on #36005C at 16.01:1.

A versatile palette suitable for marketing pages, product hero blocks, illustrations, and accent UI states.

Color breakdown

White #FFFFFF
RGB
rgb(255, 255, 255)
HSL
hsl(0, 0%, 100%)
Luminance
1.000
Guns N’ Roses #FF0077
RGB
rgb(255, 0, 119)
HSL
hsl(332, 100%, 50%)
Luminance
0.226
Electric Glow #FFD000
RGB
rgb(255, 208, 0)
HSL
hsl(49, 100%, 50%)
Luminance
0.664
Green Screen #22F800
RGB
rgb(34, 248, 0)
HSL
hsl(112, 100%, 49%)
Luminance
0.675
Neon Blue #00E1FF
RGB
rgb(0, 225, 255)
HSL
hsl(187, 100%, 50%)
Luminance
0.611
Harlock’s Cape #BA0000
RGB
rgb(186, 0, 0)
HSL
hsl(0, 100%, 36%)
Luminance
0.104
Poppy Flower #E85800
RGB
rgb(232, 88, 0)
HSL
hsl(23, 100%, 45%)
Luminance
0.241
Lvivian Rain #0583CC
RGB
rgb(5, 131, 204)
HSL
hsl(202, 95%, 41%)
Luminance
0.206
Electric Violet #8200E2
RGB
rgb(130, 0, 226)
HSL
hsl(275, 100%, 44%)
Luminance
0.102
Cotinga Purple #36005C
RGB
rgb(54, 0, 92)
HSL
hsl(275, 100%, 18%)
Luminance
0.016

Contrast & accessibility

10 of 45 color pairings meet the WCAG AA contrast threshold (4.5:1) for body text.

Aa #FFFFFF on #36005C 16.01:1 AAA
Aa #22F800 on #36005C 11.05:1 AAA
Aa #FFD000 on #36005C 10.88:1 AAA
Aa #00E1FF on #36005C 10.08:1 AAA
Aa #FFFFFF on #8200E2 6.89:1 AA
Aa #FFFFFF on #BA0000 6.80:1 AA
Aa #22F800 on #8200E2 4.76:1 AA
Aa #22F800 on #BA0000 4.69:1 AA
Aa #FFD000 on #8200E2 4.68:1 AA
Aa #FFD000 on #BA0000 4.62:1 AA
Aa #E85800 on #36005C 4.44:1 AA Large
Aa #00E1FF on #8200E2 4.34:1 AA Large
Aa #00E1FF on #BA0000 4.28:1 AA Large
Aa #FF0077 on #36005C 4.21:1 AA Large
Aa #FFFFFF on #0583CC 4.10:1 AA Large
Aa #0583CC on #36005C 3.91:1 AA Large
Aa #FFFFFF on #FF0077 3.81:1 AA Large
Aa #FFFFFF on #E85800 3.60:1 AA Large
Aa #22F800 on #0583CC 2.83:1 Fail
Aa #FFD000 on #0583CC 2.79:1 Fail
Aa #FF0077 on #22F800 2.63:1 Fail
Aa #FF0077 on #FFD000 2.59:1 Fail
Aa #00E1FF on #0583CC 2.58:1 Fail
Aa #22F800 on #E85800 2.49:1 Fail
Aa #FFD000 on #E85800 2.45:1 Fail
Aa #FF0077 on #00E1FF 2.39:1 Fail
Aa #BA0000 on #36005C 2.35:1 Fail
Aa #8200E2 on #36005C 2.32:1 Fail
Aa #00E1FF on #E85800 2.27:1 Fail
Aa #E85800 on #8200E2 1.91:1 Fail
Aa #BA0000 on #E85800 1.89:1 Fail
Aa #FF0077 on #8200E2 1.81:1 Fail
Aa #FF0077 on #BA0000 1.79:1 Fail
Aa #0583CC on #8200E2 1.68:1 Fail
Aa #BA0000 on #0583CC 1.66:1 Fail
Aa #FFFFFF on #00E1FF 1.59:1 Fail
Aa #FFFFFF on #FFD000 1.47:1 Fail
Aa #FFFFFF on #22F800 1.45:1 Fail
Aa #E85800 on #0583CC 1.14:1 Fail
Aa #22F800 on #00E1FF 1.10:1 Fail
Aa #FF0077 on #0583CC 1.08:1 Fail
Aa #FFD000 on #00E1FF 1.08:1 Fail
Aa #FF0077 on #E85800 1.06:1 Fail
Aa #FFD000 on #22F800 1.02:1 Fail
Aa #BA0000 on #8200E2 1.01:1 Fail

Similar palettes

#F9ED69 #F08A5D #B83B5E #6A2C70
4 colors
#7D5A50 #B4846C #E5B299 #FCDEC0
4 colors
#FFF8EA #9E7676 #815B5B #594545
4 colors
#2C3639 #3F4E4F #A27B5C #DCD7C9
4 colors
#F67280 #C06C84 #6C5B7B #355C7D
4 colors
#2B2E4A #E84545 #903749 #53354A
4 colors
#E5D9B6 #A4BE7B #5F8D4E #285430
4 colors
#A9907E #F3DEBA #ABC4AA #675D50
4 colors