Продвинутые настройки
цветовых профилей
Глубокое погружение в техническую реализацию цвета в веб-среде. Научитесь управлять цветовыми пространствами, точными градиентами и прозрачностью для создания безупречных интерфейсов.
Фундамент: RGB, HEX и HSL
Понимание различий между моделями цвета критически важно для предсказуемого рендеринга в браузере.
Модель аддитивности
Базовый стандарт мониторов. Состоит из Красного (Red), Зеленого (Green) и Синего (Blue). Значения варьируются от 0 до 255. Идеально для точечной настройки, но сложно для восприятия человеком.
Шестнадцатеричный
Компактное представление RGB. Стандарт де-факто для верстки. Pixly автоматически конвертирует любые форматы в HEX при экспорте в CSS/SASS для максимальной совместимости со старыми браузерами.
Оттенок, Насыщенность, Светлота
Самый удобный формат для дизайнеров. Позволяет менять яркость цвета, не трогая его оттенок. Используйте HSL в Pixly для генерации тем (Light/Dark mode) одним ползунком.
Цветовые пространства: sRGB против P3
Адаптация контента для современных широкоформатных дисплеев
Стандарт sRGB
Охватывает около 35% видимого человеком спектра. Это стандарт для большинства офисных мониторов и старых мобильных устройств. Если ваш дизайн выглядит «плоским» на новых устройствах, возможно, вы ограничены sRGB.
Wide Gamut (Display P3)
Используется в iPhone Pro и современных MacBook. Позволяет отображать более насыщенные красные и зеленые оттенки. Pixly автоматически добавляет fallback-цвета, чтобы ваш интерфейс выглядел сочно на P3, но корректно на sRGB.
Автоматическая конвертация
Включите опцию «Wide Gamut Aware» в настройках проекта. Pixly переведет ваши HEX-коды в цветовые функции CSS `color(display-p3 ...)` для нативной поддержки браузером.
Работа с Alpha-каналом
Прозрачность (Alpha) — это не просто полупрозрачность. Это способ создания глубины.
- • RGB(A): Точный контроль непрозрачности (0.0 — 1.0).
- • HEX-8: Новый стандарт #RRGGBBAA для компактных стилей.
- • Миксы: Математическое смешивание цветов с фоном (Mix-blend-mode).
В Pixly вы можете задавать прозрачность глобально для всей палитры. Изменение альфа-канала на 10% автоматически пересчитается для всех 50 оттенков вашего бренда.
Контроль прозрачности
Используйте альфа-канал для создания эффекта матового стекла (Glassmorphism) без использования тяжелых фильтров CSS.
background: rgba(255, 46, 147, 0.15);
/* Эквивалент в Pixly */
@color(--brand-primary / 15%)
16M+
Вариантов цветов
1px
Точность градиента
0ms
Задержка сохранения
100%
Совместимость CSS3
Математика градиентов
Создание идеальных переходов с помощью линейной интерполяции
Линейная интерполяция
Алгоритм Pixly использует линейную интерполяцию (Lerp) для плавного перехода между точками остановки (stops). Мы избегаем «грязных» средних тонов, вычисляя путь через цветовое пространство HSL, а не RGB.
Углы и направления
Настраивайте угол градиента с точностью до 0.1 градуса. Поддерживаются ключевые слова (to right, 45deg) и функциональная запись для сложных диагоналей.
Mesh-градиенты
Экспериментальная поддержка градиентных сеток. Создавайте органические, текучие фоны, которые невозможно воспроизвести стандартными CSS-линейными градиентами.
Кастомные пресеты и Облако
Перестаньте настраивать цвета с нуля каждый раз. Pixly сохраняет ваши настройки профилей в облаке.
- Глобальные пресеты: Сохраните набор «Dark Mode Cyberpunk» или «Soft Corporate» и применяйте его к новым проектам одной кнопкой.
- Версионирование: История изменений каждой палитры. Вернитесь к состоянию от 12:00, если новый оттенок не прошел код-ревью.
- Командная библиотека: Все изменения в цветовом профиле мгновенно синхронизируются с устройствами вашей команды.
Сохранить в библиотеку?
Ваши текущие настройки профиля будут экспортированы в JSON и сохранены в облачный хранилище Pixly.
Технические вопросы
Мы используем алгоритм сжатия цветового диапазона (clamping), который автоматически подбирает ближайший отображаемый цвет для конкретного устройства, предотвращая искажения.
Да. Мы поддерживаем импорт файлов .ase (Adobe Swatch Exchange). При импорте настройки альфа-каналов и групп будут сохранены.
Да, в версии 2.0 мы добавили генерацию кода с использованием цветовых пространств OKLCH и sRGB IEC61966-2.1 для максимальной точности.