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

SKYLINE 12

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

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

SKYLINE 12

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

Редагувати
Яскраві 12 кольорів Холодні Світлі Тріадна blue sky fresh ment
Вподобання 29
Кольори 12

CSS-змінні

:root {
  --c-vibrant-1: #EEF3F7;
  --c-vibrant-2: #B2D6F7;
  --c-vibrant-3: #B2BEF7;
  --c-vibrant-4: #DEB2F7;
  --c-vibrant-5: #00FFD8;
  --c-vibrant-6: #00C9FF;
  --c-vibrant-7: #00A4FF;
  --c-vibrant-8: #0072FF;
  --c-vibrant-9: #8CB28C;
  --c-vibrant-10: #7B9490;
  --c-vibrant-11: #71828B;
  --c-vibrant-12: #71718A;
}

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

Ця яскрава палітра з 12 кольорів охоплює діапазон від Airport (#EEF3F7), найсвітлішого тону, до Stormy Mauve (#71718A), найтемнішого. Вона об'єднує Airport, Blue Rice, Purple Illusion, Mauve, Ice Ice Baby, Vivid Sky Blue, Protoss Pylon, Brandeis Blue, Shaded Willow, Tile Green, Oyster Bay та Stormy Mauve в один набір, який можна одразу перенести в інтерфейс. Жодна з 66 пар кольорів у палітрі не досягає порогу контрастності WCAG AA (4,5:1), тож для основного тексту поєднуйте ці кольори з чорним або білим.

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

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

Airport #EEF3F7
RGB
rgb(238, 243, 247)
HSL
hsl(207, 36%, 95%)
Яскравість
0,890
Blue Rice #B2D6F7
RGB
rgb(178, 214, 247)
HSL
hsl(209, 81%, 83%)
Яскравість
0,643
Purple Illusion #B2BEF7
RGB
rgb(178, 190, 247)
HSL
hsl(230, 81%, 83%)
Яскравість
0,530
Mauve #DEB2F7
RGB
rgb(222, 178, 247)
HSL
hsl(278, 81%, 83%)
Яскравість
0,541
Ice Ice Baby #00FFD8
RGB
rgb(0, 255, 216)
HSL
hsl(171, 100%, 50%)
Яскравість
0,765
Vivid Sky Blue #00C9FF
RGB
rgb(0, 201, 255)
HSL
hsl(193, 100%, 50%)
Яскравість
0,490
Protoss Pylon #00A4FF
RGB
rgb(0, 164, 255)
HSL
hsl(201, 100%, 50%)
Яскравість
0,338
Brandeis Blue #0072FF
RGB
rgb(0, 114, 255)
HSL
hsl(213, 100%, 50%)
Яскравість
0,193
Shaded Willow #8CB28C
RGB
rgb(140, 178, 140)
HSL
hsl(120, 20%, 62%)
Яскравість
0,393
Tile Green #7B9490
RGB
rgb(123, 148, 144)
HSL
hsl(170, 10%, 53%)
Яскравість
0,274
Oyster Bay #71828B
RGB
rgb(113, 130, 139)
HSL
hsl(201, 10%, 49%)
Яскравість
0,213
Stormy Mauve #71718A
RGB
rgb(113, 113, 138)
HSL
hsl(240, 10%, 49%)
Яскравість
0,172

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

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

Aa #EEF3F7 на #71718A 4,24:1 AA, великий текст
Aa #EEF3F7 на #0072FF 3,88:1 AA, великий текст
Aa #00FFD8 на #71718A 3,68:1 AA, великий текст
Aa #EEF3F7 на #71828B 3,57:1 AA, великий текст
Aa #00FFD8 на #0072FF 3,36:1 AA, великий текст
Aa #B2D6F7 на #71718A 3,13:1 AA, великий текст
Aa #00FFD8 на #71828B 3,09:1 AA, великий текст
Aa #EEF3F7 на #7B9490 2,90:1 Не проходить
Aa #B2D6F7 на #0072FF 2,86:1 Не проходить
Aa #DEB2F7 на #71718A 2,67:1 Не проходить
Aa #B2D6F7 на #71828B 2,63:1 Не проходить
Aa #B2BEF7 на #71718A 2,62:1 Не проходить
Aa #00FFD8 на #7B9490 2,51:1 Не проходить
Aa #DEB2F7 на #0072FF 2,44:1 Не проходить
Aa #00C9FF на #71718A 2,44:1 Не проходить
Aa #EEF3F7 на #00A4FF 2,42:1 Не проходить
Aa #B2BEF7 на #0072FF 2,39:1 Не проходить
Aa #DEB2F7 на #71828B 2,24:1 Не проходить
Aa #00C9FF на #0072FF 2,23:1 Не проходить
Aa #B2BEF7 на #71828B 2,20:1 Не проходить
Aa #B2D6F7 на #7B9490 2,14:1 Не проходить
Aa #EEF3F7 на #8CB28C 2,12:1 Не проходить
Aa #00FFD8 на #00A4FF 2,10:1 Не проходить
Aa #00C9FF на #71828B 2,05:1 Не проходить
Aa #8CB28C на #71718A 2,00:1 Не проходить
Aa #00FFD8 на #8CB28C 1,84:1 Не проходить
Aa #0072FF на #8CB28C 1,83:1 Не проходить
Aa #DEB2F7 на #7B9490 1,82:1 Не проходить
Aa #B2D6F7 на #00A4FF 1,79:1 Не проходить
Aa #B2BEF7 на #7B9490 1,79:1 Не проходить
Aa #00A4FF на #71718A 1,75:1 Не проходить
Aa #EEF3F7 на #00C9FF 1,74:1 Не проходить
Aa #8CB28C на #71828B 1,68:1 Не проходить
Aa #00C9FF на #7B9490 1,67:1 Не проходить
Aa #EEF3F7 на #B2BEF7 1,62:1 Не проходить
Aa #00A4FF на #0072FF 1,60:1 Не проходить
Aa #EEF3F7 на #DEB2F7 1,59:1 Не проходить
Aa #B2D6F7 на #8CB28C 1,56:1 Не проходить
Aa #DEB2F7 на #00A4FF 1,52:1 Не проходить
Aa #00FFD8 на #00C9FF 1,51:1 Не проходить
Aa #B2BEF7 на #00A4FF 1,50:1 Не проходить
Aa #00A4FF на #71828B 1,47:1 Не проходить
Aa #7B9490 на #71718A 1,46:1 Не проходить
Aa #B2BEF7 на #00FFD8 1,40:1 Не проходить
Aa #00C9FF на #00A4FF 1,39:1 Не проходить
Aa #DEB2F7 на #00FFD8 1,38:1 Не проходить
Aa #8CB28C на #7B9490 1,37:1 Не проходить
Aa #EEF3F7 на #B2D6F7 1,36:1 Не проходить
Aa #0072FF на #7B9490 1,34:1 Не проходить
Aa #DEB2F7 на #8CB28C 1,33:1 Не проходить
Aa #B2BEF7 на #8CB28C 1,31:1 Не проходить
Aa #B2D6F7 на #00C9FF 1,28:1 Не проходить
Aa #7B9490 на #71828B 1,23:1 Не проходить
Aa #00C9FF на #8CB28C 1,22:1 Не проходить
Aa #00A4FF на #7B9490 1,20:1 Не проходить
Aa #B2D6F7 на #B2BEF7 1,19:1 Не проходить
Aa #71828B на #71718A 1,19:1 Не проходить
Aa #B2D6F7 на #00FFD8 1,18:1 Не проходить
Aa #B2D6F7 на #DEB2F7 1,17:1 Не проходить
Aa #EEF3F7 на #00FFD8 1,15:1 Не проходить
Aa #00A4FF на #8CB28C 1,14:1 Не проходить
Aa #DEB2F7 на #00C9FF 1,09:1 Не проходить
Aa #0072FF на #71828B 1,09:1 Не проходить
Aa #0072FF на #71718A 1,09:1 Не проходить
Aa #B2BEF7 на #00C9FF 1,07:1 Не проходить
Aa #B2BEF7 на #DEB2F7 1,02:1 Не проходить

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

#E3FDFD #CBF1F5 #A6E3E9 #71C9CE
4 кольори
#F4EEFF #DCD6F7 #A6B1E1 #424874
4 кольори
#B1B2FF #AAC4FF #D2DAFF #EEF1FF
4 кольори
#6096B4 #93BFCF #BDCDD6 #EEE9DA
4 кольори
#A8D8EA #AA96DA #FCBAD3 #FFFFD2
4 кольори
#DEFCF9 #CADEFC #C3BEF0 #CCA8E9
4 кольори
#F7FBFC #D6E6F2 #B9D7EA #769FCD
4 кольори
#C4DFDF #D2E9E9 #E3F4F4 #F8F6F4
4 кольори