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

Конвертер кольорів — безкоштовно

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

Працює офлайн після завантаження

Конвертуйте колір між HEX, RGB, HSL, HSV та CMYK — з живим попереднім переглядом і копіюванням одним дотиком. Усе працює у вашому браузері.

Підтримує: HEX (#fff або #ffffff), RGB (255, 255, 255) або HSL (360, 100%, 50%)

100%
Пресети:
HEX#14B8A6
rgb() · застарілаrgb(20, 184, 166)
rgb() · сучаснаrgb(20 184 166)
hsl() · застарілаhsl(173, 80%, 40%)
hsl() · сучаснаhsl(173 80% 40%)
oklch()oklch(70.4% 0.123 182.5)
lab()lab(67.1% -42.9 -2.3)
lch()lch(67.1% 43.0 183.1)
hsv()hsv(173, 89%, 72%)
cmyk()cmyk(89%, 0%, 10%, 28%)
Значення RGB20, 184, 166

Контрастність WCAG

На білому тлі

2,49:1

Не відповідає

На чорному тлі

8,44:1

AAA
🖨️ Для друку: Ці значення CMYK (89%, 0%, 10%, 28%) — це стандартне наближення sRGB→CMYK для довідки. Для точного кольору друку використовуйте ICC-профіль вашого принтера або надруковану пробу — екранний CMYK не може відповідати всім фарбам і сортам паперу.

Шкала яскравості

Натисніть на зразок, щоб перейти до цього відтінку

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

  • Конвертуйте Кольори для Веб-дизайнуОтримайте значення HEX, RGB та HSL для будь-якого кольору — готові для вставлення в CSS або Tailwind.
  • Конвертуйте Кольори для Друку (CMYK)Перетворіть кольори екрана (HEX/RGB) на значення CMYK для використання у друкованому дизайні та професійному друку.
  • Побудуйте Кольорові Палітри для Систем ДизайнуПеретворіть кольори бренду на всі формати та створіть узгоджені шкали яскравості для повної системи дизайну.
  • Перевіряйте Контрастність Кольорів для ДоступностіПеретворіть кольори, щоб отримати значення RGB для використання в інструментах коефіцієнта контрастності - WCAG відповідність для доступного дизайну.
  • Перетворіть Кольори для FigmaОтримайте точні значення HEX та RGB для вставки в вибірники кольорів Figma та системи дизайн-токенів.

Як це працює

Уся логіка перетворення — власноруч написаний JavaScript, що працює повністю у вашому браузері, без бібліотек і звернень до сервера. Інструмент розбирає введення, пропускає його через ланцюжок чистих математичних функцій і одночасно видає одинадцять форматів, зокрема сучасні простори CSS Color 4 oklch() та lab().

  1. 1
    Гнучкий розбір введення
    Власний парсер приймає hex (3, 4, 6 або 8 цифр), rgb()/rgba(), hsl()/hsla() як у застарілому синтаксисі з комами, так і в сучасному з пробілами, а також прості числові трійки. Значення альфа у вигляді десяткових дробів чи відсотків нормалізуються до діапазону 0–1 перед будь-яким перетворенням.
  2. 2
    RGB як центр перетворень
    Кожен прийнятий формат спершу зводиться до канонічної трійки RGB. З цього єдиного подання інструмент розходиться в усі боки: HSL і HSV використовують стандартні формули min/max/chroma; CMYK виводиться через знаходження ключового каналу; а лінеаризація sRGB (кускова гамма-крива, визначена в IEC 61966-2-1) застосовується перед обчисленнями в перцептивних просторах.
  3. 3
    Перцептивні колірні простори, обчислені з нуля
    oklch() обчислюється за еталонними матрицями 3×3 Бйорна Оттоссона (простір LMS із кубічним коренем). lab() і lch() використовують хроматичну адаптацію Bradford для переходу від точки білого D65 до D50, як це визначено для lab() у CSS Color 4. Це ті самі формули, що й у рушіях рендерингу браузерів, — тут вони реалізовані без жодних зовнішніх залежностей.
  4. 4
    Контраст WCAG і шкала світлоти
    Відносна яскравість обчислюється за формулою WCAG 2.1 (лінеаризовані R, G, B з вагами 0.2126/0.7152/0.0722), а коефіцієнт контрасту з білим і чорним оцінюється як AA-large, AA, AAA або Fail. Дев’ятикрокова смуга світлоти створюється зміною каналу світлоти HSL від 10% до 90% — натисніть будь-який зразок, щоб конвертувати цей відтінок.

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

🎨

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

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

Спробувати
🎨

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

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

Спробувати
🎨

Генератор колірної палітри

Генеруйте доповняльні, аналогічні, тріадичні та монохроматичні колірні палітри з будь-якого базового кольору. Копіюйте hex-коди одним кліком.

Спробувати

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