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

Serene12

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

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

Serene12

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

Редагувати
Приглушені 12 кольорів Холодні Змішані Тріадна colorful nature 9 serene
Вподобання 25
Кольори 12

CSS-змінні

:root {
  --c-muted-1: #515D7B;
  --c-muted-2: #697B95;
  --c-muted-3: #9FB2CF;
  --c-muted-4: #667258;
  --c-muted-5: #7F956D;
  --c-muted-6: #A0C68D;
  --c-muted-7: #463E37;
  --c-muted-8: #807560;
  --c-muted-9: #ABA17F;
  --c-muted-10: #9AABA4;
  --c-muted-11: #B9C6BE;
  --c-muted-12: #D8E9E0;
}

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

Ця приглушена палітра з 12 кольорів охоплює діапазон від Clear Camouflage Green (#D8E9E0), найсвітлішого тону, до Turkish Coffee (#463E37), найтемнішого. Вона об'єднує Coastal Fjord, Blue Suede, Stellar Blue, French Tarragon, Green Eyes, Cos, Turkish Coffee, Swamp, Ruskin Room Green, Halcyon Green, Inviting Veranda та Clear Camouflage Green в один набір, який можна одразу перенести в інтерфейс. Пар кольорів у палітрі: 66. Поріг контрастності WCAG AA (4,5:1) для основного тексту проходять 5 з них, найконтрастніша — #463E37 на #D8E9E0 (8,31:1).

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

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

Coastal Fjord #515D7B
RGB
rgb(81, 93, 123)
HSL
hsl(223, 21%, 40%)
Яскравість
0,110
Blue Suede #697B95
RGB
rgb(105, 123, 149)
HSL
hsl(215, 17%, 50%)
Яскравість
0,193
Stellar Blue #9FB2CF
RGB
rgb(159, 178, 207)
HSL
hsl(216, 33%, 72%)
Яскравість
0,437
French Tarragon #667258
RGB
rgb(102, 114, 88)
HSL
hsl(88, 13%, 40%)
Яскравість
0,156
Green Eyes #7F956D
RGB
rgb(127, 149, 109)
HSL
hsl(93, 16%, 51%)
Яскравість
0,271
Cos #A0C68D
RGB
rgb(160, 198, 141)
HSL
hsl(100, 33%, 66%)
Яскравість
0,498
Turkish Coffee #463E37
RGB
rgb(70, 62, 55)
HSL
hsl(28, 12%, 25%)
Яскравість
0,050
Swamp #807560
RGB
rgb(128, 117, 96)
HSL
hsl(39, 14%, 44%)
Яскравість
0,182
Ruskin Room Green #ABA17F
RGB
rgb(171, 161, 127)
HSL
hsl(46, 21%, 58%)
Яскравість
0,357
Halcyon Green #9AABA4
RGB
rgb(154, 171, 164)
HSL
hsl(155, 9%, 64%)
Яскравість
0,387
Inviting Veranda #B9C6BE
RGB
rgb(185, 198, 190)
HSL
hsl(143, 10%, 75%)
Яскравість
0,544
Clear Camouflage Green #D8E9E0
RGB
rgb(216, 233, 224)
HSL
hsl(148, 28%, 88%)
Яскравість
0,783

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

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

Aa #463E37 на #D8E9E0 8,31:1 AAA
Aa #463E37 на #B9C6BE 5,93:1 AA
Aa #A0C68D на #463E37 5,47:1 AA
Aa #515D7B на #D8E9E0 5,20:1 AA
Aa #9FB2CF на #463E37 4,86:1 AA
Aa #463E37 на #9AABA4 4,36:1 AA, великий текст
Aa #463E37 на #ABA17F 4,06:1 AA, великий текст
Aa #667258 на #D8E9E0 4,05:1 AA, великий текст
Aa #515D7B на #B9C6BE 3,71:1 AA, великий текст
Aa #807560 на #D8E9E0 3,60:1 AA, великий текст
Aa #515D7B на #A0C68D 3,42:1 AA, великий текст
Aa #697B95 на #D8E9E0 3,42:1 AA, великий текст
Aa #7F956D на #463E37 3,20:1 AA, великий текст
Aa #515D7B на #9FB2CF 3,04:1 AA, великий текст
Aa #667258 на #B9C6BE 2,89:1 Не проходить
Aa #515D7B на #9AABA4 2,73:1 Не проходить
Aa #667258 на #A0C68D 2,66:1 Не проходить
Aa #7F956D на #D8E9E0 2,59:1 Не проходить
Aa #807560 на #B9C6BE 2,57:1 Не проходить
Aa #515D7B на #ABA17F 2,54:1 Не проходить
Aa #697B95 на #B9C6BE 2,44:1 Не проходить
Aa #697B95 на #463E37 2,43:1 Не проходить
Aa #9FB2CF на #667258 2,37:1 Не проходить
Aa #A0C68D на #807560 2,37:1 Не проходить
Aa #463E37 на #807560 2,31:1 Не проходить
Aa #697B95 на #A0C68D 2,25:1 Не проходить
Aa #667258 на #9AABA4 2,12:1 Не проходить
Aa #9FB2CF на #807560 2,10:1 Не проходить
Aa #667258 на #463E37 2,05:1 Не проходить
Aa #ABA17F на #D8E9E0 2,05:1 Не проходить
Aa #515D7B на #7F956D 2,01:1 Не проходить
Aa #697B95 на #9FB2CF 2,00:1 Не проходить
Aa #667258 на #ABA17F 1,98:1 Не проходить
Aa #9AABA4 на #D8E9E0 1,91:1 Не проходить
Aa #807560 на #9AABA4 1,89:1 Не проходить
Aa #7F956D на #B9C6BE 1,85:1 Не проходить
Aa #697B95 на #9AABA4 1,79:1 Не проходить
Aa #807560 на #ABA17F 1,76:1 Не проходить
Aa #9FB2CF на #D8E9E0 1,71:1 Не проходить
Aa #7F956D на #A0C68D 1,71:1 Не проходить
Aa #697B95 на #ABA17F 1,67:1 Не проходить
Aa #515D7B на #463E37 1,60:1 Не проходить
Aa #667258 на #7F956D 1,56:1 Не проходить
Aa #515D7B на #697B95 1,52:1 Не проходить
Aa #9FB2CF на #7F956D 1,52:1 Не проходить
Aa #A0C68D на #D8E9E0 1,52:1 Не проходить
Aa #ABA17F на #B9C6BE 1,46:1 Не проходить
Aa #515D7B на #807560 1,45:1 Не проходить
Aa #B9C6BE на #D8E9E0 1,40:1 Не проходить
Aa #7F956D на #807560 1,39:1 Не проходить
Aa #7F956D на #9AABA4 1,36:1 Не проходить
Aa #9AABA4 на #B9C6BE 1,36:1 Не проходить
Aa #A0C68D на #ABA17F 1,35:1 Не проходить
Aa #697B95 на #7F956D 1,32:1 Не проходить
Aa #515D7B на #667258 1,28:1 Не проходить
Aa #7F956D на #ABA17F 1,27:1 Не проходить
Aa #A0C68D на #9AABA4 1,25:1 Не проходить
Aa #9FB2CF на #B9C6BE 1,22:1 Не проходить
Aa #9FB2CF на #ABA17F 1,20:1 Не проходить
Aa #697B95 на #667258 1,18:1 Не проходить
Aa #667258 на #807560 1,13:1 Не проходить
Aa #9FB2CF на #A0C68D 1,12:1 Не проходить
Aa #9FB2CF на #9AABA4 1,12:1 Не проходить
Aa #A0C68D на #B9C6BE 1,08:1 Не проходить
Aa #ABA17F на #9AABA4 1,07:1 Не проходить
Aa #697B95 на #807560 1,05: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 кольори