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

Terracarbon

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

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

Terracarbon

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

Редагувати
Яскраві 12 кольорів Теплі Змішані Аналогова polyphrog retro carbon
Вподобання 15
Кольори 12

CSS-змінні

:root {
  --c-vibrant-1: #555500;
  --c-vibrant-2: #888800;
  --c-vibrant-3: #FFAA55;
  --c-vibrant-4: #AA5500;
  --c-vibrant-5: #550000;
  --c-vibrant-6: #AA0000;
  --c-vibrant-7: #FF5555;
  --c-vibrant-8: #FFFFFF;
  --c-vibrant-9: #AAAAAA;
  --c-vibrant-10: #555555;
  --c-vibrant-11: #000000;
  --c-vibrant-12: #0055AA;
}

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

Ця яскрава палітра з 12 кольорів охоплює діапазон від White (#FFFFFF), найсвітлішого тону, до Black (#000000), найтемнішого. Вона об'єднує Douro, Drably Olive, Soul Side, Tijolo, Soooo Bloody, Heartbeat, Fluorescent Red, White, Dhūsar Grey, Stone Cold, Black та Blue Lobster в один набір, який можна одразу перенести в інтерфейс. Пар кольорів у палітрі: 66. Поріг контрастності WCAG AA (4,5:1) для основного тексту проходять 14 з них, найконтрастніша — #FFFFFF на #000000 (21:1).

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

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

Douro #555500
RGB
rgb(85, 85, 0)
HSL
hsl(60, 100%, 17%)
Яскравість
0,084
Drably Olive #888800
RGB
rgb(136, 136, 0)
HSL
hsl(60, 100%, 27%)
Яскравість
0,228
Soul Side #FFAA55
RGB
rgb(255, 170, 85)
HSL
hsl(30, 100%, 67%)
Яскравість
0,507
Tijolo #AA5500
RGB
rgb(170, 85, 0)
HSL
hsl(30, 100%, 33%)
Яскравість
0,150
Soooo Bloody #550000
RGB
rgb(85, 0, 0)
HSL
hsl(0, 100%, 17%)
Яскравість
0,019
Heartbeat #AA0000
RGB
rgb(170, 0, 0)
HSL
hsl(0, 100%, 33%)
Яскравість
0,086
Fluorescent Red #FF5555
RGB
rgb(255, 85, 85)
HSL
hsl(0, 100%, 67%)
Яскравість
0,284
White #FFFFFF
RGB
rgb(255, 255, 255)
HSL
hsl(0, 0%, 100%)
Яскравість
1,000
Dhūsar Grey #AAAAAA
RGB
rgb(170, 170, 170)
HSL
hsl(0, 0%, 67%)
Яскравість
0,402
Stone Cold #555555
RGB
rgb(85, 85, 85)
HSL
hsl(0, 0%, 33%)
Яскравість
0,091
Black #000000
RGB
rgb(0, 0, 0)
HSL
hsl(0, 0%, 0%)
Яскравість
0,000
Blue Lobster #0055AA
RGB
rgb(0, 85, 170)
HSL
hsl(210, 100%, 33%)
Яскравість
0,094

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

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

Aa #FFFFFF на #000000 21,00:1 AAA
Aa #550000 на #FFFFFF 15,15:1 AAA
Aa #FFAA55 на #000000 11,13:1 AAA
Aa #AAAAAA на #000000 9,04:1 AAA
Aa #FFAA55 на #550000 8,03:1 AAA
Aa #555500 на #FFFFFF 7,82:1 AAA
Aa #AA0000 на #FFFFFF 7,75:1 AAA
Aa #FFFFFF на #555555 7,46:1 AAA
Aa #FFFFFF на #0055AA 7,29:1 AAA
Aa #FF5555 на #000000 6,68:1 AA
Aa #550000 на #AAAAAA 6,52:1 AA
Aa #888800 на #000000 5,57:1 AA
Aa #AA5500 на #FFFFFF 5,24:1 AA
Aa #550000 на #FF5555 4,82:1 AA
Aa #555500 на #FFAA55 4,15:1 AA, великий текст
Aa #FFAA55 на #AA0000 4,11:1 AA, великий текст
Aa #888800 на #550000 4,02:1 AA, великий текст
Aa #AA5500 на #000000 4,01:1 AA, великий текст
Aa #FFAA55 на #555555 3,95:1 AA, великий текст
Aa #FFAA55 на #0055AA 3,87:1 AA, великий текст
Aa #888800 на #FFFFFF 3,77:1 AA, великий текст
Aa #555500 на #AAAAAA 3,37:1 AA, великий текст
Aa #AA0000 на #AAAAAA 3,34:1 AA, великий текст
Aa #AAAAAA на #555555 3,21:1 AA, великий текст
Aa #FF5555 на #FFFFFF 3,14:1 AA, великий текст
Aa #AAAAAA на #0055AA 3,14:1 AA, великий текст
Aa #AA5500 на #550000 2,89:1 Не проходить
Aa #000000 на #0055AA 2,88:1 Не проходить
Aa #555555 на #000000 2,82:1 Не проходить
Aa #FFAA55 на #AA5500 2,78:1 Не проходить
Aa #AA0000 на #000000 2,71:1 Не проходить
Aa #555500 на #000000 2,69:1 Не проходить
Aa #555500 на #FF5555 2,49:1 Не проходить
Aa #AA0000 на #FF5555 2,47:1 Не проходить
Aa #FF5555 на #555555 2,37:1 Не проходить
Aa #FF5555 на #0055AA 2,32:1 Не проходить
Aa #FFFFFF на #AAAAAA 2,32:1 Не проходить
Aa #AA5500 на #AAAAAA 2,26:1 Не проходить
Aa #550000 на #0055AA 2,08:1 Не проходить
Aa #555500 на #888800 2,07:1 Не проходить
Aa #888800 на #AA0000 2,06:1 Не проходить
Aa #550000 на #555555 2,03:1 Не проходить
Aa #888800 на #FFAA55 2,00:1 Не проходить
Aa #888800 на #555555 1,98:1 Не проходить
Aa #550000 на #AA0000 1,95:1 Не проходить
Aa #555500 на #550000 1,94:1 Не проходить
Aa #888800 на #0055AA 1,93:1 Не проходить
Aa #FFAA55 на #FFFFFF 1,89:1 Не проходить
Aa #FFAA55 на #FF5555 1,67:1 Не проходить
Aa #AA5500 на #FF5555 1,67:1 Не проходить
Aa #888800 на #AAAAAA 1,62:1 Не проходить
Aa #555500 на #AA5500 1,49:1 Не проходить
Aa #AA5500 на #AA0000 1,48:1 Не проходить
Aa #AA5500 на #555555 1,42:1 Не проходить
Aa #888800 на #AA5500 1,39:1 Не проходить
Aa #AA5500 на #0055AA 1,39:1 Не проходить
Aa #550000 на #000000 1,39:1 Не проходить
Aa #FF5555 на #AAAAAA 1,35:1 Не проходить
Aa #FFAA55 на #AAAAAA 1,23:1 Не проходить
Aa #888800 на #FF5555 1,20:1 Не проходить
Aa #555500 на #0055AA 1,07:1 Не проходить
Aa #AA0000 на #0055AA 1,06:1 Не проходить
Aa #555500 на #555555 1,05:1 Не проходить
Aa #AA0000 на #555555 1,04:1 Не проходить
Aa #555555 на #0055AA 1,02:1 Не проходить
Aa #555500 на #AA0000 1,01:1 Не проходить

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

#F9ED69 #F08A5D #B83B5E #6A2C70
4 кольори
#7D5A50 #B4846C #E5B299 #FCDEC0
4 кольори
#FFF8EA #9E7676 #815B5B #594545
4 кольори
#2C3639 #3F4E4F #A27B5C #DCD7C9
4 кольори
#F67280 #C06C84 #6C5B7B #355C7D
4 кольори
#2B2E4A #E84545 #903749 #53354A
4 кольори
#E5D9B6 #A4BE7B #5F8D4E #285430
4 кольори
#A9907E #F3DEBA #ABC4AA #675D50
4 кольори