Sign Up Sign Up
Fizzy12

Fizzy12

12-color palette · Warm · Mixed · Complementary harmony

Back to Library

Fizzy12

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

Modify
Vibrant 12 colors Warm Mixed Complementary bright qirlfriend newyearsglamourcontest
Likes 37
Colors 12

CSS variables

:root {
  --c-vibrant-1: #FFAE67;
  --c-vibrant-2: #FF40CC;
  --c-vibrant-3: #7A18AF;
  --c-vibrant-4: #0E0730;
  --c-vibrant-5: #5B09F2;
  --c-vibrant-6: #9962FF;
  --c-vibrant-7: #ED9EFF;
  --c-vibrant-8: #CCFFC1;
  --c-vibrant-9: #60D946;
  --c-vibrant-10: #029A80;
  --c-vibrant-11: #042D5B;
  --c-vibrant-12: #38E6C8;
}

About this palette

This 12-color vibrant palette runs from Frosted Mint Hills (#CCFFC1) as its lightest tone to Cosmic Void (#0E0730) as its darkest. It blends Mango Salsa, Mat Dazzle Rose, Fuchsia Nebula, Cosmic Void, Wèi Lán Azure, Irrigo Purple, Party Pig, Frosted Mint Hills, Scorpion Green, Paolo Veronese Green, Marine and Fresh Turquoise into a single set you can drop straight into a UI. Of its 66 color pairings, 17 meet the WCAG AA contrast threshold (4.5:1) for body text — the strongest is #0E0730 on #CCFFC1 at 17.07:1.

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

Color breakdown

Mango Salsa #FFAE67
RGB
rgb(255, 174, 103)
HSL
hsl(28, 100%, 70%)
Luminance
0.525
Mat Dazzle Rose #FF40CC
RGB
rgb(255, 64, 204)
HSL
hsl(316, 100%, 63%)
Luminance
0.293
Fuchsia Nebula #7A18AF
RGB
rgb(122, 24, 175)
HSL
hsl(279, 76%, 39%)
Luminance
0.079
Cosmic Void #0E0730
RGB
rgb(14, 7, 48)
HSL
hsl(250, 75%, 11%)
Luminance
0.005
Wèi Lán Azure #5B09F2
RGB
rgb(91, 9, 242)
HSL
hsl(261, 93%, 49%)
Luminance
0.088
Irrigo Purple #9962FF
RGB
rgb(153, 98, 255)
HSL
hsl(261, 100%, 69%)
Luminance
0.227
Party Pig #ED9EFF
RGB
rgb(237, 158, 255)
HSL
hsl(289, 100%, 81%)
Luminance
0.497
Frosted Mint Hills #CCFFC1
RGB
rgb(204, 255, 193)
HSL
hsl(109, 100%, 88%)
Luminance
0.882
Scorpion Green #60D946
RGB
rgb(96, 217, 70)
HSL
hsl(109, 66%, 56%)
Luminance
0.526
Paolo Veronese Green #029A80
RGB
rgb(2, 154, 128)
HSL
hsl(170, 97%, 31%)
Luminance
0.247
Marine #042D5B
RGB
rgb(4, 45, 91)
HSL
hsl(212, 92%, 19%)
Luminance
0.027
Fresh Turquoise #38E6C8
RGB
rgb(56, 230, 200)
HSL
hsl(170, 78%, 56%)
Luminance
0.616

Contrast & accessibility

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

Aa #0E0730 on #CCFFC1 17.07:1 AAA
Aa #0E0730 on #38E6C8 12.20:1 AAA
Aa #CCFFC1 on #042D5B 12.17:1 AAA
Aa #FFAE67 on #0E0730 10.54:1 AAA
Aa #0E0730 on #60D946 10.54:1 AAA
Aa #0E0730 on #ED9EFF 10.02:1 AAA
Aa #042D5B on #38E6C8 8.70:1 AAA
Aa #60D946 on #042D5B 7.52:1 AAA
Aa #FFAE67 on #042D5B 7.51:1 AAA
Aa #7A18AF on #CCFFC1 7.23:1 AAA
Aa #ED9EFF on #042D5B 7.14:1 AAA
Aa #5B09F2 on #CCFFC1 6.74:1 AA
Aa #FF40CC on #0E0730 6.28:1 AA
Aa #0E0730 on #029A80 5.44:1 AA
Aa #7A18AF on #38E6C8 5.17:1 AA
Aa #0E0730 on #9962FF 5.08:1 AA
Aa #5B09F2 on #38E6C8 4.82:1 AA
Aa #FF40CC on #042D5B 4.48:1 AA Large
Aa #7A18AF on #60D946 4.47:1 AA Large
Aa #FFAE67 on #7A18AF 4.46:1 AA Large
Aa #7A18AF on #ED9EFF 4.24:1 AA Large
Aa #FFAE67 on #5B09F2 4.16:1 AA Large
Aa #5B09F2 on #60D946 4.16:1 AA Large
Aa #5B09F2 on #ED9EFF 3.95:1 AA Large
Aa #029A80 on #042D5B 3.88:1 AA Large
Aa #9962FF on #042D5B 3.62:1 AA Large
Aa #9962FF on #CCFFC1 3.36:1 AA Large
Aa #CCFFC1 on #029A80 3.14:1 AA Large
Aa #FF40CC on #CCFFC1 2.72:1 Fail
Aa #FF40CC on #7A18AF 2.66:1 Fail
Aa #0E0730 on #5B09F2 2.53:1 Fail
Aa #FF40CC on #5B09F2 2.48:1 Fail
Aa #9962FF on #38E6C8 2.40:1 Fail
Aa #7A18AF on #0E0730 2.36:1 Fail
Aa #7A18AF on #029A80 2.30:1 Fail
Aa #029A80 on #38E6C8 2.24:1 Fail
Aa #7A18AF on #9962FF 2.15:1 Fail
Aa #5B09F2 on #029A80 2.15:1 Fail
Aa #9962FF on #60D946 2.08:1 Fail
Aa #FFAE67 on #9962FF 2.07:1 Fail
Aa #5B09F2 on #9962FF 2.00:1 Fail
Aa #9962FF on #ED9EFF 1.97:1 Fail
Aa #FFAE67 on #029A80 1.94:1 Fail
Aa #FF40CC on #38E6C8 1.94:1 Fail
Aa #60D946 on #029A80 1.94:1 Fail
Aa #ED9EFF on #029A80 1.84:1 Fail
Aa #5B09F2 on #042D5B 1.81:1 Fail
Aa #ED9EFF on #CCFFC1 1.70:1 Fail
Aa #FFAE67 on #FF40CC 1.68:1 Fail
Aa #FF40CC on #60D946 1.68:1 Fail
Aa #7A18AF on #042D5B 1.68:1 Fail
Aa #FFAE67 on #CCFFC1 1.62:1 Fail
Aa #CCFFC1 on #60D946 1.62:1 Fail
Aa #FF40CC on #ED9EFF 1.59:1 Fail
Aa #0E0730 on #042D5B 1.40:1 Fail
Aa #CCFFC1 on #38E6C8 1.40:1 Fail
Aa #FF40CC on #9962FF 1.24:1 Fail
Aa #ED9EFF on #38E6C8 1.22:1 Fail
Aa #FFAE67 on #38E6C8 1.16:1 Fail
Aa #FF40CC on #029A80 1.16:1 Fail
Aa #60D946 on #38E6C8 1.16:1 Fail
Aa #7A18AF on #5B09F2 1.07:1 Fail
Aa #9962FF on #029A80 1.07:1 Fail
Aa #FFAE67 on #ED9EFF 1.05:1 Fail
Aa #ED9EFF on #60D946 1.05:1 Fail
Aa #FFAE67 on #60D946 1.00: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