Палитра цветов/ HEX · RGB · HSL
Выбирайте, конвертируйте и исследуйте цвета. Поддержка HEX, RGB, HSL, HSV со шкалами яркости и гармоничными палитрами.
Значения цвета
Предустановленные цвета
Шкала яркости
Цветовые гармонии
Дополнительный
Аналогичный
Триада
Этот инструмент решил вашу проблему?
Часто задаваемые вопросы
Какие цветовые форматы поддерживаются?
Инструмент поддерживает HEX (например, #6366f1), RGB (например, rgb(99, 102, 241)), HSL (например, hsl(239, 84%, 67%)) и HSV/HSB. Введите любой из этих форматов в поле ввода, и он будет автоматически распознан и конвертирован.
Что такое пипетка (EyeDropper)?
Кнопка пипетки позволяет щелкнуть в любом месте экрана, чтобы выбрать цвет этого пикселя. Используется API EyeDropper браузера, доступный в Chrome, Edge и Opera. В Firefox и Safari пока не поддерживается.
Что такое шкала яркости?
Шкала яркости показывает 9 оттенков выбранного цвета от очень темного (яркость 10%) до очень светлого (яркость 90%) с одинаковым тоном и насыщенностью. Это полезно для создания согласованных цветовых палитр в UI-дизайне.
Что такое цветовые гармонии?
Цветовые гармонии — это наборы цветов, которые визуально хорошо сочетаются. Комплементарные цвета расположены напротив на цветовом круге (высокий контраст). Аналоговые цвета — соседние (гармоничные). Триадные — три равноудаленных цвета (яркие и сбалансированные).
В чем разница между HSL и HSV?
Оба используют тон (H) и насыщенность (S), но третий компонент различается. HSL использует светлоту L (0%=черный, 50%=чистый цвет, 100%=белый). HSV использует яркость V (0%=черный, 100%=максимальная яркость). HSV часто используется в дизайнерских инструментах, таких как Photoshop; HSL более распространен в CSS.
Как использовать эти цвета в CSS?
Скопируйте значение HEX (например, #6366f1) для наиболее распространенного использования. Используйте значение RGB для rgba() с прозрачностью: rgba(99, 102, 241, 0.5). Используйте значение HSL, когда хотите программно регулировать яркость или насыщенность в пользовательских CSS-свойствах.