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

Petrichor

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

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

Petrichor

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

Редагувати
Приглушені 12 кольорів Холодні Змішані Аналогова green blue soft muted
Вподобання 44
Кольори 12

CSS-змінні

:root {
  --c-muted-1: #445369;
  --c-muted-2: #586A76;
  --c-muted-3: #677081;
  --c-muted-4: #7A8AA1;
  --c-muted-5: #85A7B4;
  --c-muted-6: #97ADB6;
  --c-muted-7: #9FB3CC;
  --c-muted-8: #BBE3D8;
  --c-muted-9: #497173;
  --c-muted-10: #5B837F;
  --c-muted-11: #558B92;
  --c-muted-12: #6C8D7B;
}

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

Ця приглушена палітра з 12 кольорів охоплює діапазон від Serendipity (#BBE3D8), найсвітлішого тону, до Into the Stratosphere (#445369), найтемнішого. Вона об'єднує Into the Stratosphere, Blue Insignia, Flintstone, Hilo Bay, Equanimity, Pacific Bliss, Stellar Blue, Serendipity, Vining Ivy, Stream Burble, Dusty Turquoise та Hanging Vine в один набір, який можна одразу перенести в інтерфейс. Пар кольорів у палітрі: 66. Поріг контрастності WCAG AA (4,5:1) для основного тексту проходить 1 з них, найконтрастніша — #445369 на #BBE3D8 (5,62:1).

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

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

Into the Stratosphere #445369
RGB
rgb(68, 83, 105)
HSL
hsl(216, 21%, 34%)
Яскравість
0,084
Blue Insignia #586A76
RGB
rgb(88, 106, 118)
HSL
hsl(204, 15%, 40%)
Яскравість
0,137
Flintstone #677081
RGB
rgb(103, 112, 129)
HSL
hsl(219, 11%, 45%)
Яскравість
0,161
Hilo Bay #7A8AA1
RGB
rgb(122, 138, 161)
HSL
hsl(215, 17%, 55%)
Яскравість
0,249
Equanimity #85A7B4
RGB
rgb(133, 167, 180)
HSL
hsl(197, 24%, 61%)
Яскравість
0,359
Pacific Bliss #97ADB6
RGB
rgb(151, 173, 182)
HSL
hsl(197, 18%, 65%)
Яскравість
0,398
Stellar Blue #9FB3CC
RGB
rgb(159, 179, 204)
HSL
hsl(213, 31%, 71%)
Яскравість
0,440
Serendipity #BBE3D8
RGB
rgb(187, 227, 216)
HSL
hsl(164, 42%, 81%)
Яскравість
0,705
Vining Ivy #497173
RGB
rgb(73, 113, 115)
HSL
hsl(183, 22%, 37%)
Яскравість
0,145
Stream Burble #5B837F
RGB
rgb(91, 131, 127)
HSL
hsl(174, 18%, 44%)
Яскравість
0,200
Dusty Turquoise #558B92
RGB
rgb(85, 139, 146)
HSL
hsl(187, 26%, 45%)
Яскравість
0,225
Hanging Vine #6C8D7B
RGB
rgb(108, 141, 123)
HSL
hsl(147, 13%, 49%)
Яскравість
0,237

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

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

Aa #445369 на #BBE3D8 5,62:1 AA
Aa #586A76 на #BBE3D8 4,04:1 AA, великий текст
Aa #BBE3D8 на #497173 3,88:1 AA, великий текст
Aa #445369 на #9FB3CC 3,64:1 AA, великий текст
Aa #677081 на #BBE3D8 3,58:1 AA, великий текст
Aa #445369 на #97ADB6 3,34:1 AA, великий текст
Aa #445369 на #85A7B4 3,05:1 AA, великий текст
Aa #BBE3D8 на #5B837F 3,02:1 AA, великий текст
Aa #BBE3D8 на #558B92 2,75:1 Не проходить
Aa #BBE3D8 на #6C8D7B 2,63:1 Не проходить
Aa #586A76 на #9FB3CC 2,62:1 Не проходить
Aa #7A8AA1 на #BBE3D8 2,52:1 Не проходить
Aa #9FB3CC на #497173 2,52:1 Не проходить
Aa #586A76 на #97ADB6 2,40:1 Не проходить
Aa #677081 на #9FB3CC 2,33:1 Не проходить
Aa #97ADB6 на #497173 2,30:1 Не проходить
Aa #445369 на #7A8AA1 2,22:1 Не проходить
Aa #586A76 на #85A7B4 2,19:1 Не проходить
Aa #445369 на #6C8D7B 2,13:1 Не проходить
Aa #677081 на #97ADB6 2,13:1 Не проходить
Aa #85A7B4 на #497173 2,10:1 Не проходить
Aa #445369 на #558B92 2,04:1 Не проходить
Aa #9FB3CC на #5B837F 1,96:1 Не проходить
Aa #677081 на #85A7B4 1,94:1 Не проходить
Aa #445369 на #5B837F 1,86:1 Не проходить
Aa #85A7B4 на #BBE3D8 1,84:1 Не проходить
Aa #97ADB6 на #5B837F 1,79:1 Не проходить
Aa #9FB3CC на #558B92 1,78:1 Не проходить
Aa #9FB3CC на #6C8D7B 1,71:1 Не проходить
Aa #97ADB6 на #BBE3D8 1,68:1 Не проходить
Aa #7A8AA1 на #9FB3CC 1,64:1 Не проходить
Aa #85A7B4 на #5B837F 1,64:1 Не проходить
Aa #97ADB6 на #558B92 1,63:1 Не проходить
Aa #586A76 на #7A8AA1 1,60:1 Не проходить
Aa #445369 на #677081 1,57:1 Не проходить
Aa #97ADB6 на #6C8D7B 1,56:1 Не проходить
Aa #7A8AA1 на #497173 1,54:1 Не проходить
Aa #9FB3CC на #BBE3D8 1,54:1 Не проходить
Aa #586A76 на #6C8D7B 1,53:1 Не проходить
Aa #7A8AA1 на #97ADB6 1,50:1 Не проходить
Aa #85A7B4 на #558B92 1,49:1 Не проходить
Aa #586A76 на #558B92 1,47:1 Не проходить
Aa #497173 на #6C8D7B 1,47:1 Не проходить
Aa #445369 на #497173 1,45:1 Не проходить
Aa #85A7B4 на #6C8D7B 1,43:1 Не проходить
Aa #677081 на #7A8AA1 1,42:1 Не проходить
Aa #497173 на #558B92 1,41:1 Не проходить
Aa #445369 на #586A76 1,39:1 Не проходить
Aa #7A8AA1 на #85A7B4 1,37:1 Не проходить
Aa #677081 на #6C8D7B 1,36:1 Не проходить
Aa #586A76 на #5B837F 1,34:1 Не проходить
Aa #677081 на #558B92 1,30:1 Не проходить
Aa #497173 на #5B837F 1,28:1 Не проходить
Aa #7A8AA1 на #5B837F 1,20:1 Не проходить
Aa #85A7B4 на #9FB3CC 1,20:1 Не проходить
Aa #677081 на #5B837F 1,19:1 Не проходить
Aa #5B837F на #6C8D7B 1,15:1 Не проходить
Aa #586A76 на #677081 1,13:1 Не проходить
Aa #85A7B4 на #97ADB6 1,10:1 Не проходить
Aa #5B837F на #558B92 1,10:1 Не проходить
Aa #7A8AA1 на #558B92 1,09:1 Не проходить
Aa #97ADB6 на #9FB3CC 1,09:1 Не проходить
Aa #677081 на #497173 1,08:1 Не проходить
Aa #586A76 на #497173 1,04:1 Не проходить
Aa #7A8AA1 на #6C8D7B 1,04:1 Не проходить
Aa #558B92 на #6C8D7B 1,04: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 кольори