AllinHub

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

Один колір на вході, усі нотації на виході, плюс відтінки та контраст за WCAG.

Вхідні дані

Hex, rgb(), hsl(), hsv(), cmyk() або назва кольору CSS. У відсотках працює і кома, і крапка.

В усіх нотаціях

  • HEX –
  • RGB –
  • HSL –
  • HSV –
  • CMYK –
  • Назва –

CMYK порахований за простою формулою без профілю принтера; надруковані фарби виглядатимуть інакше.

Відтінки та гармонії

Світлість рухається рівними кроками до білого й до чорного; доповняльний колір лежить навпроти на колірному колі, суміжні — на 30° обабіч. Натисніть зразок, щоб скопіювати його hex.

Світліші

Темніші

Доповняльний

Суміжні

Перевірка контрасту

Введіть коректний колір вище й другий тут, щоб виміряти контраст.

Рівень WCAG Мінімум Результат
AA, звичайний текст 4.5:1 –
AA, великий текст 3:1 –
AAA, звичайний текст 7:1 –
AAA, великий текст 4.5:1 –

Великий текст — від 18 пт або від 14 пт жирним (приблизно 24 px чи 18,7 px жирним). Коефіцієнт оцінюється точно, а показується з двома знаками.

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

Вставте або введіть колір у будь-якій нотації: hex-код зі знаком # чи без нього, rgb() або rgba(), hsl(), hsv(), cmyk() у відсотках або одну зі 148 назв кольорів CSS. Конвертер одразу показує його в усіх інших нотаціях, кожну з кнопкою копіювання та зразком, а піпетка поруч із полем синхронізується в обидва боки. Нижче — світліші й темніші відтінки, доповняльний та суміжні кольори для швидкої палітри, а перевірка контрасту рахує коефіцієнт за WCAG відносно білого, чорного або будь-якого другого кольору. Усе працює у вашому браузері: колір нікуди не надсилається.

Як користуватися

  1. Введіть або вставте колір: #1e90ff, rgb(30, 144, 255), hsl(210, 100%, 56%) чи dodgerblue.
  2. Прочитайте його в інших нотаціях і скопіюйте потрібну; Ctrl+Shift+C копіює значення, на якому стоїть фокус.
  3. Потягніть піпетку поруч із полем, щоб підправити колір, — поле й усі нотації оновляться.
  4. Виберіть білий, чорний або інший колір у перевірці контрасту й прочитайте коефіцієнт із позначками «пройдено» чи «не пройдено».

Що враховано

  • Приймає hex із 3, 4, 6 або 8 знаків, rgb() зі значеннями чи відсотками, hsl(), hsv() або hsb(), cmyk(), просто список на кшталт 30, 144, 255 і всі 148 назв кольорів CSS.
  • Переносить альфа-канал у hex, rgb(), hsl() та hsv(); у CMYK і палітрі його немає, і примітка каже, коли його відкинуто.
  • Значення поза діапазоном обрізаються так само, як у CSS, із приміткою; відтінок ходить по колу.
  • Розуміє десяткову кому у відсотках, як-от 55,9%, якщо список розділено пробілами або комою з пробілом.
  • Кожен вердикт контрасту показано словом і символом, а не лише кольором.

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

Чим HSL відрізняється від HSV?

Обидві моделі описують колір через відтінок, насиченість і третю вісь. У HSL це світлість: 100% — завжди білий, а 50% — чистий колір за повної насиченості. У HSV, яку ще називають HSB, це значення, або яскравість: 100% — сам чистий колір, а білий отримують, зменшуючи насиченість. Піпетки графічних редакторів частіше працюють із HSV, CSS — з HSL; конвертер рахує обидві з одного й того самого кольору.

Чому CMYK на друці виглядає інакше?

CMYK тут отримано за простою формулою: чорна фарба бере найтемнішу частину кольору, а решту заповнюють три інші, без жодного ICC-профілю. Справжній друк залежить від паперу, набору фарб і профілю, з яким працює друкарня, а її програма перераховує RGB через цей профіль, тож її відсотки відрізнятимуться від цих. Сприймайте цей CMYK як відправну точку, а не як остаточні значення.

Який коефіцієнт контрасту потрібен для тексту?

WCAG 2 вимагає щонайменше 4,5:1 між звичайним текстом і його тлом на рівні AA та 3:1 для великого тексту — 18 пунктів або 14 пунктів жирним, приблизно 24 px чи 18,7 px жирним. Рівень AAA піднімає планку до 7:1 і 4,5:1. Перевірка рахує коефіцієнт із відносної яскравості так, як визначає стандарт, і оцінює точне значення: 4,4999 не проходить, хоч на екрані видно 4,50.

Чи надсилається введений колір кудись?

Ні. Розбір, перетворення та обчислення контрасту виконує сама сторінка, тому нічого не залишає ваш пристрій, а сторінка працює й без інтернету. Останній колір і другий колір перевірки контрасту зберігаються лише у цьому браузері, а основний колір дублюється в адресному рядку як ?c=, тож скопійоване посилання відкриє саме його. Кнопка «Очистити» прибирає і те, і те.

Оновлено

Усі інструменти