Конвертор на цветове

Конверторът на цветове е безплатен инструмент, който преобразува цвят, зададен като HEX, HEX alpha, RGB, RGBA, HSV, HSL или HSLA, в няколко еквивалентни цветови формата.

Какви цветови формати мога да преобразувам?

Можеш да въведеш стойност във формат HEX, HEX alpha, RGB, RGBA, HSV, HSL или HSLA и да видиш съответните стойности във всички поддържани формати. Това е полезно, когато спецификация за дизайн, файл със стилове или външен API представя един и същ цвят по различен начин.

• HEX представя червения, зеления и синия канал чрез двойки шестнадесетични знаци, обикновено във вида #RRGGBB.
• HEX Алфа добавя канал за непрозрачност. В съвременния CSS този формат обикновено се изписва като #RRGGBBAA.
• RGB използва стойности за червения, зеления и синия канал, обикновено в диапазона от 0 до 255.
• RGBA добавя алфа прозрачност към RGB.
• HSV описва нюанса, наситеността и стойността. Често се използва в инструменти за избор на цвят, но не е стандартна цветова функция в CSS.
• HSL описва нюанса, наситеността и светлотата. CSS поддържа HSL директно.
• HSLA е HSL с алфа стойност.

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

Как се използва конверторът на цветове?

Въведи една пълна стойност на цвят в полето Цвят, като използваш някой от приеманите формати. След това прегледай или копирай генерираните стойности от изходните полета.

1. Копирай изходната стойност точно, включително началния знак диез, запетаите, скобите, знаците за процент или алфа компонента, когато са приложими.
2. Постави я в полето Цвят.
3. Прегледай еквивалентните стойности в полетата HEX, HEX Алфа, RGB, RGBA, HSV, HSL и HSLA.
4. Избери поддържан цветови формат, който целевата система приема. За CSS правило обичайните варианти са HEX, RGB, RGBA, HSL и HSLA. HSV се използва по-често в интерфейси за редактиране и при изчисления с цветове.

Преобразуването се извършва на сървъра. Въведената стойност се изпраща до него през HTTPS и не се съхранява. Отделният цвят рядко е чувствителна информация, но преди да изпратиш неиздадена цветова палитра или набор от дизайн токени към която и да е онлайн услуга, прецени дали те са поверителни.

Интервалите и препинателните знаци са част от синтаксиса на RGB, HSL и свързаните формати, а знаците за процент обозначават процентни стойности. Самостоятелно число, празна стойност или произволен текст не определят цвят. Текстът с диакритични или нелатински знаци също няма определено значение в тези числови формати.

Как да разчитам преобразуваните стойности?

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

При шестцифрения HEX първата двойка представя червения канал, втората зеления, а третата синия. Например #336699 съдържа шестнадесетичните стойности 33, 66 и 99, които съответстват на десетичните RGB стойности 51, 102 и 153.

Нюансът обикновено се изразява като ъгъл върху цветови кръг. Наситеността и светлотата или стойността обикновено са проценти. Светлотата в HSL и стойността в HSV се изчисляват по различен начин, затова процентите им не бива да се сравняват, сякаш измерват едно и също свойство.

Алфа каналът описва непрозрачността. За напълно непрозрачен цвят не е необходим формат с алфа канал, но за полупрозрачен цвят такъв формат е нужен. Ако копираш цвят във формат RGBA или HSLA в обикновен RGB, HSL или шестцифрен HEX, целевият формат няма къде да запише алфа канала.

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

Примери за преобразуване на цветове

Кратък пример показва връзката между HEX, RGB, HSL и HSV. Чистото червено може да се запише в следните еквивалентни форми.

• Входна HEX стойност #ff0000
• Еквивалентна RGB стойност rgb(255, 0, 0)
• Еквивалентна HSL стойност hsl(0, 100%, 50%)
• Еквивалентна HSV стойност hsv(0, 100%, 100%)

При по-слабо наситен цвят #336699 е еквивалентен на rgb(51, 102, 153). Представянето му в HSL е hsl(210, 50%, 40%), а в HSV нюансът е 210 градуса, наситеността е около 66,7%, а стойността е 60%. Интерфейсът може да закръгля десетичните стойности или да използва различни интервали, без това да променя практическото значение.

Прозрачността дава още един ясен пример. rgba(255, 0, 0, 0.5) и hsla(0, 100%, 50%, 0.5) описват червено с наполовина намалена непрозрачност. Според широко използваната осемцифрена CSS HEX нотация съответната стойност е #ff000080, където 80 е квантуваният байт на алфа канала.

Кога си струва да преобразувам цвят?

Преобразуването е полезно, когато приложението, в което ще използваш цвета, изисква различен формат или когато друг начин на представяне улеснява откриването на грешки. Типични случаи са преобразуване на стойност от Figma в персонализирано CSS свойство, проверка на RGBA стойност от Chrome DevTools, подготовка на цветови полета за заявка към API или преглед на данни от външна тема преди внедряване.

Обикновено няма нужда от преобразуване, ако целевата система вече поддържа текущия цветови формат. Промяната на шестцифрен HEX в RGB само за машинно четим CSS не носи особена полза, а многократното преобразуване в двете посоки може да доведе до закръгляне на стойностите в HSL или HSV. Също така не добавяй алфа канал, когато всички цветове със сигурност са напълно непрозрачни.

Ако искаш да избереш цвят визуално, вместо да преобразуваш известна стойност, използвай Избор на цвят. Преобразуването не замества проверката на контраста, симулацията на цветна слепота или управлението на цветови профили. Еквивалентните числови стойности не доказват, че текстът на преден план отговаря на изискванията на WCAG за контраст.

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

Конверторът приема ли именувани цветове от CSS?

Не. Описаните поддържани формати са HEX, HEX alpha, RGB, RGBA, HSV, HSL и HSLA, затова имена като red, rebeccapurple или transparent не са посочени като допустими входни стойности. Преди да въведеш именуван цвят, преобразувай го в числова CSS стойност.

Мога ли да въведа трицифрена HEX стойност?

HEX е сред приеманите входни формати, но поддържаните дължини не са описани. За предвидим резултат разгъни съкратен запис като #369 до #336699. Същото важи и за четирицифрените съкратени стойности с алфа канал.

Мога ли да поставя цяла CSS декларация вместо стойност на цвят?

Въведи само стойността на цвета, а не цялата декларация. Например използвай #336699 вместо color: #336699;, защото името на свойството и точката и запетаята не са част от самия цвят. Ако копираш стойност от JSON или конфигурационен файл, премахни ограждащите кавички.

Ще се запази ли информацията за широка цветова гама или цветови профил?

Сред поддържаните формати не са посочени такива за широка цветова гама или вградени цветови профили. Данните за Display P3, Lab, LCH и ICC профили съдържат информация, която наличните полета за HEX, RGB, HSL и HSV не могат да представят. Когато преобразуването трябва да отчита цветови профили, използвай приложение с управление на цветовете.

Защо преобразуваните стойности понякога съдържат десетични числа?

Изчисленията за HSL и HSV могат да дадат дробни проценти дори когато изходните RGB канали са цели числа. Закръглянето им може леко да промени резултата при последващо преобразуване обратно към RGB. Когато съхраняваш дизайн токени, запази наличната точност и закръгляй само ако целевият формат или стандартът за писане на код го изисква.