·4 мин. чтения

Палитра цветов с Hex и RGB для Mac

Конвертация между hex-кодами, значениями RGB и нотацией HSL вручную подвержена ошибкам и не нужна, если вы делаете это по нескольку раз в день.

Дизайнер присылает вам цвет в hex: #1A73E8. Ваш CSS-фреймворк хочет HSL. Вашей кодовой базе для iOS нужны значения RGB от 0 до 1. Ваш Android-проект использует целые числа ARGB. Один цвет, четыре формата — и вы снова открываете вкладку браузера, чтобы конвертировать между ними.

Конвертация цветов — тривиальная математика (hex в RGB — это просто перевод из шестнадцатеричной системы в десятичную), но делать это в уме для трёх каналов, пытаясь при этом не отвлекаться от вёрстки или стилизации, — лишнее.

Что предлагает macOS

В macOS есть встроенная палитра цветов, доступная из некоторых приложений через системную панель цвета. Она показывает ползунки RGB и поле hex, но предназначена для визуального подбора цвета, а не для программной конвертации между форматами. Нет простого способа вставить hex-код и получить эквивалент в HSL или ввести целые числа RGB и скопировать вывод в hex. И она спрятана внутри конкретных приложений, а не доступна во всей системе.

Конвертируйте цвета между форматами мгновенно

Bellows включает конвертер цветов среди своих 41 инструментов для разработчиков. Введите цвет в любом поддерживаемом формате — hex, RGB, HSL — и увидите эквивалентные значения во всех остальных форматах. Скопируйте нужное представление в один клик.

Bellows color picker showing hex, RGB, and HSL conversion on macOS

От дизайна к коду

Figma экспортирует цвета в hex. Tailwind CSS использует произвольные значения цвета. SwiftUI хочет Color(red:green:blue:) с десятичными значениями. Android XML использует #AARRGGBB. Возможность видеть все форматы сразу устраняет мысленные вычисления и походы на сайты-конвертеры.

Проверка контраста и читаемости

Когда вы видите цвет отрисованным рядом с его числовыми значениями, легко быстро оценить, будет ли текст читаемым на фоне. Это быстрее, чем переключаться на отдельный инструмент проверки контраста для каждой пары цветов в вашей таблице стилей.

Доступ из строки меню

Нужна быстрая конвертация во время написания CSS? Кликните по иконке Bellows в строке меню, выберите инструмент для цвета, вставьте hex-код и скопируйте значение RGB. Всё взаимодействие занимает меньше пяти секунд, и вы не покидаете редактор.

Получить Bellows в Mac App Store

Следующая статья

Bellows

41 developer tools in one native Mac app — JSON, JWT, Base64, hashes, and more.

Get Bellows on the Mac App Store