What is the difference between HEX, RGB, and HSL color formats?

HEX (#RRGGBB) encodes red, green, and blue channels as two hexadecimal digits each (0–FF). RGB (rgb(255, 0, 0)) expresses the same channels as decimal values 0–255. HSL (hsl(0, 100%, 50%)) represents color as Hue (0–360°, the color wheel position), Saturation (0–100%, color intensity), and Lightness (0–100%, black to white). HEX and RGB are equivalent and used most in code; HSL is more intuitive for manually adjusting colors because you can change lightness independently of hue.

What is the difference between HSL and HSV (HSB)?

HSL and HSV (also called HSB — Hue, Saturation, Brightness) both use a hue angle and saturation percentage but differ in the third channel. In HSL, 50% Lightness is a pure color, 0% is black, and 100% is white. In HSV, 100% Value/Brightness is a pure color, and 0% is black — there is no way to get white without reducing saturation. Photoshop and most design tools use HSB; CSS uses HSL. The same hue and saturation produce different colors in each model.

How do I convert a hex color code to RGB?

Split the hex code into three 2-character pairs and convert each from hexadecimal to decimal. For #1A2B3C: R = 1A hex = 26 decimal, G = 2B hex = 43 decimal, B = 3C hex = 60 decimal → rgb(26, 43, 60). For shorthand hex like #ABC, expand each digit: #ABC = #AABBCC. In JavaScript: parseInt('1A', 16) returns 26. Most color pickers, CSS preprocessors, and design tools perform this conversion automatically.

What is color opacity/alpha and how is it expressed?

Alpha represents opacity: 0 = fully transparent, 1 (or 100%) = fully opaque. In CSS: rgba(255, 0, 0, 0.5) for 50% transparent red. In 8-digit HEX: #RRGGBBAA, so #FF000080 is 50% transparent red (80 hex = 128 decimal = ~50%). In HSLA: hsla(0, 100%, 50%, 0.5). In Tailwind CSS, opacity is set separately (bg-red-500/50). In SVG, fill-opacity and stroke-opacity control transparency. Note: alpha compositing depends on the background — a transparent element over white looks different than over black.

Пипетка и конвертер цветов

Ввод цвета

Технические детали

Как работает пипетка цветов

Что делает инструмент

Инструмент «пипетка/выбор цвета» предоставляет широкие возможности выбора и преобразования цветов, позволяя пользователям визуально подбирать цвета и конвертировать их между различными форматами. Этот онлайн-подборщик цветов поддерживает несколько цветовых моделей, включая RGB, HSL, HSV и шестнадцатеричные представления, обеспечивая удобное преобразование цветовых кодов для веб-разработки и дизайнерских задач. Когда вам нужно преобразование hex в rgb или преобразование rgb в hex, этот инструмент выдаёт мгновенный результат с предпросмотром цвета в реальном времени. Конвертер цветов выполняет преобразования между различными цветовыми пространствами, упрощая работу с цветами в разных дизайнерских инструментах и программных контекстах. Этот hex-подборщик цветов предлагает интуитивный интерфейс для точного выбора, а rgb-подборщик цветов даёт числовой контроль для точной спецификации цвета.

Распространенные сценарии использования для разработчиков

Разработчики используют инструменты выбора цвета при реализации пользовательских интерфейсов, создании CSS-стилей или работе с дизайн-системами, где требуется единообразное использование цветов. Преобразование hex в rgb важно при работе с разными форматами цветов в CSS, переносе дизайн-спецификаций в код или обеспечении согласованности цветов между платформами. Многим разработчикам требуется преобразование цветовых кодов при интеграции с дизайн-инструментами, обработке цветов, выбранных пользователем, или реализации систем тем с несколькими представлениями цвета. Конвертер цветов помогает при работе с графическими библиотеками, операциями canvas или обработкой изображений, где нужны конкретные форматы цвета. Функциональность онлайн-подборщика цветов полезна для создания палитр, отладки проблем, связанных с цветом, или генерации вариаций цветов для UI-компонентов. Инструмент «пипетка» помогает извлекать цвета из существующих дизайнов или подбирать совпадающие цвета для разных элементов.

Форматы данных, типы или варианты

Подборщик цветов поддерживает различные форматы представления цвета, используемые в веб-разработке и дизайнерских приложениях. Шестнадцатеричные коды цветов (#RRGGBB или #RGB) являются стандартом для CSS и веб-разработки, обеспечивая компактное представление. Значения RGB (красный, зелёный, синий) используют числовые диапазоны 0–255 или значения с плавающей точкой 0–1 для точной спецификации цвета. Цветовые модели HSL (тон, насыщенность, светлота) и HSV (тон, насыщенность, значение) предлагают интуитивное управление цветом, основанное на человеческом восприятии. Конвертер HSL помогает при настройке цветов, а конвертер HSV полезен в графическом программировании. Некоторые приложения требуют значения CMYK для полиграфического дизайна или цветовое пространство LAB для рабочих процессов с высокой точностью цветопередачи. Конвертер цветовых кодов автоматически выполняет преобразования форматов, округление точности и валидацию, чтобы обеспечить корректность цвета в разных системах.

Распространенные ошибки и крайние случаи

При использовании инструментов выбора цвета учитывайте, что восприятие цвета может заметно отличаться на разных дисплеях, в разных браузерах и операционных системах. Процесс преобразования hex в rgb может вносить небольшие ошибки округления при конвертации между форматами, особенно для цветов, которые не отображаются точно в дискретные значения RGB. Требования доступности предполагают проверку контрастности и уверенность в том, что цвета подходят пользователям с нарушениями цветового зрения. Некоторые форматы имеют ограниченный охват (gamut), поэтому при преобразовании между цветовыми пространствами цвета могут выглядеть иначе. Онлайн-подборщик цветов должен учитывать гамма-коррекцию и различия цветовых профилей, влияющие на отображение цвета в разных контекстах. Всегда тестируйте выбранные цвета в целевой среде: они могут выглядеть по-разному при разном освещении, на разных фонах или на разных типах устройств.

Когда использовать этот инструмент, а когда — код

Используйте этот браузерный подборщик цветов для быстрого выбора цвета, исследования вариантов дизайна или преобразования цветов в процессе разработки. Он идеально подходит для интерактивного подбора, извлечения цветов из дизайнов или конвертации между форматами при работе над прототипами или небольшими проектами. Для продакшн-приложений используйте библиотеки работы с цветом для вашего языка программирования (например, chroma.js для JavaScript, colorsys для Python или Color для Java), которые предоставляют программные операции с цветом и интеграцию с логикой приложения. Решения на основе кода позволяют автоматизировать обработку цветов, генерировать палитры и интегрироваться с дизайн-системами или CMS. Используйте браузерные инструменты для задач дизайна и разработки, но реализуйте программную обработку цветов в приложениях, где нужна автоматизация, генерация тем или продвинутые функции, такие как расчёт цветовой гармонии или проверка доступности.