Към основното съдържание
LibraTool logoLibraTool

Конвертор на цветове — безплатно

Конвертирайте цветове между HEX, RGB, HSL, HSV и CMYK формати мигновено. Включва скала на яркостта и предварително зададени мостри.

Работи офлайн след зареждане

Преобразувайте цвят между HEX, RGB, HSL, HSV и CMYK — с живо предварително преглеждане и еднокатъчно копиране. Всичко работи в браузъра ви.

Приема: HEX (#fff или #ffffff), RGB (255, 255, 255) или HSL (360, 100%, 50%)

100%
Предварително зададени:
HEX#14B8A6
rgb() · наследствоrgb(20, 184, 166)
rgb() · модерноrgb(20 184 166)
hsl() · наследствоhsl(173, 80%, 40%)
hsl() · модерноhsl(173 80% 40%)
oklch()oklch(70.4% 0.123 182.5)
lab()lab(67.1% -42.9 -2.3)
lch()lch(67.1% 43.0 183.1)
hsv()hsv(173, 89%, 72%)
cmyk()cmyk(89%, 0%, 10%, 28%)
RGB стойности20, 184, 166

WCAG контраст

На бял фон

2,49:1

Неуспешно

На черен фон

8,44:1

AAA
🖨️ За печат: Тези CMYK стойности (89%, 0%, 10%, 28%) са стандартна sRGB→CMYK приблизително за справка. За точен печатен цвят използвайте ICC профила на вашия принтер или отпечатан пример — екранният CMYK не може да съответства на всеки мастило/хартия.

Скала на яркостта

Кликнете върху мостра, за да превключите към този нюанс

Често срещани употреби

  • Конвертирайте цветове за web дизайнПолучете HEX, RGB и HSL стойности за всеки цвят — готови за поставяне в CSS или Tailwind.
  • Конвертирайте цветове за печат (CMYK)Конвертирайте екранни цветове (HEX/RGB) в CMYK стойности за използване в печатния дизайн и професионален печат.
  • Построите цветни палети за системи на дизайнКонвертирайте цветове на маркатата във всички формати и създайте последователни скали на светлина за пълна система на дизайна.
  • Проверка на контраста на цвета за достъпностПреобразувайте цветове, за да получите RGB стойности за използване в инструментите за съотношение на контраста — WCAG съответствие за достъпен дизайн.
  • Преобразуване на цветове за FigmaПолучете точни HEX и RGB стойности за вставляне в Figma цветовите подбори и дизайнерските системи на жетоните.

Как работи

Цялата логика на преобразуване е ръчно написан JavaScript, работещ изцяло във вашия браузър — без библиотека, без обръщение към сървър. Инструментът анализира вашия вход, го насочва през верига от чисти математически функции и едновременно произвежда единадесет изходни формата, включително модерните CSS Color 4 пространства oklch() и lab().

  1. 1
    Гъвкав анализ на входа
    Персонализиран анализатор приема шестнадесетично (3, 4, 6 или 8 цифри), rgb()/rgba(), hsl()/hsla() както в стар синтаксис със запетаи, така и в модерен синтаксис с интервали, и голи числови триплети. Стойностите за прозрачност като десетични или проценти се нормализират до диапазона 0–1, преди да започне каквото и да е преобразуване.
  2. 2
    RGB като център на преобразуването
    Всеки приет формат първо се разрешава до канонична RGB тройка. От това единично представяне инструментът се разклонява: HSL и HSV използват стандартните формули мин/макс/цветност; CMYK се извежда чрез намиране на ключовия канал; а линеаризацията на sRGB (частичната гама крива, дефинирана в IEC 61966-2-1) се прилага преди изчисленията в перцептуалното пространство.
  3. 3
    Перцептуални цветови пространства, изчислени от нулата
    oklch() се изчислява чрез референтните 3×3 матрици на Björn Ottosson (кубично коренно пространство LMS). lab() и lch() използват Bradford хроматична адаптация за преобразуване от бялата точка D65 към D50, което съответства на начина, по който CSS Color 4 дефинира lab(). Това са същите формули, използвани в рендериращите двигатели на браузърите — тук реализирани без каквато и да е външна зависимост.
  4. 4
    Контраст по WCAG и скала на светлина
    Относителната яркост се изчислява по формулата на WCAG 2.1 (линеаризирани R, G, B, претеглени 0.2126/0.7152/0.0722), а коефициентът на контраст спрямо бяло и черно се оценява като AA-едър, AA, AAA или неуспешен. Лента с девет стъпки на светлина се генерира чрез стъпване на канала за светлина на HSL от 10% до 90%, позволявайки ви да кликнете произволна плочка, за да преобразувате този нюанс.

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

🎨

Избор на цвят и генератор на палитра

Избирайте цветове, конвертирайте между HEX/RGB/HSL и генерирайте хармонични палитри.

Опитайте
🎨

Генератор на случайни цветове

Генерирайте случайни цветове по един или като палитра от пет, заключвайте харесаните, копирайте стойности HEX, RGB или HSL и експортирайте палитрата като PNG или CSS.

Опитайте
🎨

Генератор на цветни палитри

Генерирайте допълващи, аналогични, триадни и монохроматични цветни палитри от всеки основен цвят. Копирайте hex кодовете с едно кликване.

Опитайте

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