Канвертар колераў — бясплатна
Канвертуйце колеры паміж фарматамі HEX, RGB, HSL, HSV і CMYK імгненна. Уключае шкалу яркасці і ўзоры колераў.
Канвертуйце колер паміж HEX, RGB, HSL, HSV і CMYK — з жывым прэв'ю і адным датыскам для копіявання. Усё работает ў вашым браўзеры.
Прымае: HEX (#fff або #ffffff), RGB (255, 255, 255), або HSL (360, 100%, 50%)
Контраст WCAG
На белым фоне
2,49:1
На чорным фоне
8,44:1
Шкала яркасці
Клікніце на ўзорак, каб пераключыцца на гэты адценак
Тыповыя выкарыстанні
- Пераўтварыце колеры для веб-дызайнуПацяшцыце HEX, RGB і HSL значаннях для любога колеру — гатовай да прыклею ў CSS ці Tailwind.
- Пераўтварыце колеры для друку (CMYK)Пераўтварыце экран колеры (HEX/RGB) у CMYK значаннях для ўжывання ў дызайну друку і прафесійным друку.
- Пабудуйце паллетры колеру для сістэм дызайнуПераўтварыце брэндавыя колеры па ўсімі фарматамі і сгенеруйце паслядоўныя лёгкасці шкалы для поўнай сістэмы дызайну.
- Праверыце канцатраст коліру для доступнасціПераўтварыце коліры, каб атрымаць RGB значэнні для выкарыстання ў інструментах каэфіцыентаў канцатраста — WCAG адпаведнасць для доступнага дызайна.
- Пераўтварыце коліры для FigmaАтрымайце точныя HEX і RGB значэнні, каб уставіць у аброчкі выбара коліраў Figma і сістэмы дызайн-токанаў.
Як гэта працуе
Уся логіка канвертавання — уласнаручна напісаны JavaScript, які працуе цалкам у вашым браўзеры — без бібліятэкі, без выкліку сервера. Інструмент разбірае ваш увод, накіроўвае яго праз ланцужок чыстых матэматычных функцый і адначасова вырабляе адзінаццаць фарматаў вываду, уключаючы сучасныя прасторы CSS Color 4 oklch() і lab().
- 1Гнуткі разбор уводуУласны разборшчык прымае шаснаццатковы фармат (3, 4, 6 ці 8 лічбаў), rgb()/rgba(), hsl()/hsla() як у спадчынным сінтаксісе з коскамі, так і ў сучасным сінтаксісе з прабеламі, і голыя лічбавыя трыпляты. Значэнні альфа-канала ў выглядзе дзесятковых дробаў ці адсоткаў нармалізуюцца да дыяпазону 0–1 перад пачаткам любога канвертавання.
- 2RGB як цэнтр канвертаванняКожны прыняты фармат спачатку вырашаецца ў кананічны трыплет RGB. З гэтага адзінага прадстаўлення інструмент разыходзіцца: HSL і HSV выкарыстоўваюць стандартныя формулы min/max/хрома; CMYK вывадзіцца шляхам знаходжання ключавога канала; і лінеарызацыя sRGB (кускова-лінейная крывая гама, вызначаная ў IEC 61966-2-1) прымяняецца перад вылічэннямі ў прасторах перцэпцыі.
- 3Перцэптыўныя каляровыя прасторы вылічаны з нуляoklch() вылічваецца з дапамогай эталонных матрыц 3×3 Б'ёрна Отасана (прастора кубічнага кораня LMS). lab() і lch() выкарыстоўваюць храматычную адаптацыю Брэдфарда для пераводу з белай кропкі D65 у D50, што адпавядае таму, як CSS Color 4 вызначае lab(). Гэта тыя ж формулы, што выкарыстоўваюцца ў рухавіках рэндэрынгу браўзераў — рэалізаваныя тут без якой-небудзь знешняй залежнасці.
- 4Кантраст WCAG і шкала яркасціАдносная яркасць вылічваецца згодна з формулай WCAG 2.1 (лінеарызаваныя R, G, B, узважаныя 0.2126/0.7152/0.0722), а каэфіцыент кантрасту з белым і чорным ацэньваецца як AA-large, AA, AAA ці Fail. Дзевяціступенная паласа яркасці стваралася шляхам крокавай змены канала яркасці HSL ад 10% да 90%, дазваляючы вам націснуць любы ўзор, каб канвертаваць гэты адценне.
Звязаныя інструменты
Выбар колеру і генератар палітры
Выбірайце колеры, канвертуйце паміж HEX/RGB/HSL і стварайце гарманічныя палітры.
Генератар выпадковых колераў
Ствараеце выпадковыя колеры па адным або ў выглядзе палітры з пяці, блакуйце патрэбныя, капіруйце значэнні HEX, RGB або HSL і экспартуйце палітру як PNG або CSS.
Генератар каляровай палітры
Генеруйце дадатковыя, аналагічныя, трыядныя і манахраматычныя каляровыя палітры з любога базавага колеру. Капіруйце hex-коды адным кліком.