HSL‑to‑HEX pārveidotājs: krāsu modeļu sasaiste vienā klikšķī
Kas ir HSL‑to‑HEX pārveidotājs?
Šis rīks ir specializēts tīmekļa rīks, kas jebkurai HSL krāsai (Hue jeb tonis grādos 0–360, Saturation jeb piesātinājums procentos 0–100%, Lightness jeb gaišums procentos 0–100%) acumirklī atrod tās ekvivalentu sešciparu (vai trīsciparu saīsinājumā) heksadecimālo kodu. Piemēram, ievadot 243, 75%, 59%, lapa uzreiz parāda #4f46e5. Bez tam tiek atjaunināti arī RGB, HSV, CMYK un LAB lauki, lai lietotājs iegūtu pilnu krāsas profilu.
Atšķirībā no vispārējiem krāsu pārveidotājiem šī lapa ir veltīta tikai HSL‑to‑HEX ceļam. HSL modelis ir izstrādāts cilvēka domāšanas ērtībai – izmainot tikai gaišumu, tonis paliek nemainīgs, tāpēc HSL ir ideāls paletēm un tēmu ģenerēšanai. HEX ir sešciparu (vai trīsciparu saīsinājuma) RGB apzīmējums; tam nav alfa kanāla astoņciparu formas bez. Pārveidošana ir tieša un bez zudumiem sRGB diapazonā, atšķirībā no pārveidošanas, kas ietver LAB vai CMYK, kur var notikt ārpusgammas krāsu pielāgošana.
Kāpēc šī lapa atšķiras?
Daudzi tiešsaistes rīki piedāvā krāsu pārveidošanu, bet bieži vien tie ir universāli pārveidotāji ar desmitiem ievades lauku. Šeit uzsvars ir uz HSL‑to‑HEX turp un atpakaļ – tas ir biežākais uzdevums, ar ko saskaras dizaineri un izstrādātāji, kas strādā ar paletēm. HSL var uzskatīt par “cilvēcisko” krāsu modeli: mainot gaišumu, var viegli iegūt gaišāku vai tumšāku toņa variantu, nezaudējot niansi. Turpretī HEX ir mašīnu lasāms formāts, kuru prasa CSS, JavaScript un dizaina rīki.
Pāreja no HSL uz HEX ir praktiski vienkārša: vispirms HSL tiek pārveidots par RGB (izmantojot standarta matemātiku), pēc tam RGB vērtības tiek pārveidotas par hexadecimāliem cipariem. Šī rīka vērtība ir momentānā atgriezeniskā saite un iespēja redzēt, kā HSL maiņa ietekmē HEX kodu, neizmantojot papildu programmatūras.
Ievades un izvades: ko sagaidīt
Ievade ir trīs parametri:
- Hue (H) – skaitlis no 0 līdz 360, kas apzīmē krāsas toni uz krāsu apļa.
- Saturation (S) – procentu vērtība no 0% līdz 100%, kas nosaka krāsas intensitāti.
- Lightness (L) – procentu vērtība no 0% līdz 100%, kas nosaka, cik gaiša vai tumša ir krāsa. Piemēram:
243, 75%, 59%.
Izvade ir:
- HEX kods (sešciparu, piemēram,
#4f46e5). Ja katra RGB kanāla vērtību iespējams attēlot ar vienu hex ciparu (t.i., abi cipari ir vienādi, piemēram,#aabbcc), rīks var parādīt arī trīsciparu saīsinājumu (#abc). - Visi pārējie lauki (RGB, HSV, CMYK, LAB) tiek atjaunināti vienlaicīgi, ļaujot redzēt pilnu krāsu modeli.
Svarīgi! Visi aprēķini notiek tieši lietotāja pārlūkprogrammā – nekas netiek augšupielādēts serverī. Tāpēc dati ir pilnībā privāti.
Noteikumi un robežgadījumi
Lai rīks strādātu pareizi, jāievēro ievades formāts:
- Hue jābūt starp 0 un 360.
- Saturation un Lightness jāizsaka procentos, iekļaujot zīmi
%. - Parametri jāatdala ar komatu.
Ja vērtības ir ārpus derīgā diapazona vai formāts nav pareizs, lapa parāda skaidru kļūdas ziņojumu:
“Enter HSL as hue 0–360 with two percentages, like 243, 75%, 59%.” (latviski: “Ievadiet HSL kā toni 0–360 ar diviem procentiem, piemēram, 243, 75%, 59%.”)
Biežākā kļūda – aizmirst procentu zīmi. Bez tās saturācija un gaišums tiek interpretēti kā nederīgi. Tāpat jāuzmanās no liekiem simboliem vai atstarpēm.
Pāreja no HSL uz HEX vienmēr paliek redzamā RGB diapazonā; šai konkrētajai pārveidei nav nepieciešama ārpusgammas krāsu korekcija. Savukārt CMYK izvads (kas tiek rādīts blakus) ir tikai aptuvens aprēķins uz ekrāna – tas var atšķirties no profesionālas drukas vērtībām, jo CMYK atkarīgs no drukas profila.
Kam šis rīks noder?
Dizaineriem, kuri veido krāsu paletes HSL formātā un vēlas ātri iegūt HEX kodus, lai tos izmantotu koda vidēs vai prototipēšanas rīkos (Figma, Sketch). Piemēram, izstrādājot projekta vizuālo tēmu, bieži ērtāk strādāt ar HSL – mainīt tikai gaišumu, lai iegūtu variantus –, bet gala failā nepieciešami HEX kodi.
Frontend izstrādātājiem, kuri no dizaina specifikācijām saņem HSL vērtības (piemēram, “eksportēt no Figmas” sniedz HSL) un tās jāpārvērš CSS rekvizītos, kas prasa HEX vai RGB. Šis rīks ļauj ātri pārbaudīt, vai dizainā izmantotā krāsa koda vidē izskatās tāpat.
Ikvienam, kas pielāgo pieejamības kontrasta attiecības, mainot gaišumu HSL, un pēc tam pārvērš rezultātu HEX vērtībā ražošanai. Piemēram, lai nodrošinātu WCAG (Web Content Accessibility Guidelines) kontrasta prasības, var palielināt Lightness tumšai krāsai vai samazināt gaišu krāsu, bet gala kodā jābūt HEX.
Praktiski lietošanas piemēri un padomi
Praktiskākā situācija: jums ir krāsu palete HSL formātā, piemēram, krāsu aplis ar 12 krāsām. Katrai krāsai vēlaties iegūt gaišu variantu (lightness 80%) un tumšu variantu (lightness 20%). Izmantojot šo rīku, jūs ātri pārvēršat katru HSL vērtību HEX, saglabājot konsekventu nokrāsu.
Varat arī pārbaudīt, vai divas krāsas ir pietiekami atšķiramas. Ja jums ir fona krāsa HSL(0, 0%, 90%) (gandrīz balta) un teksta krāsa (0, 0%, 20%) (tumši pelēka), šis rīks uzreiz parādīs to HEX kodus (piemēram, #e6e6e6 un #333333). Kontrasta attiecību var aprēķināt, izmantojot šos skaitļus.
Rīks ir īpaši noderīgs, ja strādājat ar tēmām, kurās lietotājs var izvēlēties akcentkrāsu. Dizaina sistēmas bieži definē pamatkrāsu HSL, pēc tam ģenerē no tās variācijas, izmainot tikai Lightness. Šo variāciju HEX kodus iegūt ir vienkārši ar šo rīku.
Biežāk uzdotie jautājumi
1. Kāpēc mans HEX kods nesākas ar #?
Rīks vienmēr parāda HEX ar # priekšā. Ja neredzat, pārbaudiet, vai ievades formāts ir pareizs – bez chyba.
2. Vai var izmantot astoņciparu HEX (ar alfa kanālu)?
Šis rīks pārvērš tikai pilnībā necaurspīdīgas krāsas. Astoņciparu HEX (piem., #4f46e580) netiek ģenerēts; alfa kanāls HSL nav iekļauts. Ja nepieciešams caurspīdīgums, pēc pārveidošanas varat pievienot alfa vērtību CSS: rgba() vai hsla() formā.
3. Kāpēc CMYK vērtības atšķiras no drukas?
CMYK vērtības, ko rāda šis rīks, ir aptuvens aprēķins, izmantojot vispārējās konversijas formulas. Profesionālai drukai jāliota precīzi profili (ICC profili atbilstoši printerim un papīram). Šis rīks ir paredzēts priekšskatīšanai tīmekļa dizainā.
4. Ko darīt, ja ievadīju 243, 75, 59 bez % zīmes?
Rīks to atpazīs kā kļūdu un parādīs paziņojumu. Vienmēr jāraksta 243, 75%, 59% – saturācijai un gaišumam jāiekļauj procentu zīme. Bez tās vērtības tiek uzskatītas par nederīgām.
5. Vai šis rīks darbojas arī pārlūkā bez interneta savienojuma?
Nē – lapa ir jāielādē reizē ar interneta savienojumu. Kad lapa ir ielādēta, visi aprēķini tiek veikti lokāli, un pēc tam varat turpināt darbu bezsaistē, ja vien atsvaidzināt lapu.
6. Kāpēc trīsciparu HEX (piem., #abc) neparādās vienmēr?
Trīsciparu saīsinājumam ir nepieciešams, lai katrs kanāls (sarkans, zaļš, zils) būtu attēlojams ar atkārtotu ciparu, piem., #22aa44 var saīsināt uz #2a4. Ja kāds kanāls neatbilst šim nosacījumam, rīks parāda tikai sešciparu formu.