Конвертер цветов прямо в браузере

Конвертер поддерживает HEX (3-значный, 6-значный и 8-значный с буквенным алфавитом), RGB и RGBA (синтаксис запятой или пробела), HSL и HSLA, OKLCH и любые допустимый CSS названный цвет, например васильковый, ребеккапурпурный или томатный. Формат определяется автоматически при вводе, поэтому вы можете вставить любой из них непосредственно в поле ввода, не выбирая предварительно режим.

OKLCH - это единообразное по восприятию полярное цветовое пространство, определяемое яркостью (L), цветностью (C) и оттенком (H). В отличие от HSL, где цвета с одинаковыми значениями яркости могут визуально сильно различаться по воспринимаемой яркости, OKLCH использует базовую модель, которая лучше соответствует тому, как человеческое зрение воспринимает различия в цветах. Это делает его идеальным для программного создания доступных цветовых шкал, согласованных палитр кнопок и токенов дизайна. CSS изначально поддерживает oklch() во всех современных браузерах по состоянию на 2023 год, и основные системы дизайна приняли его для этой точности. Вы можете связать значения OKLCH напрямую с CSS Gradient Generator для получения плавных градиентов восприятия.

Коэффициент контрастности использует формулу WCAG 2.1: (L1 + 0,05) / (L2 + 0,05), где L1 - относительная яркость более светлого цвета, а L2 - относительная яркость более темного цвета. Относительная яркость рассчитывается на основе линеаризованных значений каналов sRGB, взвешенных как 0,2126 R + 0,7152 G + 0,0722 B. Инструмент проверяет ваш цвет на соответствие чисто белому (255, 255, 255) и почти черному (15, 23, 42) и отображает соотношение вместе с оценкой WCAG как для обычного, так и для крупного текста.

WCAG 2.1 определяет два уровня соответствия контрастности текста. Уровень AA требует соотношения не менее 4,5:1 для обычного текста и 3:1 для крупного текста (18pt+ или 14pt+жирный). Уровень AAA требует 7:1 для обычного текста и 4,5:1 для большого текста. AA является юридическим минимумом во многих правилах доступности, включая EN 301 549 и раздел 508. AAA рекомендуется для документов или интерфейсов, где важна максимальная читаемость, например, для медицинского или юридического контента.

Палитра преобразует ваш цвет в пространство HSL, затем генерирует пять оттенков путем интерполяции яркости до 95 % (около белого) и пять оттенков путем интерполяции до 5 % (около черного), сохраняя постоянный оттенок и насыщенность. В результате получается полоса из 11 образцов: 5 оттенков, ваш основной цвет (обведенный в палитре) и 5 ​​оттенков. Щелчок по любому образцу немедленно загружает этот цвет во входные данные для дальнейшего преобразования или проверки WCAG.

Нет. Весь анализ цвета, математические преобразования и вычисления WCAG полностью выполняются в вашем браузере с использованием JavaScript. PureTools не имеет конечной точки сервера для этого инструмента и никогда не получает введенные вами цвета. Последний введенный вами цвет сохраняется в sessionStorage под ключом в пространстве имен, поэтому он сохраняется при обновлении, но sessionStorage автоматически очищается при закрытии вкладки, поэтому данные удаляются при закрытии вкладки. Ничего никогда не загружается и не хранится удаленно. Ваши данные никогда не используются для обучения моделей ИИ или улучшения систем машинного обучения.

Да. Figma обычно копирует цвета в формате HEX, HSL или RGB. Инструменты разработчика браузера копируют цвета в шестнадцатеричном формате, rgb() или hsl(). Все это принимается напрямую. Если вы копируете значение oklch() из файла CSS или токена дизайна JSON, это также поддерживается. Инструмент автоматически определяет формат вставленной строки, поэтому вам не нужно ничего выбирать перед вставкой. Вы также можете использовать JSON Formatter для извлечения значений цвета из файлов токенов дизайна JSON перед их вставкой сюда.

Оба HSL (Оттенок, Насыщенность, Яркость) и HSV (Оттенок, Насыщенность, Значение) представляют цвета с использованием угла оттенка и двух относительных осей, но третью ось они определяют по-разному. В HSL яркость 50% при максимальной насыщенности дает чистый оттенок. В HSV значение 100 % с максимальной насыщенностью также дает чистый оттенок, но концептуально значение ближе к воспринимаемой яркости. HSL более интуитивно отражает то, как дизайнеры думают об оттенках и оттенках, тогда как HSV обычно используется в колесах выбора цвета и приложениях для редактирования изображений.

sRGB и OKLCH охватывают схожие, но не идентичные гаммы. Когда вы конвертируете sRGB в OKLCH, значения становятся математически точными. При обратном преобразовании округление с плавающей запятой при умножении промежуточной матрицы и шаге кубического корня может привести к получению значений канала, которые равны 0 или 1 в диапазоне целых чисел 0–255, и эта разница визуально незаметна. Если на входе используется значение OKLCH с очень высокой цветностью, которое выходит за пределы гаммы sRGB, инструмент ограничивает выходной канал ближайшим допустимым значением sRGB, а не выдает недопустимый CSS.

Собственный инструмент выбора цвета браузера (input type="color") всегда сохраняет свое значение в шестнадцатеричном формате. Всякий раз, когда вы вводите допустимый цвет в текстовое поле в любом формате, инструмент преобразует его в шестнадцатеричный и программно обновляет значение средства выбора. И наоборот, при выборе цвета из образца его шестнадцатеричное значение записывается в текстовое поле. Эта двусторонняя синхронизация означает, что вы можете использовать визуальное средство выбора для исследования и текстовое поле для точности, и оба всегда отражают один и тот же цвет.

Да, в рамках того же сеанса браузера. Инструмент сохраняет последний действительный ввод в sessionStorage, поэтому он сохраняется при обновлении. Когда вы закрываете вкладку, sessionStorage автоматически очищается браузером, поэтому цвет стирается, и ваши данные остаются только на вашем устройстве. Инструмент не использует localStorage для данных цвета, там сохраняются только настройки темы.

Нет. Конвертер цветов хранит файлы, значения и временные результаты на вашем устройстве. У PureTools нет серверной базы данных для таких вводов, и инструмент не отправляет их на сервер обработки. Данные могут находиться в памяти браузера или sessionStorage только во время активной вкладки и удаляются, когда вы закрываете вкладку или очищаете страницу.

Конвертер цветов выполняет расчёты и обработку прямо в браузере с помощью клиентского JavaScript. Инструмент читает ваши значения, применяет видимые настройки, такие как Конвертация HEX, RGB, HSL, HSV и OKLCH за один шаг, и обновляет результат без отправки файлов или данных на сервер. Такой подход сохраняет сессию локальной, ускоряет обратную связь и позволяет снова открыть страницу из кеша браузера после первой полной загрузки.

После закрытия вкладки временные значения, использованные в Конвертер цветов, исчезают вместе с сессией браузера. Общие настройки, например тема, могут оставаться в localStorage, но файлы, результаты и введённый контент инструмента не сохраняются как долгосрочная история. Это сохраняет удобство работы без постоянного следа ваших данных. Конвертер цветов выполняет расчёты и обработку прямо в браузере с помощью клиентского JavaScript. Инструмент читает ваши значения, применяет видимые настройки, такие как Конвертация HEX, RGB, HSL, HSV и OKLCH за один шаг, и обновляет результат без отправки файлов или данных на сервер. Такой подход сохраняет сессию локальной, ускоряет обратную связь и позволяет снова открыть страницу из кеша браузера после первой полной загрузки.