Преобразуване на цвят между RGB, HSL и шестнадесетичен

Табло
Документация
API

Лесно преобразува цветове RGB, HSL, Hex в различни формати. Просто въведете стойностите на цвета си и инструментът моментално генерира еквивалентите в различни формати, улеснявайки работата във вашите проекти за дизайн и разработка

Защо да конвертирате цвят между формати?

Работата с цвят в мрежата включва постоянно жонглиране между няколко нотации. Конверторът на цветове избягва ръчни грешки и ви позволява незабавно да превключвате от един формат към друг в зависимост от контекста на използване. Всеки формат има своите силни страни и знанието кой да използва е един от рефлексите на фронтенд разработчика.

Ето типичните употреби, които мотивират преобразуване на цвят:

RGB е вграден в CSS и JavaScript, може да се чете от хората, за да разберат доминиращ (червен, зелен, син канали на 0-255).
HSL прави промяната на нюанса тривиална: просто регулирайте наситеността или яркостта, без да преизчислявате всеки канал.
HEX е каноничният формат за копиране и поставяне: шест знака, съвместими навсякъде, идеални за модели Figma, Sketch или ръководства за стил.
Преобразуванията HEX към RGB, RGB към HEX, HEX към HSL и техните реципрочни стойности са най-често срещаните операции в CSS и JavaScript.

Обяснени цветови формати

RGB и RGBA (червено, зелено, синьо, алфа)

Всеки канал е кодиран като цяло число между 0 и 255, което съответства на един байт на компонент и дава 16 777 216 възможни цвята. Алфа каналът на RGBA варира от 0 (прозрачен) до 1 (непрозрачен) и контролира прозрачността.

<предварителен


.button {
    цвят на фона: rgb(20, 0, 182);
    цвят на границата: rgba(20, 0, 182, 0.5);
}

HEX и HEX8 (шестнадесетичен запис)

Много популярен компактен формат: #RRGGBB с шест знака, където всяка двойка представлява RGB канал с основа 16. Вариантът #RRGGBBAA с осем знака добавя алфа канала в шестнадесетичен (00 прозрачен, FF непрозрачен). Кратката нотация #RGB също съществува: #F53 е еквивалентът на #FF5533.

<предварителен


.title { цвят: #1400B6; }
.shadow { цвят: #1400B680; } /* алфа 50% */
.accent { цвят: #F53; } /* кратка форма */

HSL и HSLA (нюанс, наситеност, светлота, алфа)

HSL описва цвета перцептуално. Нюанс е ъгъл върху цветното колело (0 до 360°), Наситеност и Светлота са проценти. Това е предпочитаният формат за генериране на вариации: осветяване на бутон, който е поставен над него, обезцветяване на деактивирано състояние, създаване на кохерентна палитра чрез промяна само на нюанса.

<предварителен


$първичен: hsl(247, 100%, 36%);
$първично задържане: hsl(247, 100%, 46%);   /* по-ясно */
$основно заглушен: hsl(247, 30%, 36%);    /* по-малко наситен */

Други съществуващи формати

CMYK (циан, магента, жълто, ключ) се използва при печатане: той описва цвят чрез изваждане на мастила и не е уместен на екрана. OKLCH и LAB са перцептивно еднакви пространства, които се появяват в CSS ниво на цвят 4; те позволяват по-добър контрол на усещаната яркост. Този инструмент се фокусира върху RGB, HEX и HSL преобразувания, които покриват по-голямата част от уеб нуждите.

Как работи преобразуването?

HEX към RGB означава анализиране на низа в двойки знаци и интерпретиране на всяка двойка като цяло число с основа 16:

<предварителен


const hex = '#1400B6';
const r = parseInt(hex.slice(1, 3), 16); // 20
const g = parseInt(hex.slice(3, 5), 16); // 0
const b = parseInt(hex.slice(5, 7), 16); // 182

RGB към HEX е обратната операция: всеки канал се преобразува в основа 16, допълва се до два знака, след което се свързва.

<предварителен


const toHex = (n) => n.toString(16).padStart(2, '0');
const hex = '#' + toHex(20) + toHex(0) + toHex(182); // '#1400b6'

RGB към HSL е по-алгоритмичен. Ние нормализираме каналите между 0 и 1, изчисляваме min и max, за да изведем яркостта, след това наситеността, след това нюанса според доминиращия канал. Пълната формула е документирана в спецификацията CSS Color Module Level 3.

Как да използвате конвертор на цветове

Инструментът работи в двете посоки между RGB, HEX и HSL. За да извършите преобразуване:

Изберете входния формат: RGB, HEX или HSL.
Въведете стойността (например #1400B6, rgb(20, 0, 182) или hsl(247, 100%, 36%)).
Стартиране на преобразуването: еквивалентите в другите два формата се показват незабавно.
Копирайте желания резултат с помощта на специалния бутон и го поставете във вашия стилов лист или оформление.

Изчислението се извършва от страна на браузъра, не се изпращат данни към сървър.

Конкретни случаи на употреба

Уеб дизайн и CSS: извлечете HEX от макет и получете еквивалентен HSL, за да генерирате задържане или активно състояние, без да се отклонявате от нюанса.
Визуална идентичност и палитра: отклонете основен цвят в няколко вариации (светъл, тъмен, заглушен) чрез игра на яркост или HSL наситеност.
Илюстрации и графики: транспонирайте цвят на екрана (RGB) в шестнадесетичен код за предаване на софтуер или клиент.
Достъпност: конвертирайте във формат RGB, за да изчислите след това съотношение на контраст (WCAG AA изисква 4,5:1 за нормален текст) с цвета на фона.
CSS променливи и предварителни процесори: Подайте токени за дизайн в SASS файл или тема на Tailwind от един референтен цвят.

Примери за реализации

Някои пълни преобразувания, за да илюстрират съответствието между трите формата:

<предварителен


#1400B6 -> rgb(20, 0, 182) -> hsl(247, 100%, 36%)
#FF5733 -> rgb(255, 87, 51) -> hsl(11, 100%, 60%)
#2ECC71 -> rgb(46, 204, 113) -> hsl(145, 63%, 49%)
#F1C40F -> rgb(241, 196, 15) -> hsl(48, 89%, 50%)
#FFFFFF -> rgb(255, 255, 255) -> hsl(0, 0%, 100%)
#000000 -> rgb(0, 0, 0) -> hsl(0, 0%, 0%)

С алфа канал:

<предварителен


#1400B680 -> rgba(20, 0, 182, 0,50) -> hsla(247, 100%, 36%, 0,50)
#FF5733CC -> rgba(255, 87, 51, 0,80) -> hsla(11, 100%, 60%, 0,80)

ЧЗВ за преобразуване на цветови кодове

Каква е разликата между HEX и HEX8?

Класическият HEX кодира три RGB канала над шест знака (#RRGGBB). HEX8 добавя два знака за алфа канала (#RRGGBBAA), което помага за управление на прозрачността в един низ. #1400B6FF и #1400B6 визуално дават един и същ цвят, непрозрачен.

Да предпочетем HSL или RGB в CSS?

Двете са еквивалентни при изобразяване. HSL е по-експресивен за генериране на кохерентна палитра или варианти на състояние (задържане на курсора на мишката, фокусиране), тъй като ние модифицираме единичен перцептивен параметър. RGB остава практичен при работа с данни от платно или сензор.

Защо моят HEX дава различен нюанс от очакваното?

Три често срещани причини: объркване между кратко #RGB и дълго #RRGGBB (знаците се дублират, не са свързани), грешка при копиране на знак или показване на некалибриран екран. Също така проверете дали вашият CSS не наслагва родителска непрозрачност, която променя окончателното изобразяване.

За какво се използва алфа каналът на RGBA и HSLA?

Алфа каналът контролира непрозрачността на цвета от 0 (напълно прозрачен) до 1 (напълно непрозрачен). Полезно е за наслагвания, сенки, забранени състояния или наслагвания на изображения. За разлика от свойството opacity на CSS, RGBA и HSLA засягат само целевия цвят, а не неговите деца.

Можем ли да конвертираме цвят без загуба на прецизност?

Между RGB и HEX преобразуването е точно, и двата формата кодират една и съща информация на 24 бита. Преобразуването в HSL включва закръгляване на нюанса, наситеността и яркостта; двупосочно RGB > HSL > RGB следователно може да върне стойност, изместена с една единица на определени канали.

Защо да използвате онлайн конвертор, а не вътрешна функция?

За еднократен тест, прототип на палитра или бързо проверете HEX еквивалента на HSL цвят, извлечен от модел, онлайн конвертор е незабавен. За повтарящи се програмни нужди, библиотека като color, chroma-js или tinycolor2 остава по-подходяща.

Често задавани въпроси

Моите цветове изпращат ли се до сървър?

Не. Преобразуването между RGB, HEX и HSL е строго математическо и се извършва от страна на браузъра. Нито една въведена стойност не се предава на cdrn сървър или трета страна, което прави инструмента използваем дори офлайн, след като страницата се зареди.

Каква е разликата между кратката HEX нотация #F53 и дългата нотация #FF5533?

Кратката форма с три знака е CSS пряк път, където всяка цифра се дублира, за да се реконструира дългата форма. Следователно #F53 дава точно #FF5533, т.е. rgb(255, 85, 51). Само цветове, при които всеки канал има две еднакви числа, могат да бъдат представени в кратка форма.

Моят HEX код има 8 знака, как мога да го интерпретирам?

Последните два знака представляват алфа канала в шестнадесетичен формат, от 00 (напълно прозрачен) до FF (напълно непрозрачен). Например #1400B680 съответства на rgba(20, 0, 182, 0.5). Тази нотация HEX8 се поддържа от всички съвременни браузъри в CSS.

Този инструмент преобразува ли се в CMYK?

Не. CMYK е субтрактивно пространство, използвано при печатане и зависи от колориметричния профил на машината. Съществува теоретично преобразуване на RGB към CMYK, но то не отразява действителното изобразяване при печат. За сериозен печат експортирайте файла си от професионален софтуер (Illustrator, InDesign, Affinity) с ICC профила, предоставен от принтера.

Можем ли да конвертираме OKLCH или LAB цвят?

Не в тази версия. Инструментът е насочен към RGB, HEX и HSL, които покриват по-голямата част от нуждите на предния край. OKLCH и LAB са перцептивно еднакви пространства, дефинирани от CSS Color Level 4 и изискват по-тежка матрица за преобразуване. Ако работите върху усъвършенствани достъпни палитри, библиотеки като culori или colorjs.io обработват тези реализации.

Защо моят HSL резултат е малко по-различен от друг конвертор?

Преобразуването на RGB в HSL включва разделяне и закръгляване на оттенъка (в градуси) и процентите на наситеност и яркост. В зависимост от изпълнението, закръгляването може да се извърши до единица или до десетичен знак, което води до отклонения на една единица, които са визуално незабележими. Всички стойности, върнати от този инструмент, съответстват на спецификацията на CSS цветовия модул ниво 3.

Пример за заявка

curl -X POST https://cdrn.fr/api/v1/tools/color-converter/execute \
  -H "Content-Type: application/json" \
  -d '{"type":"hsl","red":"...","green":"...","blue":"...","hue":"...","saturation":"...","lightness":"...","hex":"..."}'

Входна схема

Поле	Тип	Задължително	По подразбиране
`type`	choice (hsl, rgb, hex)	✓	–
`red`	number	✓	–
`green`	number	✓	–
`blue`	number	✓	–
`hue`	number	✓	–
`saturation`	number	✓	–
`lightness`	number	✓	–
`hex`	string	✓	–

Крайни точки

GET https://cdrn.fr/api/v1/tools - изброява всички достъпни инструменти
GET https://cdrn.fr/api/v1/tools/color-converter - извлича схемата на този инструмент
POST https://cdrn.fr/api/v1/tools/color-converter/execute - изпълнява този инструмент с JSON payload