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

Fluffy

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

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

Fluffy

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

Редагувати
Приглушені 12 кольорів Холодні Темні Тріадна saturated 12
Вподобання 7
Кольори 12

CSS-змінні

:root {
  --c-muted-1: #16171A;
  --c-muted-2: #36354D;
  --c-muted-3: #566C86;
  --c-muted-4: #430067;
  --c-muted-5: #5D275D;
  --c-muted-6: #3F48C2;
  --c-muted-7: #448DE7;
  --c-muted-8: #10D275;
  --c-muted-9: #A7F547;
  --c-muted-10: #D62411;
  --c-muted-11: #FF8426;
  --c-muted-12: #FFEB33;
}

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

Ця приглушена палітра з 12 кольорів охоплює діапазон від Yellow-Bellied (#FFEB33), найсвітлішого тону, до Piano Black (#16171A), найтемнішого. Вона об'єднує Piano Black, Tiě Hēi Metal, Aurora Borealis, Royal Purple, Charisma, Kikorangi Blue, Oregon Blue, Seaweed, Kiwi Pulp, Run Lola Run, Fluorescent Red Orange та Yellow-Bellied в один набір, який можна одразу перенести в інтерфейс. Пар кольорів у палітрі: 66. Поріг контрастності WCAG AA (4,5:1) для основного тексту проходять 18 з них, найконтрастніша — #16171A на #FFEB33 (14,67:1).

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

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

Piano Black #16171A
RGB
rgb(22, 23, 26)
HSL
hsl(225, 8%, 9%)
Яскравість
0,009
Tiě Hēi Metal #36354D
RGB
rgb(54, 53, 77)
HSL
hsl(243, 18%, 25%)
Яскравість
0,039
Aurora Borealis #566C86
RGB
rgb(86, 108, 134)
HSL
hsl(213, 22%, 43%)
Яскравість
0,144
Royal Purple #430067
RGB
rgb(67, 0, 103)
HSL
hsl(279, 100%, 20%)
Яскравість
0,022
Charisma #5D275D
RGB
rgb(93, 39, 93)
HSL
hsl(300, 41%, 26%)
Яскравість
0,046
Kikorangi Blue #3F48C2
RGB
rgb(63, 72, 194)
HSL
hsl(236, 52%, 50%)
Яскравість
0,096
Oregon Blue #448DE7
RGB
rgb(68, 141, 231)
HSL
hsl(213, 77%, 59%)
Яскравість
0,261
Seaweed #10D275
RGB
rgb(16, 210, 117)
HSL
hsl(151, 86%, 44%)
Яскравість
0,475
Kiwi Pulp #A7F547
RGB
rgb(167, 245, 71)
HSL
hsl(87, 90%, 62%)
Яскравість
0,740
Run Lola Run #D62411
RGB
rgb(214, 36, 17)
HSL
hsl(6, 85%, 45%)
Яскравість
0,156
Fluorescent Red Orange #FF8426
RGB
rgb(255, 132, 38)
HSL
hsl(26, 100%, 57%)
Яскравість
0,379
Yellow-Bellied #FFEB33
RGB
rgb(255, 235, 51)
HSL
hsl(54, 100%, 60%)
Яскравість
0,809

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

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

Aa #16171A на #FFEB33 14,67:1 AAA
Aa #16171A на #A7F547 13,48:1 AAA
Aa #430067 на #FFEB33 11,98:1 AAA
Aa #430067 на #A7F547 11,01:1 AAA
Aa #36354D на #FFEB33 9,69:1 AAA
Aa #5D275D на #FFEB33 8,98:1 AAA
Aa #16171A на #10D275 8,96:1 AAA
Aa #36354D на #A7F547 8,91:1 AAA
Aa #5D275D на #A7F547 8,25:1 AAA
Aa #16171A на #FF8426 7,32:1 AAA
Aa #430067 на #10D275 7,32:1 AAA
Aa #430067 на #FF8426 5,98:1 AA
Aa #36354D на #10D275 5,92:1 AA
Aa #3F48C2 на #FFEB33 5,89:1 AA
Aa #5D275D на #10D275 5,49:1 AA
Aa #3F48C2 на #A7F547 5,41:1 AA
Aa #16171A на #448DE7 5,30:1 AA
Aa #36354D на #FF8426 4,84:1 AA
Aa #5D275D на #FF8426 4,48:1 AA, великий текст
Aa #566C86 на #FFEB33 4,42:1 AA, великий текст
Aa #430067 на #448DE7 4,33:1 AA, великий текст
Aa #D62411 на #FFEB33 4,17:1 AA, великий текст
Aa #566C86 на #A7F547 4,07:1 AA, великий текст
Aa #A7F547 на #D62411 3,83:1 AA, великий текст
Aa #3F48C2 на #10D275 3,60:1 AA, великий текст
Aa #16171A на #D62411 3,52:1 AA, великий текст
Aa #36354D на #448DE7 3,50:1 AA, великий текст
Aa #16171A на #566C86 3,32:1 AA, великий текст
Aa #5D275D на #448DE7 3,24:1 AA, великий текст
Aa #3F48C2 на #FF8426 2,94:1 Не проходить
Aa #430067 на #D62411 2,87:1 Не проходить
Aa #448DE7 на #FFEB33 2,77:1 Не проходить
Aa #566C86 на #430067 2,71:1 Не проходить
Aa #566C86 на #10D275 2,70:1 Не проходить
Aa #10D275 на #D62411 2,55:1 Не проходить
Aa #448DE7 на #A7F547 2,54:1 Не проходить
Aa #16171A на #3F48C2 2,49:1 Не проходить
Aa #36354D на #D62411 2,32:1 Не проходить
Aa #566C86 на #FF8426 2,21:1 Не проходить
Aa #36354D на #566C86 2,19:1 Не проходить
Aa #5D275D на #D62411 2,15:1 Не проходить
Aa #3F48C2 на #448DE7 2,13:1 Не проходить
Aa #D62411 на #FF8426 2,08:1 Не проходить
Aa #566C86 на #5D275D 2,03:1 Не проходить
Aa #430067 на #3F48C2 2,03:1 Не проходить
Aa #FF8426 на #FFEB33 2,00:1 Не проходить
Aa #A7F547 на #FF8426 1,84:1 Не проходить
Aa #448DE7 на #10D275 1,69:1 Не проходить
Aa #36354D на #3F48C2 1,65:1 Не проходить
Aa #10D275 на #FFEB33 1,64:1 Не проходить
Aa #16171A на #5D275D 1,63:1 Не проходить
Aa #566C86 на #448DE7 1,60:1 Не проходить
Aa #5D275D на #3F48C2 1,52:1 Не проходить
Aa #16171A на #36354D 1,51:1 Не проходить
Aa #448DE7 на #D62411 1,51:1 Не проходить
Aa #10D275 на #A7F547 1,50:1 Не проходить
Aa #3F48C2 на #D62411 1,41:1 Не проходить
Aa #448DE7 на #FF8426 1,38:1 Не проходить
Aa #566C86 на #3F48C2 1,33:1 Не проходить
Aa #430067 на #5D275D 1,33:1 Не проходить
Aa #36354D на #430067 1,24:1 Не проходить
Aa #16171A на #430067 1,22:1 Не проходить
Aa #10D275 на #FF8426 1,22:1 Не проходить
Aa #A7F547 на #FFEB33 1,09:1 Не проходить
Aa #36354D на #5D275D 1,08:1 Не проходить
Aa #566C86 на #D62411 1,06:1 Не проходить

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

#212121 #323232 #0D7377 #14FFEC
4 кольори
#0A2647 #144272 #205295 #2C74B3
4 кольори
#040D12 #183D3D #5C8374 #93B1A6
4 кольори
#142850 #27496D #0C7B93 #00A8CC
4 кольори
#635985 #443C68 #393053 #18122B
4 кольори
#000000 #150050 #3F0071 #610094
4 кольори
#151515 #301B3F #3C415C #B4A5A5
4 кольори
#041C32 #04293A #064663 #ECB365
4 кольори