Реєстрація Реєстрація
Fade12

Fade12

Палітра з 12 кольорів · Теплі · Змішані · Комплементарна гармонія

До бібліотеки

Fade12

Палітра з 12 кольорів · Теплі кольори · Змішані тони · Комплементарна гармонія

Редагувати
Яскраві 12 кольорів Теплі Змішані Комплементарна 12colors
Вподобання 9
Кольори 12

CSS-змінні

:root {
  --c-vibrant-1: #FE5F55;
  --c-vibrant-2: #F5D549;
  --c-vibrant-3: #5ABD5C;
  --c-vibrant-4: #423A60;
  --c-vibrant-5: #9C579E;
  --c-vibrant-6: #E986C6;
  --c-vibrant-7: #FFDCA8;
  --c-vibrant-8: #C1FFA8;
  --c-vibrant-9: #A8D9FF;
  --c-vibrant-10: #000019;
  --c-vibrant-11: #828282;
  --c-vibrant-12: #F0FFFE;
}

Про цю палітру

Ця яскрава палітра з 12 кольорів охоплює діапазон від Vapour (#F0FFFE), найсвітлішого тону, до Benthic Black (#000019), найтемнішого. Вона об'єднує Sunset Orange, Anna Banana, Forest Maid, Patriot Blue, Heath Spotted Orchid, Blushed Bombshell, Sarcoline, Menthol, Malmö FF, Benthic Black, Squant та Vapour в один набір, який можна одразу перенести в інтерфейс. Пар кольорів у палітрі: 66. Поріг контрастності WCAG AA (4,5:1) для основного тексту проходять 15 з них, найконтрастніша — #000019 на #F0FFFE (20,16:1).

Універсальна палітра для маркетингових сторінок, hero-блоків продукту, ілюстрацій і акцентних станів інтерфейсу.

Розбір кольорів

Sunset Orange #FE5F55
RGB
rgb(254, 95, 85)
HSL
hsl(4, 99%, 66%)
Яскравість
0,299
Anna Banana #F5D549
RGB
rgb(245, 213, 73)
HSL
hsl(49, 90%, 62%)
Яскравість
0,675
Forest Maid #5ABD5C
RGB
rgb(90, 189, 92)
HSL
hsl(121, 43%, 55%)
Яскравість
0,393
Patriot Blue #423A60
RGB
rgb(66, 58, 96)
HSL
hsl(253, 25%, 30%)
Яскравість
0,050
Heath Spotted Orchid #9C579E
RGB
rgb(156, 87, 158)
HSL
hsl(298, 29%, 48%)
Яскравість
0,164
Blushed Bombshell #E986C6
RGB
rgb(233, 134, 198)
HSL
hsl(321, 69%, 72%)
Яскравість
0,385
Sarcoline #FFDCA8
RGB
rgb(255, 220, 168)
HSL
hsl(36, 100%, 83%)
Яскравість
0,753
Menthol #C1FFA8
RGB
rgb(193, 255, 168)
HSL
hsl(103, 100%, 83%)
Яскравість
0,857
Malmö FF #A8D9FF
RGB
rgb(168, 217, 255)
HSL
hsl(206, 100%, 83%)
Яскравість
0,652
Benthic Black #000019
RGB
rgb(0, 0, 25)
HSL
hsl(240, 100%, 5%)
Яскравість
0,001
Squant #828282
RGB
rgb(130, 130, 130)
HSL
hsl(0, 0%, 51%)
Яскравість
0,223
Vapour #F0FFFE
RGB
rgb(240, 255, 254)
HSL
hsl(176, 100%, 97%)
Яскравість
0,972

Контраст і доступність

Пар кольорів у палітрі: 66. Поріг контрастності WCAG AA (4,5:1) для основного тексту проходять 15 з них.

Aa #000019 на #F0FFFE 20,16:1 AAA
Aa #C1FFA8 на #000019 17,89:1 AAA
Aa #FFDCA8 на #000019 15,83:1 AAA
Aa #F5D549 на #000019 14,30:1 AAA
Aa #A8D9FF на #000019 13,84:1 AAA
Aa #423A60 на #F0FFFE 10,19:1 AAA
Aa #423A60 на #C1FFA8 9,04:1 AAA
Aa #5ABD5C на #000019 8,75:1 AAA
Aa #E986C6 на #000019 8,57:1 AAA
Aa #423A60 на #FFDCA8 8,00:1 AAA
Aa #F5D549 на #423A60 7,23:1 AAA
Aa #423A60 на #A8D9FF 7,00:1 AAA
Aa #FE5F55 на #000019 6,89:1 AA
Aa #000019 на #828282 5,39:1 AA
Aa #9C579E на #F0FFFE 4,79:1 AA
Aa #5ABD5C на #423A60 4,42:1 AA, великий текст
Aa #423A60 на #E986C6 4,33:1 AA, великий текст
Aa #9C579E на #C1FFA8 4,25:1 AA, великий текст
Aa #9C579E на #000019 4,21:1 AA, великий текст
Aa #9C579E на #FFDCA8 3,76:1 AA, великий текст
Aa #828282 на #F0FFFE 3,74:1 AA, великий текст
Aa #FE5F55 на #423A60 3,48:1 AA, великий текст
Aa #F5D549 на #9C579E 3,39:1 AA, великий текст
Aa #C1FFA8 на #828282 3,32:1 AA, великий текст
Aa #9C579E на #A8D9FF 3,29:1 AA, великий текст
Aa #FFDCA8 на #828282 2,94:1 Не проходить
Aa #FE5F55 на #F0FFFE 2,93:1 Не проходить
Aa #423A60 на #828282 2,72:1 Не проходить
Aa #F5D549 на #828282 2,65:1 Не проходить
Aa #FE5F55 на #C1FFA8 2,60:1 Не проходить
Aa #A8D9FF на #828282 2,57:1 Не проходить
Aa #E986C6 на #F0FFFE 2,35:1 Не проходить
Aa #FE5F55 на #FFDCA8 2,30:1 Не проходить
Aa #5ABD5C на #F0FFFE 2,30:1 Не проходить
Aa #423A60 на #9C579E 2,13:1 Не проходить
Aa #E986C6 на #C1FFA8 2,09:1 Не проходить
Aa #FE5F55 на #F5D549 2,08:1 Не проходить
Aa #5ABD5C на #9C579E 2,08:1 Не проходить
Aa #5ABD5C на #C1FFA8 2,05:1 Не проходить
Aa #9C579E на #E986C6 2,03:1 Не проходить
Aa #FE5F55 на #A8D9FF 2,01:1 Не проходить
Aa #423A60 на #000019 1,98:1 Не проходить
Aa #E986C6 на #FFDCA8 1,85:1 Не проходить
Aa #5ABD5C на #FFDCA8 1,81:1 Не проходить
Aa #F5D549 на #E986C6 1,67:1 Не проходить
Aa #FE5F55 на #9C579E 1,63:1 Не проходить
Aa #F5D549 на #5ABD5C 1,63:1 Не проходить
Aa #5ABD5C на #828282 1,62:1 Не проходить
Aa #E986C6 на #A8D9FF 1,61:1 Не проходить
Aa #E986C6 на #828282 1,59:1 Не проходить
Aa #5ABD5C на #A8D9FF 1,58:1 Не проходить
Aa #A8D9FF на #F0FFFE 1,46:1 Не проходить
Aa #F5D549 на #F0FFFE 1,41:1 Не проходить
Aa #C1FFA8 на #A8D9FF 1,29:1 Не проходить
Aa #FE5F55 на #828282 1,28:1 Не проходить
Aa #9C579E на #828282 1,28:1 Не проходить
Aa #FE5F55 на #5ABD5C 1,27:1 Не проходить
Aa #FFDCA8 на #F0FFFE 1,27:1 Не проходить
Aa #F5D549 на #C1FFA8 1,25:1 Не проходить
Aa #FE5F55 на #E986C6 1,24:1 Не проходить
Aa #FFDCA8 на #A8D9FF 1,14:1 Не проходить
Aa #FFDCA8 на #C1FFA8 1,13:1 Не проходить
Aa #C1FFA8 на #F0FFFE 1,13:1 Не проходить
Aa #F5D549 на #FFDCA8 1,11:1 Не проходить
Aa #F5D549 на #A8D9FF 1,03:1 Не проходить
Aa #5ABD5C на #E986C6 1,02:1 Не проходить

Схожі палітри

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