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

Arch

Палітра з 11 кольорів · Холодні · Змішані · Аналогова гармонія

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

Arch

Палітра з 11 кольорів · Холодні кольори · Змішані тони · Аналогова гармонія

Редагувати
Приглушені 11 кольорів Холодні Змішані Аналогова pink arch blurple 11colors
Вподобання 458
Кольори 11

CSS-змінні

:root {
  --c-muted-1: #323348;
  --c-muted-2: #3F4873;
  --c-muted-3: #4C5797;
  --c-muted-4: #616FAE;
  --c-muted-5: #757AB2;
  --c-muted-6: #9288BD;
  --c-muted-7: #A097C4;
  --c-muted-8: #D9B7D8;
  --c-muted-9: #FDC5C6;
  --c-muted-10: #FEE7D5;
  --c-muted-11: #FDFDFF;
}

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

Ця приглушена палітра з 11 кольорів охоплює діапазон від Pale Grey (#FDFDFF), найсвітлішого тону, до Deep Velvet (#323348), найтемнішого. Вона об'єднує Deep Velvet, Constellation Blue, Onion Skin Blue, Loch Ness, Ontario Violet, Heliotropic Mauve, Majestic Violet, French Lilac, Crystal Rose, Mood Lighting та Pale Grey в один набір, який можна одразу перенести в інтерфейс. Пар кольорів у палітрі: 55. Поріг контрастності WCAG AA (4,5:1) для основного тексту проходять 12 з них, найконтрастніша — #323348 на #FDFDFF (12,14:1).

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

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

Deep Velvet #323348
RGB
rgb(50, 51, 72)
HSL
hsl(237, 18%, 24%)
Яскравість
0,035
Constellation Blue #3F4873
RGB
rgb(63, 72, 115)
HSL
hsl(230, 29%, 35%)
Яскравість
0,069
Onion Skin Blue #4C5797
RGB
rgb(76, 87, 151)
HSL
hsl(231, 33%, 45%)
Яскравість
0,106
Loch Ness #616FAE
RGB
rgb(97, 111, 174)
HSL
hsl(229, 32%, 53%)
Яскравість
0,170
Ontario Violet #757AB2
RGB
rgb(117, 122, 178)
HSL
hsl(235, 28%, 58%)
Яскравість
0,209
Heliotropic Mauve #9288BD
RGB
rgb(146, 136, 189)
HSL
hsl(251, 29%, 64%)
Яскравість
0,274
Majestic Violet #A097C4
RGB
rgb(160, 151, 196)
HSL
hsl(252, 28%, 68%)
Яскравість
0,336
French Lilac #D9B7D8
RGB
rgb(217, 183, 216)
HSL
hsl(302, 31%, 78%)
Яскравість
0,536
Crystal Rose #FDC5C6
RGB
rgb(253, 197, 198)
HSL
hsl(359, 93%, 88%)
Яскравість
0,649
Mood Lighting #FEE7D5
RGB
rgb(254, 231, 213)
HSL
hsl(26, 95%, 92%)
Яскравість
0,830
Pale Grey #FDFDFF
RGB
rgb(253, 253, 255)
HSL
hsl(240, 100%, 100%)
Яскравість
0,984

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

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

Aa #323348 на #FDFDFF 12,14:1 AAA
Aa #323348 на #FEE7D5 10,34:1 AAA
Aa #3F4873 на #FDFDFF 8,66:1 AAA
Aa #323348 на #FDC5C6 8,21:1 AAA
Aa #3F4873 на #FEE7D5 7,38:1 AAA
Aa #323348 на #D9B7D8 6,88:1 AA
Aa #4C5797 на #FDFDFF 6,63:1 AA
Aa #3F4873 на #FDC5C6 5,86:1 AA
Aa #4C5797 на #FEE7D5 5,65:1 AA
Aa #3F4873 на #D9B7D8 4,91:1 AA
Aa #616FAE на #FDFDFF 4,71:1 AA
Aa #323348 на #A097C4 4,53:1 AA
Aa #4C5797 на #FDC5C6 4,48:1 AA, великий текст
Aa #616FAE на #FEE7D5 4,01:1 AA, великий текст
Aa #757AB2 на #FDFDFF 3,99:1 AA, великий текст
Aa #323348 на #9288BD 3,80:1 AA, великий текст
Aa #4C5797 на #D9B7D8 3,76:1 AA, великий текст
Aa #757AB2 на #FEE7D5 3,40:1 AA, великий текст
Aa #3F4873 на #A097C4 3,24:1 AA, великий текст
Aa #9288BD на #FDFDFF 3,19:1 AA, великий текст
Aa #616FAE на #FDC5C6 3,18:1 AA, великий текст
Aa #323348 на #757AB2 3,04:1 AA, великий текст
Aa #3F4873 на #9288BD 2,72:1 Не проходить
Aa #9288BD на #FEE7D5 2,72:1 Не проходить
Aa #757AB2 на #FDC5C6 2,70:1 Не проходить
Aa #A097C4 на #FDFDFF 2,68:1 Не проходить
Aa #616FAE на #D9B7D8 2,67:1 Не проходить
Aa #323348 на #616FAE 2,58:1 Не проходить
Aa #4C5797 на #A097C4 2,48:1 Не проходить
Aa #A097C4 на #FEE7D5 2,28:1 Не проходить
Aa #757AB2 на #D9B7D8 2,26:1 Не проходить
Aa #3F4873 на #757AB2 2,17:1 Не проходить
Aa #9288BD на #FDC5C6 2,16:1 Не проходить
Aa #4C5797 на #9288BD 2,08:1 Не проходить
Aa #3F4873 на #616FAE 1,84:1 Не проходить
Aa #323348 на #4C5797 1,83:1 Не проходить
Aa #9288BD на #D9B7D8 1,81:1 Не проходить
Aa #A097C4 на #FDC5C6 1,81:1 Не проходить
Aa #616FAE на #A097C4 1,76:1 Не проходить
Aa #D9B7D8 на #FDFDFF 1,76:1 Не проходить
Aa #4C5797 на #757AB2 1,66:1 Не проходить
Aa #A097C4 на #D9B7D8 1,52:1 Не проходить
Aa #D9B7D8 на #FEE7D5 1,50:1 Не проходить
Aa #757AB2 на #A097C4 1,49:1 Не проходить
Aa #FDC5C6 на #FDFDFF 1,48:1 Не проходить
Aa #616FAE на #9288BD 1,47:1 Не проходить
Aa #4C5797 на #616FAE 1,41:1 Не проходить
Aa #323348 на #3F4873 1,40:1 Не проходить
Aa #3F4873 на #4C5797 1,31:1 Не проходить
Aa #FDC5C6 на #FEE7D5 1,26:1 Не проходить
Aa #757AB2 на #9288BD 1,25:1 Не проходить
Aa #9288BD на #A097C4 1,19:1 Не проходить
Aa #D9B7D8 на #FDC5C6 1,19:1 Не проходить
Aa #616FAE на #757AB2 1,18:1 Не проходить
Aa #FEE7D5 на #FDFDFF 1,17:1 Не проходить

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

#222831 #393E46 #00ADB5 #EEEEEE
4 кольори
#F9F7F7 #DBE2EF #3F72AF #112D4E
4 кольори
#1B262C #0F4C75 #3282B8 #BBE1FA
4 кольори
#08D9D6 #252A34 #FF2E63 #EAEAEA
4 кольори
#27374D #526D82 #9DB2BF #DDE6ED
4 кольори
#364F6B #3FC1C9 #F5F5F5 #FC5185
4 кольори
#E4F9F5 #30E3CA #11999E #40514E
4 кольори
#F0F5F9 #C9D6DF #52616B #1E2022
4 кольори