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

Tetsuo

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

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

Tetsuo

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

Редагувати
Приглушені 12 кольорів Теплі Темні Комплементарна manga anime mierdinsky comic
Вподобання 19
Кольори 12

CSS-змінні

:root {
  --c-muted-1: #330033;
  --c-muted-2: #303030;
  --c-muted-3: #754402;
  --c-muted-4: #2A5B5B;
  --c-muted-5: #009999;
  --c-muted-6: #AA0000;
  --c-muted-7: #8F5F30;
  --c-muted-8: #696969;
  --c-muted-9: #BA5D2F;
  --c-muted-10: #996666;
  --c-muted-11: #CC9966;
  --c-muted-12: #FFCC66;
}

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

Ця приглушена палітра з 12 кольорів охоплює діапазон від Qing Yellow (#FFCC66), найсвітлішого тону, до Exquisite Eggplant (#330033), найтемнішого. Вона об'єднує Exquisite Eggplant, Off Black, Dusky Brown, Bayberry, Regula Barbara Blue, Heartbeat, Rusty Coin, Dim Grey, Gold Varnish Brown, Copper Rose, Oak Buff та Qing Yellow в один набір, який можна одразу перенести в інтерфейс. Пар кольорів у палітрі: 66. Поріг контрастності WCAG AA (4,5:1) для основного тексту проходять 8 з них, найконтрастніша — #330033 на #FFCC66 (11,85:1).

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

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

Exquisite Eggplant #330033
RGB
rgb(51, 0, 51)
HSL
hsl(300, 100%, 10%)
Яскравість
0,009
Off Black #303030
RGB
rgb(48, 48, 48)
HSL
hsl(0, 0%, 19%)
Яскравість
0,030
Dusky Brown #754402
RGB
rgb(117, 68, 2)
HSL
hsl(34, 97%, 23%)
Яскравість
0,079
Bayberry #2A5B5B
RGB
rgb(42, 91, 91)
HSL
hsl(180, 37%, 26%)
Яскравість
0,087
Regula Barbara Blue #009999
RGB
rgb(0, 153, 153)
HSL
hsl(180, 100%, 30%)
Яскравість
0,251
Heartbeat #AA0000
RGB
rgb(170, 0, 0)
HSL
hsl(0, 100%, 33%)
Яскравість
0,086
Rusty Coin #8F5F30
RGB
rgb(143, 95, 48)
HSL
hsl(30, 50%, 37%)
Яскравість
0,142
Dim Grey #696969
RGB
rgb(105, 105, 105)
HSL
hsl(0, 0%, 41%)
Яскравість
0,141
Gold Varnish Brown #BA5D2F
RGB
rgb(186, 93, 47)
HSL
hsl(20, 60%, 46%)
Яскравість
0,185
Copper Rose #996666
RGB
rgb(153, 102, 102)
HSL
hsl(0, 20%, 50%)
Яскравість
0,172
Oak Buff #CC9966
RGB
rgb(204, 153, 102)
HSL
hsl(30, 50%, 60%)
Яскравість
0,366
Qing Yellow #FFCC66
RGB
rgb(255, 204, 102)
HSL
hsl(40, 100%, 70%)
Яскравість
0,654

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

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

Aa #330033 на #FFCC66 11,85:1 AAA
Aa #303030 на #FFCC66 8,85:1 AAA
Aa #330033 на #CC9966 7,00:1 AAA
Aa #754402 на #FFCC66 5,45:1 AA
Aa #303030 на #CC9966 5,23:1 AA
Aa #AA0000 на #FFCC66 5,20:1 AA
Aa #2A5B5B на #FFCC66 5,13:1 AA
Aa #330033 на #009999 5,06:1 AA
Aa #330033 на #BA5D2F 3,95:1 AA, великий текст
Aa #303030 на #009999 3,78:1 AA, великий текст
Aa #330033 на #996666 3,74:1 AA, великий текст
Aa #696969 на #FFCC66 3,68:1 AA, великий текст
Aa #8F5F30 на #FFCC66 3,66:1 AA, великий текст
Aa #330033 на #8F5F30 3,24:1 AA, великий текст
Aa #330033 на #696969 3,22:1 AA, великий текст
Aa #754402 на #CC9966 3,22:1 AA, великий текст
Aa #996666 на #FFCC66 3,17:1 AA, великий текст
Aa #AA0000 на #CC9966 3,07:1 AA, великий текст
Aa #2A5B5B на #CC9966 3,03:1 AA, великий текст
Aa #BA5D2F на #FFCC66 3,00:1 AA, великий текст
Aa #303030 на #BA5D2F 2,95:1 Не проходить
Aa #303030 на #996666 2,79:1 Не проходить
Aa #303030 на #8F5F30 2,42:1 Не проходить
Aa #303030 на #696969 2,40:1 Не проходить
Aa #009999 на #FFCC66 2,34:1 Не проходить
Aa #754402 на #009999 2,33:1 Не проходить
Aa #330033 на #2A5B5B 2,31:1 Не проходить
Aa #330033 на #AA0000 2,28:1 Не проходить
Aa #009999 на #AA0000 2,22:1 Не проходить
Aa #2A5B5B на #009999 2,19:1 Не проходить
Aa #330033 на #754402 2,17:1 Не проходить
Aa #696969 на #CC9966 2,17:1 Не проходить
Aa #8F5F30 на #CC9966 2,16:1 Не проходить
Aa #996666 на #CC9966 1,87:1 Не проходить
Aa #754402 на #BA5D2F 1,82:1 Не проходить
Aa #BA5D2F на #CC9966 1,77:1 Не проходить
Aa #303030 на #2A5B5B 1,73:1 Не проходить
Aa #AA0000 на #BA5D2F 1,73:1 Не проходить
Aa #754402 на #996666 1,72:1 Не проходить
Aa #2A5B5B на #BA5D2F 1,71:1 Не проходить
Aa #303030 на #AA0000 1,70:1 Не проходить
Aa #CC9966 на #FFCC66 1,69:1 Не проходить
Aa #AA0000 на #996666 1,64:1 Не проходить
Aa #303030 на #754402 1,62:1 Не проходить
Aa #2A5B5B на #996666 1,62:1 Не проходить
Aa #009999 на #696969 1,57:1 Не проходить
Aa #009999 на #8F5F30 1,56:1 Не проходить
Aa #754402 на #8F5F30 1,49:1 Не проходить
Aa #754402 на #696969 1,48:1 Не проходить
Aa #AA0000 на #8F5F30 1,42:1 Не проходить
Aa #AA0000 на #696969 1,41:1 Не проходить
Aa #2A5B5B на #8F5F30 1,40:1 Не проходить
Aa #2A5B5B на #696969 1,39:1 Не проходить
Aa #009999 на #CC9966 1,38:1 Не проходить
Aa #009999 на #996666 1,35:1 Не проходить
Aa #330033 на #303030 1,34:1 Не проходить
Aa #009999 на #BA5D2F 1,28:1 Не проходить
Aa #696969 на #BA5D2F 1,23:1 Не проходить
Aa #8F5F30 на #BA5D2F 1,22:1 Не проходить
Aa #8F5F30 на #996666 1,16:1 Не проходить
Aa #696969 на #996666 1,16:1 Не проходить
Aa #754402 на #2A5B5B 1,06:1 Не проходить
Aa #BA5D2F на #996666 1,06:1 Не проходить
Aa #754402 на #AA0000 1,05:1 Не проходить
Aa #2A5B5B на #AA0000 1,01:1 Не проходить
Aa #8F5F30 на #696969 1,01:1 Не проходить

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

#000000 #3D0000 #950101 #FF0000
4 кольори
#E23E57 #88304E #522546 #311D3F
4 кольори
#FF204E #A0153E #5D0E41 #00224D
4 кольори
#030637 #3C0753 #720455 #910A67
4 кольори
#1C0A00 #361500 #603601 #CC9544
4 кольори
#252525 #FF0000 #AF0404 #414141
4 кольори
#362222 #171010 #423F3E #2B2B2B
4 кольори
#1A1A1D #3B1C32 #6A1E55 #A64D79
4 кольори