Hex Color Picker: HEX, RGB, HSL, OKLCH, тони й відтінки | We.Inc
Безкоштовний інструмент вибору кольору в HEX: оберіть або вставте колір і отримайте значення HEX, RGB, HSL і OKLCH, тони й відтінки, а також показники контрасту щодо білого й чорного.
Оберіть колір або вставте будь-яке значення HEX, RGB чи HSL, щоб отримати кожен формат, потрібний для дизайну й коду: HEX, RGB, HSL і OKLCH. Перегляньте шкалу тонів і відтінків та перевірте, наскільки читабельний текст на цьому кольорі відносно білого й чорного.
Скористайтеся вибором кольору або введіть значення, наприклад #4F98FB, rgb(79, 152, 251) чи hsl(215, 95%, 65%).
Скопіюйте будь-який формат в один клік. OKLCH — сучасний формат CSS, що зберігає світлість послідовною для всіх відтінків.
Натисніть на будь-який тон чи відтінок, щоб зробити його поточним кольором.
Перегляньте коефіцієнти контрасту, щоб вирішити, чи належить білий, чи чорний текст на цьому кольорі.
Для кнопок прагніть щонайменше 4.5:1 контрасту між написом і кольором кнопки.
Побудуйте палітру з одного брендового кольору: світлий тон для тла, сам колір для кнопок, темний відтінок для станів наведення й тексту.
Екрани відрізняються. Перевірте свій брендовий колір і на телефоні, і на ноутбуці.
Поширені запитання
Що таке hex-код кольору?
Шестизначний код кольору на екрані, записаний як # з трьома парами шістнадцяткових цифр для червоного, зеленого й синього. #FF0000 — чистий червоний; #000000 — чорний; #FFFFFF — білий.
Яка різниця між HEX, RGB і HSL?
Вони описують ті самі кольори по-різному. HEX і RGB дають кількість червоного, зеленого й синього. HSL дає відтінок (кут на колірному колі), насиченість і світлість, що легше регулювати вручну.
Що таке OKLCH і чи варто його використовувати?
OKLCH — новіший формат кольору CSS, заснований на тому, як люди сприймають колір. Два кольори з однаковим значенням L виглядають однаково світлими, що полегшує створення послідовних палітр. Усі сучасні основні браузери його підтримують.
Як розраховується контраст?
За формулою WCAG 2: відносна яскравість світлішого кольору плюс 0.05, поділена на те саме для темнішого кольору плюс 0.05. Для повної перевірки пари кольорів скористайтеся перевіркою контрасту кольорів We.Inc.
Вибір брендового кольору, що працює на сайті
Брендовий колір має виконувати кілька завдань: виділятися на кнопках, залишатися читабельним за білим текстом і не втомлювати око на всій сторінці. Середньотонові сині, зелені й глибокі червоні зазвичай справляються з усіма трьома. Дуже світлі кольори (жовтий, пастельно-рожевий) добре виглядають у логотипі, але роблять погані кнопки, бо ні білий, ні чорний текст не читається на них добре без коригування.
Панель контрасту показує це одразу. Якщо білий текст отримує менше 4.5:1, використовуйте чорний текст або оберіть темніший відтінок зі шкали для кнопок.
Тони, відтінки й проста палітра
Тони змішують ваш колір із білим; відтінки змішують його з чорним. Практичній палітрі сайту потрібно лише кілька: дуже світлий тон для тла секцій, основний колір для кнопок і посилань, і один темніший відтінок для станів наведення. Додайте нейтральні сірі для тексту й меж — і у вас повна, послідовна палітра.
Щоб перевірити конкретну пару тексту й тла (наприклад, сірий текст на тонованому тлі), скористайтеся перевіркою контрасту кольорів, яка оцінює і WCAG AA, і AAA.