Перейти до основного вмісту
LibraTool logoLibraTool

Вибір кольору та генератор палітр — безкоштовно

Вибирайте кольори, конвертуйте HEX/RGB/HSL та створюйте гармонійні палітри.

Працює офлайн після завантаження
HEX
HSV
h217°
s76%
v96%
тільки для перегляду

RGB

r
g
b

HSL

H
S
L

Більше форматів

HEX8#3b82f6ff
RGBrgb(59 130 246)
HWBhwb(217 23% 4%)
CMYKcmyk(76%, 47%, 0%, 4%)
OKLCHoklch(62.3% 0.188 259.8)
SwiftUIColor(red: 0.231, green: 0.510, blue: 0.965, alpha: 1)
Android0xFF3B82F6
FlutterColor(0xFF3B82F6)

WCAG контраст

Найближчий іменований колір: dodgerblue · Чорний текст тут читається легше (5,71:1)

Текст на білому3,68:1AA великий
Текст на чорному5,71:1AA
Текст на #ffffff3,68:1AA великий

Відтінки й тони (50–950)

Кольорова палітра

Комплементарна

#3b82f6
#f6af3c

Тріадна

#3b82f6
#f63c83
#83f63c

Аналогова

#3ce0f6
#3b82f6
#523cf6

Монохроматична

#073c92
#0a5adb
#3b82f6
#85b2f9
#cee0fd

Типові застосування

  • Вибір Кольорів для Web-дизайнуВиберіть та створіть кольори для вашого веб-сайту — отримайте значення HEX, RGB та HSL, а також гармонійні палітри.
  • Вибір Кольорів для БрендингуПобудуйте палітру кольорів вашого бренду — виберіть основні, вторинні та акцентні кольори, які працюють разом.
  • Вибір Кольорів для Соціальних МедіаСтворіть вражаючі палітри кольорів для постів у соціальних мережах, історій та дизайну профілю.
  • Вибір Кольорів для ДрукуВиберіть кольори для надрукованих матеріалів — брошури, візитки, плакати — з точним попереднім переглядом кольорів.
  • Вибір Кольорів для ПрезентаційРозробіть колірні схеми для слайдів — виберіть зчитувані кольори тексту, палітри діаграм та послідовні акцентні тони.

Як це працює

Усе працює прямо у вашому браузері на власноруч написаній математиці перетворень — без колірних бібліотек і звернень до сервера. Ви вибираєте колір через нативне поле вибору кольору браузера або EyeDropper API, і інструмент миттєво перетворює його в шість форматів, а також обчислює коефіцієнти контрасту WCAG і створює гармонійні палітри.

  1. 1
    Введення кольору через нативний API
    Ви вибираєте колір через вбудований у браузер віджет <input type="color"> або — у браузерах на основі Chromium — через EyeDropper API, що дозволяє взяти будь-який піксель на екрані. Обидва шляхи повертають рядок hex, який стає єдиним джерелом істини.
  2. 2
    Власноруч написані перетворення форматів
    Інструмент перетворює значення hex у RGB, HSL, HSV, CMYK і OKLCH власними математичними функціями (без зовнішніх бібліотек). Перетворення в OKLCH лінеаризує канали sRGB, застосовує матрицю OKLab із кубічним коренем, а потім виводить хрому й кут відтінку — відповідно до сучасного CSS Color Level 4.
  3. 3
    Обчислення коефіцієнта контрасту WCAG
    Відносна яскравість обчислюється з лінеаризованих каналів RGB за формулою WCAG 2.x. Потім інструмент обчислює коефіцієнти контрасту з чистим білим і чистим чорним і позначає їх як AA-large, AA, AAA або Fail відповідно до порогів WCAG (3:1, 4.5:1, 7:1).
  4. 4
    Створення гармонійних палітр і локальне збереження
    Комплементарні, тріадні, аналогові та монохромні зразки виводяться математично через поворот чи зміну значень відтінку й світлоти HSL. Збережені палітри записуються в localStorage вашого браузера — ніщо не залишає пристрій.

Схожі інструменти

🎨

Генератор випадкових кольорів

Генеруйте випадкові кольори по одному або як палітру з п’яти, блокуйте ті, що сподобалися, копіюйте значення HEX, RGB чи HSL і експортуйте палітру як PNG або CSS.

Спробувати
🎨

Конвертер кольорів

Миттєво конвертуйте кольори між форматами HEX, RGB, HSL, HSV та CMYK. Включає шкалу яскравості та готові зразки.

Спробувати
🎨

Витягувач колірної палітри із зображення

Витягуйте домінуючі кольори з будь-якого зображення за допомогою k-means квантизації кольорів. Отримайте hex-коди для 2–16 основних кольорів фото або логотипу.

СпробуватиФайли залишаються локально

Часті запитання