Обложка канала

Frontend по-флотски 👨‍💻

Новости и факты о разработке интерфейсов в неформальном стиле

Frontend по-флотски 👨‍💻

4 года назад
Открыть в
Динамическое изменение цвета текста на основе цветового контраста фона с помощью JS 😎 Слишком маленькая статья, чтобы её переводить, поэтому скидываю тебе оригинал, дружок, думаю ты без проблем всё поймёшь ❤️ gomakethings.com/dynamic…nilla-js Для ленивых даю функцию, которая решает это: function getContrastYIQ(hexcolor){ const r = parseInt(hexcolor.substr(0, 2), 16); const g = parseInt(hexcolor.substr(2, 2), 16); const b = parseInt(hexcolor.substr(4, 2), 16); const yiq = (r * 299 + g * 587 + b * 114) / 1000; return yiq >= 128 ? 'black' : 'white'; } Тыкательный пример: https://codepen.io/StephenFlannery/pen/byPPGj
Dynamically changing the text color based on background color contrast with vanilla JS

Last month, we looked at a technique for generating random colors with vanilla JS. Reader Stephen Flannery showed me a demo he built with the technique where the text color changed from black to white if the color was too dark. Checking color contrast with vanillia JS When I asked Stephen how he did it, he pointed me to this article from Brian Suda at 24 Ways on checking color contrast.

Gomakethings