Преобразование цветов между шестнадцатеричным, RGB и HSL с помощью одного вызова API
Отправьте цвет в формате HEX, RGB или HSL и получите все три представления обратно за один POST. Создавайте токены дизайна, нормализуйте входные данные CMS и создавайте масштабы тем без библиотеки цветов.
Математика преобразования цветов — это такой код, который вы пишете один раз, допускаете незначительную ошибку и копируете его между собой. проекты навсегда. Hex в RGB — это просто; От RGB к HSL — вот где ошибки немного отличаются. жить. Эта конечная точка принимает цвет в любом из трех форматов и возвращает все три сразу, поэтому вы перестанете носить с собой функции преобразования.
Запрос
В ответ вы получите шестнадцатеричную строку, {`{ r, g, b }`} объект и
{`{ h, s, l }`} возражайте вместе:
Формат ввода не имеет значения. Проходить rgb(62, 201, 151) или строку HSL, и вы получите
те же три представления назад. Hex работает с или без #:
Создайте шкалу дизайн-токена из одного цвета бренда.
HSL — это формат, на котором стоит основываться. Поскольку он отделяет оттенок от светлоты, вы можете создать полную шкалу оттенков и теней, удерживая оттенок и насыщенность постоянными и изменяя значение яркости. Преобразуйте шестнадцатеричный код вашего бренда в HSL один раз, а затем пройдите по легкости, чтобы создать шкалу от 50 до 900. Требования к дизайн-системе:
Запустите это на этапе сборки и запишите выходные данные в файл переменных CSS. Вы получаете скоординированный палитра из одного исходного цвета, а изменение цвета бренда восстанавливает всю шкалу:
Нужна полная палитра, а не одно преобразование? /v1/color/palette
конечная точка принимает один базовый цвет и возвращает согласованный набор оттенков и дополнительных цветов,
так что вы можете создать тему цвета бренда, не выбирая каждый образец вручную.
Нормализовать цвета, вставленные в CMS
Редакторы контента вставляют цвета в любой формат, экспортируемый их инструментами дизайна: шестнадцатеричный код из Figma,
rgb() из инструмента создания снимков экрана, HSL из фрагмента CSS. Запускать каждое вставленное значение
через конечную точку при сохранении и сохранении нормализованного шестнадцатеричного значения. Затем ваш код рендеринга имеет дело с одним
формате, а редактор продолжает вставлять все, что удобно.
Где это подходит
Для интерактивных математических вычислений пользовательского интерфейса в браузере подойдет локальная функция. API занимает свое место в сборке шаги, серверные части и любой язык без пакета сплошного цвета: один HTTP-вызов заменяет зависимость. Преобразование цвета — одна из примерно 200 специализированных конечных точек на ботои, все позади. один ключ со скоростью 5 запросов/мин бесплатно.
Попробуйте конвертацию в интерактивная игровая площадка, просмотреть полная документация по API, или подключите MCP-сервер для преобразования цветов прямо из Claude или Cursor.
FAQ
- Какие цветовые форматы принимает и возвращает API?
- Отправьте цвет в формате HEX, RGB или HSL, и ответ вернет все три представления одновременно. Шестнадцатеричные строки работают с начальным префиксом # или без него. Один вызов дает вам шестнадцатеричную строку, объект {r, g, b} и объект {h, s, l}, поэтому вам никогда не придется писать математические вычисления вручную.
- Зачем конвертировать цвета через API, а не в браузере?
- Чтобы выполнить одноразовые математические расчеты пользовательского интерфейса, сделайте это в браузере. API занимает свое место на этапах сборки и в серверной части: генерация токенов дизайна во время сборки, нормализация цветов, вставленных в CMS, или создание тематических ресурсов на стороне сервера, куда вы не хотите отправлять библиотеку цветов. Это один HTTP-вызов с любого языка, в том числе без хорошего цветового пакета.
- Могу ли я создать полную палитру, а не просто преобразовать один цвет?
- Да. Конечная точка цвета/палитры принимает базовый цвет и возвращает согласованный набор оттенков и дополнительных цветов. Используйте цвет/конвертировать, когда у вас есть известный цвет и вам нужны другие его представления, и цвет/палитру, когда у вас есть один фирменный цвет и вам нужен масштаб для построения вокруг него темы.
- Как значения HSL помогают при оформлении тем?
- HSL отделяет оттенок от насыщенности и яркости, поэтому вы можете построить шкалу оттенков и теней, удерживая оттенок и насыщенность постоянными и постепенно меняя яркость. Это гораздо проще рассуждать, чем подталкивать три канала RGB. Один раз преобразуйте шестнадцатеричный код вашего бренда в HSL, а затем создайте шкалу от 50 до 900, изменяя значение яркости.
- Можно ли использовать API цвета бесплатно?
- Да. Преобразование цвета находится на том же бесплатном уровне, что и остальная часть botoi: 5 запросов в минуту без необходимости ключа API и более высокие ограничения на платные планы. Это одна из примерно 200 одноцелевых конечных точек, объединенных одним ключом.
Начните разработку с botoi
150+ API-эндпоинтов для поиска, обработки текста, генерации изображений и утилит для разработчиков. Бесплатный тариф, без банковской карты.