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

Конвертирайте между HEX, RGB, HSL, HSV и CMYK. Визуализация на живо. WCAG проверяващ за контраст за достъпност. Нищо не напуска браузъра ви.

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

Color Converter превежда всеки цвят между HEX, RGB, HSL, HSV и CMYK формати незабавно при въвеждане. Той също така извършва проверка на контраста по WCAG между два цвята, избрани от вас, показвайки коефициента на контраст и резултата преминал/неуспял по AA/AAA за нормален текст, голям текст и UI компоненти. Всички изчисления се извършват в браузъра без изпращане на данни никъде; нищо, което въведете, не напуска устройството ви.

Разбирането на това как един и същ цвят изглежда в различни цветови модели е полезно при предаване на дизайни. Дизайнер може да зададе цвят на марка като HEX #1A4F8C; CSS разработчик се нуждае от HSL еквивалента за теми; печатен екип се нуждае от CMYK разбивката. Инструментът извършва конвертирането едновременно в всички посоки, така че никога не се налага да използвате множество отделни конвертори.

Написано от Bastien Sulyan

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

Въведете HEX стойност, щракнете върху цветна мостра или въведете RGB, HSL, HSV или CMYK стойности в съответните полета.
Всички други представяния на формат се актуализират незабавно, за да покажат еквивалентния цвят.
За проверка на контраста изберете цвят на преден план и цвят на фон с двата избора на цвят.
Прочетете коефициента на контраст по WCAG и значките преминал/неуспял за нивата на съответствие AA и AAA.
Копирайте всяка цветова стойност с иконата за копиране до всяко поле.

Често срещани приложения

UI дизайнер конвертира HEX код на марка в HSL, за да напише CSS потребителско свойство за система за теми.
Уеб разработчик проверява коефициента на контраст между цвета на текста и фона, преди да изпрати компонент, за да потвърди съответствие с WCAG AA.
Печатен дизайнер получава уеб HEX цвят и се нуждае от CMYK еквивалента, за да го съпостави в отпечатана брошура.
Разработчик се нуждае от RGB разбивката на дизайнерски token, за да предаде индивидуалните стойности на канали на функция за рисуване на canvas.

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

Поддържа ли инструментът алфа (прозрачност) стойности?

Текущият конвертор работи с напълно непрозрачни цветове (алфа = 1). HEXA (8-цифрен hex) и RGBA все още не са в обхвата. За непрозрачност задайте алфа канала в CSS отделно, използвайки нотацията rgba() или oklch().

Съхраняват ли се или изпращат ли се въведените цветове?

Не. Конвертирането на цветове е чиста аритметика (повторно картографиране на канали и мащабиране на диапазони), работеща изцяло в JavaScript двигателя на браузъра. Нищо, което въведете тук, не достига до сървър или външна услуга.

Кои нива на контраст по WCAG проверява инструментът?

Инструментът отчита спрямо критериите за успех по WCAG 2.1: AA изисква минимален коефициент на контраст 4,5:1 за нормален текст (под 18pt или 14pt удебелен) и 3:1 за голям текст и UI компоненти. AAA изисква 7:1 за нормален текст и 4,5:1 за голям текст.

Защо CMYK стойностите се различават между инструмента и професионален дизайнерски софтуер?

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

Мога ли да конвертирам CSS именуван цвят като 'cornflowerblue' тук?

CSS именуваните цветове не се въвеждат директно в полетата на конвертора. За конвертиране на именуван цвят първо намерете HEX стойността му в CSS референция (cornflowerblue е #6495ED), след което поставете HEX в полето HEX, за да видите всички останали формати.

Работи ли инструментът офлайн след зареждане на страницата?

Да. Конвертирането на цветове е аритметика без външна зависимост. След като страницата е в кеша на браузъра, можете да я отворите без мрежова връзка и всички конвертирания ще работят нормално.

Свързани инструменти

Пазете всичко локално, разгледайте допълнителни инструменти.

Всички инструменти за разработчици