Реєстрація Реєстрація
Merry 12

Merry 12

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

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

Merry 12

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

Редагувати
Приглушені 12 кольорів Холодні Змішані Тріадна gray green white red
Вподобання 31
Кольори 12

CSS-змінні

:root {
  --c-muted-1: #1B1F1D;
  --c-muted-2: #2E3A43;
  --c-muted-3: #5A7880;
  --c-muted-4: #9DB9C6;
  --c-muted-5: #F2F2F2;
  --c-muted-6: #A8ED77;
  --c-muted-7: #5FBC62;
  --c-muted-8: #326D42;
  --c-muted-9: #E2CB7C;
  --c-muted-10: #CF7E53;
  --c-muted-11: #932443;
  --c-muted-12: #493127;
}

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

Ця приглушена палітра з 12 кольорів охоплює діапазон від Bleached Silk (#F2F2F2), найсвітлішого тону, до Satin Deep Black (#1B1F1D), найтемнішого. Вона об'єднує Satin Deep Black, Precision, Hampton Surf, Déjà Blue, Bleached Silk, Lima, Lawn Party, Genever Green, Blossom Yellow, Apricot Buff, Berry Rossi та Rojo Marrón в один набір, який можна одразу перенести в інтерфейс. Пар кольорів у палітрі: 66. Поріг контрастності WCAG AA (4,5:1) для основного тексту проходять 20 з них, найконтрастніша — #1B1F1D на #F2F2F2 (14,88:1).

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

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

Satin Deep Black #1B1F1D
RGB
rgb(27, 31, 29)
HSL
hsl(150, 7%, 11%)
Яскравість
0,013
Precision #2E3A43
RGB
rgb(46, 58, 67)
HSL
hsl(206, 19%, 22%)
Яскравість
0,040
Hampton Surf #5A7880
RGB
rgb(90, 120, 128)
HSL
hsl(193, 17%, 43%)
Яскравість
0,172
Déjà Blue #9DB9C6
RGB
rgb(157, 185, 198)
HSL
hsl(199, 26%, 70%)
Яскравість
0,459
Bleached Silk #F2F2F2
RGB
rgb(242, 242, 242)
HSL
hsl(0, 0%, 95%)
Яскравість
0,888
Lima #A8ED77
RGB
rgb(168, 237, 119)
HSL
hsl(95, 77%, 70%)
Яскравість
0,702
Lawn Party #5FBC62
RGB
rgb(95, 188, 98)
HSL
hsl(122, 41%, 55%)
Яскравість
0,393
Genever Green #326D42
RGB
rgb(50, 109, 66)
HSL
hsl(136, 37%, 31%)
Яскравість
0,120
Blossom Yellow #E2CB7C
RGB
rgb(226, 203, 124)
HSL
hsl(46, 64%, 69%)
Яскравість
0,603
Apricot Buff #CF7E53
RGB
rgb(207, 126, 83)
HSL
hsl(21, 56%, 57%)
Яскравість
0,288
Berry Rossi #932443
RGB
rgb(147, 36, 67)
HSL
hsl(343, 61%, 36%)
Яскравість
0,079
Rojo Marrón #493127
RGB
rgb(73, 49, 39)
HSL
hsl(18, 30%, 22%)
Яскравість
0,038

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

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

Aa #1B1F1D на #F2F2F2 14,88:1 AAA
Aa #1B1F1D на #A8ED77 11,94:1 AAA
Aa #F2F2F2 на #493127 10,71:1 AAA
Aa #2E3A43 на #F2F2F2 10,41:1 AAA
Aa #1B1F1D на #E2CB7C 10,37:1 AAA
Aa #A8ED77 на #493127 8,59:1 AAA
Aa #2E3A43 на #A8ED77 8,35:1 AAA
Aa #1B1F1D на #9DB9C6 8,08:1 AAA
Aa #E2CB7C на #493127 7,46:1 AAA
Aa #F2F2F2 на #932443 7,29:1 AAA
Aa #2E3A43 на #E2CB7C 7,25:1 AAA
Aa #1B1F1D на #5FBC62 7,03:1 AAA
Aa #A8ED77 на #932443 5,84:1 AA
Aa #9DB9C6 на #493127 5,82:1 AA
Aa #2E3A43 на #9DB9C6 5,65:1 AA
Aa #F2F2F2 на #326D42 5,51:1 AA
Aa #1B1F1D на #CF7E53 5,37:1 AA
Aa #E2CB7C на #932443 5,08:1 AA
Aa #5FBC62 на #493127 5,06:1 AA
Aa #2E3A43 на #5FBC62 4,91:1 AA
Aa #A8ED77 на #326D42 4,42:1 AA, великий текст
Aa #5A7880 на #F2F2F2 4,23:1 AA, великий текст
Aa #9DB9C6 на #932443 3,96:1 AA, великий текст
Aa #CF7E53 на #493127 3,86:1 AA, великий текст
Aa #326D42 на #E2CB7C 3,84:1 AA, великий текст
Aa #2E3A43 на #CF7E53 3,75:1 AA, великий текст
Aa #1B1F1D на #5A7880 3,52:1 AA, великий текст
Aa #5FBC62 на #932443 3,44:1 AA, великий текст
Aa #5A7880 на #A8ED77 3,39:1 AA, великий текст
Aa #9DB9C6 на #326D42 3,00:1 AA, великий текст
Aa #5A7880 на #E2CB7C 2,95:1 Не проходить
Aa #F2F2F2 на #CF7E53 2,77:1 Не проходить
Aa #1B1F1D на #326D42 2,70:1 Не проходить
Aa #CF7E53 на #932443 2,63:1 Не проходить
Aa #5FBC62 на #326D42 2,60:1 Не проходить
Aa #5A7880 на #493127 2,53:1 Не проходить
Aa #2E3A43 на #5A7880 2,46:1 Не проходить
Aa #5A7880 на #9DB9C6 2,30:1 Не проходить
Aa #A8ED77 на #CF7E53 2,22:1 Не проходить
Aa #F2F2F2 на #5FBC62 2,12:1 Не проходить
Aa #1B1F1D на #932443 2,04:1 Не проходить
Aa #5A7880 на #5FBC62 2,00:1 Не проходить
Aa #326D42 на #CF7E53 1,99:1 Не проходить
Aa #326D42 на #493127 1,94:1 Не проходить
Aa #E2CB7C на #CF7E53 1,93:1 Не проходить
Aa #2E3A43 на #326D42 1,89:1 Не проходить
Aa #9DB9C6 на #F2F2F2 1,84:1 Не проходить
Aa #5A7880 на #932443 1,72:1 Не проходить
Aa #A8ED77 на #5FBC62 1,70:1 Не проходить
Aa #5A7880 на #CF7E53 1,53:1 Не проходить
Aa #9DB9C6 на #CF7E53 1,51:1 Не проходить
Aa #9DB9C6 на #A8ED77 1,48:1 Не проходить
Aa #5FBC62 на #E2CB7C 1,48:1 Не проходить
Aa #932443 на #493127 1,47:1 Не проходить
Aa #F2F2F2 на #E2CB7C 1,44:1 Не проходить
Aa #1B1F1D на #2E3A43 1,43:1 Не проходить
Aa #2E3A43 на #932443 1,43:1 Не проходить
Aa #1B1F1D на #493127 1,39:1 Не проходить
Aa #326D42 на #932443 1,32:1 Не проходить
Aa #5FBC62 на #CF7E53 1,31:1 Не проходить
Aa #5A7880 на #326D42 1,30:1 Не проходить
Aa #9DB9C6 на #E2CB7C 1,28:1 Не проходить
Aa #F2F2F2 на #A8ED77 1,25:1 Не проходить
Aa #9DB9C6 на #5FBC62 1,15:1 Не проходить
Aa #A8ED77 на #E2CB7C 1,15:1 Не проходить
Aa #2E3A43 на #493127 1,03: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 кольори