Wizards Breath 34

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

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

Wizards Breath 34

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

Редагувати

Приглушені 11 кольорів Холодні Змішані Тріадна

Вподобання 6

Кольори 11

CSS-змінні

:root {
  --c-muted-1: #354F5A;
  --c-muted-2: #54929E;
  --c-muted-3: #5BC5A6;
  --c-muted-4: #B1FFAD;
  --c-muted-5: #DBFFC4;
  --c-muted-6: #121212;
  --c-muted-7: #FFFFFF;
  --c-muted-8: #9EF53B;
  --c-muted-9: #63C930;
  --c-muted-10: #7C4D3B;
  --c-muted-11: #552D2D;
}

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

Ця приглушена палітра з 11 кольорів охоплює діапазон від White (#FFFFFF), найсвітлішого тону, до Dark Tone Ink (#121212), найтемнішого. Вона об'єднує Aircraft Blue, Sail Cover, Mermaid’s Kiss, Creamy Mint, Herbal Vapours, Dark Tone Ink, White, Kiwi Pulp, Green High, Cheeky Chestnut та Bratwurst в один набір, який можна одразу перенести в інтерфейс. Пар кольорів у палітрі: 55. Поріг контрастності WCAG AA (4,5:1) для основного тексту проходить 21 з них, найконтрастніша — #121212 на #FFFFFF (18,73:1).

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

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

Aircraft Blue #354F5A

RGB: rgb(53, 79, 90)
HSL: hsl(198, 26%, 28%)
Яскравість: 0,071

Sail Cover #54929E

RGB: rgb(84, 146, 158)
HSL: hsl(190, 31%, 47%)
Яскравість: 0,249

Mermaid’s Kiss #5BC5A6

RGB: rgb(91, 197, 166)
HSL: hsl(162, 48%, 56%)
Яскравість: 0,449

Creamy Mint #B1FFAD

RGB: rgb(177, 255, 173)
HSL: hsl(117, 100%, 84%)
Яскравість: 0,839

Herbal Vapours #DBFFC4

RGB: rgb(219, 255, 196)
HSL: hsl(97, 100%, 88%)
Яскравість: 0,906

Dark Tone Ink #121212

RGB: rgb(18, 18, 18)
HSL: hsl(0, 0%, 7%)
Яскравість: 0,006

White #FFFFFF

RGB: rgb(255, 255, 255)
HSL: hsl(0, 0%, 100%)
Яскравість: 1,000

Kiwi Pulp #9EF53B

RGB: rgb(158, 245, 59)
HSL: hsl(88, 90%, 60%)
Яскравість: 0,729

Green High #63C930

RGB: rgb(99, 201, 48)
HSL: hsl(100, 61%, 49%)
Яскравість: 0,446

Cheeky Chestnut #7C4D3B

RGB: rgb(124, 77, 59)
HSL: hsl(17, 36%, 36%)
Яскравість: 0,099

Bratwurst #552D2D

RGB: rgb(85, 45, 45)
HSL: hsl(0, 31%, 25%)
Яскравість: 0,040

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

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

Aa #121212 на #FFFFFF 18,73:1 AAA

Aa #DBFFC4 на #121212 17,05:1 AAA

Aa #B1FFAD на #121212 15,86:1 AAA

Aa #121212 на #9EF53B 13,90:1 AAA

Aa #FFFFFF на #552D2D 11,67:1 AAA

Aa #DBFFC4 на #552D2D 10,62:1 AAA

Aa #B1FFAD на #552D2D 9,88:1 AAA

Aa #5BC5A6 на #121212 8,90:1 AAA

Aa #121212 на #63C930 8,86:1 AAA

Aa #354F5A на #FFFFFF 8,69:1 AAA

Aa #9EF53B на #552D2D 8,66:1 AAA

Aa #354F5A на #DBFFC4 7,91:1 AAA

Aa #354F5A на #B1FFAD 7,35:1 AAA

Aa #FFFFFF на #7C4D3B 7,04:1 AAA

Aa #354F5A на #9EF53B 6,44:1 AA

Aa #DBFFC4 на #7C4D3B 6,41:1 AA

Aa #B1FFAD на #7C4D3B 5,96:1 AA

Aa #5BC5A6 на #552D2D 5,55:1 AA

Aa #63C930 на #552D2D 5,52:1 AA

Aa #54929E на #121212 5,34:1 AA

Aa #9EF53B на #7C4D3B 5,22:1 AA

Aa #354F5A на #5BC5A6 4,13:1 AA, великий текст

Aa #354F5A на #63C930 4,11:1 AA, великий текст

Aa #54929E на #FFFFFF 3,51:1 AA, великий текст

Aa #5BC5A6 на #7C4D3B 3,35:1 AA, великий текст

Aa #63C930 на #7C4D3B 3,33:1 AA, великий текст

Aa #54929E на #552D2D 3,32:1 AA, великий текст

Aa #54929E на #DBFFC4 3,19:1 AA, великий текст

Aa #54929E на #B1FFAD 2,97:1 Не проходить

Aa #121212 на #7C4D3B 2,66:1 Не проходить

Aa #54929E на #9EF53B 2,60:1 Не проходить

Aa #354F5A на #54929E 2,47:1 Не проходить

Aa #354F5A на #121212 2,16:1 Не проходить

Aa #FFFFFF на #63C930 2,12:1 Не проходить

Aa #5BC5A6 на #FFFFFF 2,10:1 Не проходить

Aa #54929E на #7C4D3B 2,01:1 Не проходить

Aa #DBFFC4 на #63C930 1,93:1 Не проходить

Aa #5BC5A6 на #DBFFC4 1,91:1 Не проходить

Aa #B1FFAD на #63C930 1,79:1 Не проходить

Aa #5BC5A6 на #B1FFAD 1,78:1 Не проходить

Aa #54929E на #5BC5A6 1,67:1 Не проходить

Aa #54929E на #63C930 1,66:1 Не проходить

Aa #7C4D3B на #552D2D 1,66:1 Не проходить

Aa #121212 на #552D2D 1,61:1 Не проходить

Aa #9EF53B на #63C930 1,57:1 Не проходить

Aa #5BC5A6 на #9EF53B 1,56:1 Не проходить

Aa #FFFFFF на #9EF53B 1,35:1 Не проходить

Aa #354F5A на #552D2D 1,34:1 Не проходить

Aa #354F5A на #7C4D3B 1,23:1 Не проходить

Aa #DBFFC4 на #9EF53B 1,23:1 Не проходить

Aa #B1FFAD на #FFFFFF 1,18:1 Не проходить

Aa #B1FFAD на #9EF53B 1,14:1 Не проходить

Aa #DBFFC4 на #FFFFFF 1,10:1 Не проходить

Aa #B1FFAD на #DBFFC4 1,08:1 Не проходить

Aa #5BC5A6 на #63C930 1,01: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 кольори

Wizards Breath 34