Реєстрація Реєстрація
Pencil Sketch

Pencil Sketch

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

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

Pencil Sketch

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

Редагувати
Яскраві 12 кольорів Теплі Світлі Комплементарна pencilsketch
Вподобання 11
Кольори 12

CSS-змінні

:root {
  --c-vibrant-1: #FFFFE0;
  --c-vibrant-2: #FCEF8D;
  --c-vibrant-3: #F6CE98;
  --c-vibrant-4: #F2A561;
  --c-vibrant-5: #D37B86;
  --c-vibrant-6: #FF2D55;
  --c-vibrant-7: #2DFF69;
  --c-vibrant-8: #AEFFD5;
  --c-vibrant-9: #5998FF;
  --c-vibrant-10: #202020;
  --c-vibrant-11: #606060;
  --c-vibrant-12: #808080;
}

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

Ця яскрава палітра з 12 кольорів охоплює діапазон від Winter Duvet (#FFFFE0), найсвітлішого тону, до Lead (#202020), найтемнішого. Вона об'єднує Winter Duvet, The First Daffodil, Yellow Lotus, Shrimp Cocktail, Victorian Rouge, Reddish Pink, Synthetic Spearmint, Mintastic, Blue Chaos, Lead, Kettleman та Grey в один набір, який можна одразу перенести в інтерфейс. Пар кольорів у палітрі: 66. Поріг контрастності WCAG AA (4,5:1) для основного тексту проходять 12 з них, найконтрастніша — #FFFFE0 на #202020 (16,01:1).

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

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

Winter Duvet #FFFFE0
RGB
rgb(255, 255, 224)
HSL
hsl(60, 100%, 94%)
Яскравість
0,982
The First Daffodil #FCEF8D
RGB
rgb(252, 239, 141)
HSL
hsl(53, 95%, 77%)
Яскравість
0,844
Yellow Lotus #F6CE98
RGB
rgb(246, 206, 152)
HSL
hsl(34, 84%, 78%)
Яскравість
0,660
Shrimp Cocktail #F2A561
RGB
rgb(242, 165, 97)
HSL
hsl(28, 85%, 66%)
Яскравість
0,467
Victorian Rouge #D37B86
RGB
rgb(211, 123, 134)
HSL
hsl(353, 50%, 65%)
Яскравість
0,297
Reddish Pink #FF2D55
RGB
rgb(255, 45, 85)
HSL
hsl(349, 100%, 59%)
Яскравість
0,238
Synthetic Spearmint #2DFF69
RGB
rgb(45, 255, 105)
HSL
hsl(137, 100%, 59%)
Яскравість
0,731
Mintastic #AEFFD5
RGB
rgb(174, 255, 213)
HSL
hsl(149, 100%, 84%)
Яскравість
0,853
Blue Chaos #5998FF
RGB
rgb(89, 152, 255)
HSL
hsl(217, 100%, 67%)
Яскравість
0,318
Lead #202020
RGB
rgb(32, 32, 32)
HSL
hsl(0, 0%, 13%)
Яскравість
0,014
Kettleman #606060
RGB
rgb(96, 96, 96)
HSL
hsl(0, 0%, 38%)
Яскравість
0,117
Grey #808080
RGB
rgb(128, 128, 128)
HSL
hsl(0, 0%, 50%)
Яскравість
0,216

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

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

Aa #FFFFE0 на #202020 16,01:1 AAA
Aa #AEFFD5 на #202020 14,02:1 AAA
Aa #FCEF8D на #202020 13,87:1 AAA
Aa #2DFF69 на #202020 12,12:1 AAA
Aa #F6CE98 на #202020 11,02:1 AAA
Aa #F2A561 на #202020 8,01:1 AAA
Aa #FFFFE0 на #606060 6,18:1 AA
Aa #5998FF на #202020 5,71:1 AA
Aa #AEFFD5 на #606060 5,41:1 AA
Aa #D37B86 на #202020 5,39:1 AA
Aa #FCEF8D на #606060 5,35:1 AA
Aa #2DFF69 на #606060 4,68:1 AA
Aa #FF2D55 на #202020 4,47:1 AA, великий текст
Aa #F6CE98 на #606060 4,25:1 AA, великий текст
Aa #202020 на #808080 4,13:1 AA, великий текст
Aa #FFFFE0 на #808080 3,88:1 AA, великий текст
Aa #FFFFE0 на #FF2D55 3,58:1 AA, великий текст
Aa #AEFFD5 на #808080 3,40:1 AA, великий текст
Aa #FCEF8D на #808080 3,36:1 AA, великий текст
Aa #FF2D55 на #AEFFD5 3,14:1 AA, великий текст
Aa #FCEF8D на #FF2D55 3,10:1 AA, великий текст
Aa #F2A561 на #606060 3,09:1 AA, великий текст
Aa #FFFFE0 на #D37B86 2,97:1 Не проходить
Aa #2DFF69 на #808080 2,94:1 Не проходить
Aa #FFFFE0 на #5998FF 2,80:1 Не проходить
Aa #FF2D55 на #2DFF69 2,71:1 Не проходить
Aa #F6CE98 на #808080 2,67:1 Не проходить
Aa #D37B86 на #AEFFD5 2,60:1 Не проходить
Aa #202020 на #606060 2,59:1 Не проходить
Aa #FCEF8D на #D37B86 2,57:1 Не проходить
Aa #F6CE98 на #FF2D55 2,47:1 Не проходить
Aa #AEFFD5 на #5998FF 2,45:1 Не проходить
Aa #FCEF8D на #5998FF 2,43:1 Не проходить
Aa #D37B86 на #2DFF69 2,25:1 Не проходить
Aa #5998FF на #606060 2,20:1 Не проходить
Aa #2DFF69 на #5998FF 2,12:1 Не проходить
Aa #D37B86 на #606060 2,08:1 Не проходить
Aa #F6CE98 на #D37B86 2,04:1 Не проходить
Aa #FFFFE0 на #F2A561 2,00:1 Не проходить
Aa #F2A561 на #808080 1,94:1 Не проходить
Aa #F6CE98 на #5998FF 1,93:1 Не проходить
Aa #F2A561 на #FF2D55 1,79:1 Не проходить
Aa #F2A561 на #AEFFD5 1,75:1 Не проходить
Aa #FCEF8D на #F2A561 1,73:1 Не проходить
Aa #FF2D55 на #606060 1,72:1 Не проходить
Aa #606060 на #808080 1,59:1 Не проходить
Aa #F2A561 на #2DFF69 1,51:1 Не проходить
Aa #F2A561 на #D37B86 1,49:1 Не проходить
Aa #FFFFE0 на #F6CE98 1,45:1 Не проходить
Aa #F2A561 на #5998FF 1,40:1 Не проходить
Aa #5998FF на #808080 1,38:1 Не проходить
Aa #F6CE98 на #F2A561 1,37:1 Не проходить
Aa #FFFFE0 на #2DFF69 1,32:1 Не проходить
Aa #D37B86 на #808080 1,31:1 Не проходить
Aa #FF2D55 на #5998FF 1,28:1 Не проходить
Aa #F6CE98 на #AEFFD5 1,27:1 Не проходить
Aa #FCEF8D на #F6CE98 1,26:1 Не проходить
Aa #D37B86 на #FF2D55 1,21:1 Не проходить
Aa #2DFF69 на #AEFFD5 1,16:1 Не проходить
Aa #FFFFE0 на #FCEF8D 1,15:1 Не проходить
Aa #FFFFE0 на #AEFFD5 1,14:1 Не проходить
Aa #FCEF8D на #2DFF69 1,14:1 Не проходить
Aa #F6CE98 на #2DFF69 1,10:1 Не проходить
Aa #FF2D55 на #808080 1,08:1 Не проходить
Aa #D37B86 на #5998FF 1,06:1 Не проходить
Aa #FCEF8D на #AEFFD5 1,01:1 Не проходить

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

#FFF5E4 #FFE3E1 #FFD1D1 #FF9494
4 кольори
#F9F5F6 #F8E8EE #FDCEDF #F2BED1
4 кольори
#FFC7C7 #FFE2E2 #F6F6F6 #8785A2
4 кольори
#AD8B73 #CEAB93 #E3CAA5 #FFFBE9
4 кольори
#F38181 #FCE38A #EAFFD0 #95E1D3
4 кольори
#B7C4CF #EEE3CB #D7C0AE #967E76
4 кольори
#FFEDDB #EDCDBB #E3B7A0 #BF9270
4 кольори
#8D7B68 #A4907C #C8B6A6 #F1DEC9
4 кольори