HSL uz RGB konvertētājs

Kas šī lapa dara un kāpēc tā ir atšķirīga?

Šī lapa ļauj ievadīt krāsu, kas izteikta HSL formātā — nokrāsu (hue) grādos 0–360, kā arī piesātinājumu (saturation) un gaišumu (lightness) procentos — un uzreiz parāda atbilstošas RGB vērtības (0–255). Tas ir tiešs ceļš no cilvēka loģikai tuvāka krāsu modeļa uz precīziem skaitļiem, kādus monitors izmanto gaismas izstarošanai.

Atšķirība no citiem rīkiem: HSL modelis ir veidots cilvēka domāšanai par krāsām. Mainot gaišumu HSL, nokrāsa paliek neskarta — to nevar izdarīt ar RGB. Tāpēc dizaineri un izstrādātāji izmanto HSL, kad veido krāsu paletes vai motīvus; šajā modelī ir dabiski saprotams, ka, piemēram, “gaišāks sarkanais” joprojām ir sarkans, nevis maina toni. RGB savukārt ir darba telpa visai krāsu matemātikai ekrānā: jebkura ekrāna pikselis sastāv no trim skaitļiem — sarkanā, zaļā un zilā kanāla intensitātes.

Konversija starp HSL un RGB ir pilnīgi bez zaudējumiem. Katrs derīgs HSL triplets atbilst tieši vienam RGB tripletam displeja diapazonā. Atšķirībā no pārveidojumiem no LAB vai CMYK uz RGB, šeit nav “ārpuses” — nav tādu krāsu, kas RGB telpā neietilptu. Tāpēc, pārvēršot atpakaļ no RGB uz HSL, jūs iegūsit tieši to pašu sākotnējo vērtību. Nav arī nekādas nobīdes vai izgriešanas (clipping), kāda var rasties, pārveidojot no plašāka krāsu gammas uz šaurāku.

Viss aprēķins notiek jūsu pārlūkprogrammā; neviens ievadītais skaitlis netiek augšupielādēts. Tas ir svarīgi privātumam un ātrumam — rezultāts parādās uzreiz, bez tīkla kavēšanās.

HSL un RGB: kāpēc pāreja ir nepieciešama

Lai saprastu, kāpēc šī lapa eksistē, jāatzīmē atšķirība starp abiem modeļiem. HSL (Hue, Saturation, Lightness) ir cilvēkam draudzīgs krāsu apraksts: nokrāsa nosaka krāsas veidu (sarkans, zaļš, zils utt.), piesātinājums — cik tā ir “tīra” (0% pilnīgi pelēka, 100% pilnīgi piesātināta), gaišums — cik tā ir spilgta (0% melna, 100% balta). Šo modeli ieviesa 1970. gados, lai padarītu krāsu izvēli intuitīvāku nekā RGB.

RGB (Red, Green, Blue) ir aditīvs modelis: krāsa veidojas, sajaucot trīs gaismas starus. Katra kanāla vērtība ir no 0 līdz 255, kas atbilst 8 bitu intensitātei. Monitors izmanto RGB tieši — jebkurš ekrāna pikselis sastāv no trim gaismas avotiem. Tāpēc, ja dizaina rīks darbojas HSL telpā, bet kods prasa RGB, ir nepieciešama konversija.

Praktiskā problēma: daudzi dizaineri strādā ar HSL slīdņiem, bet, rakstot CSS, bieži tiek lietota RGB vai hex formāts (piemēram, #4F46E5). Šī lapa novērš roku darbu — ievadot HSL, uzreiz redz RGB un citus ekvivalentus.

Kā darbojas konversija (tehnisks fons, bet bez liekas matemātikas)

Lai gan lietotājam nav jāzina aprēķina detaļas, ir vērts saprast pamatprincipu. HSL–RGB konversija balstās uz krāsu apli un lineāru interpolāciju starp sešām krāsu sekcijām. Hue vērtību sadala 60° segmentos, kas atbilst pamatkrāsām: 0° sarkans, 60° dzeltens, 120° zaļš, 180° ciāns, 240° zils, 300° fuksīns. Katra segmenta iekšienē RGB vērtības mainās lineāri, piesātinājuma un gaišuma līmeni pielāgojot.

Piesātinājums nosaka, cik tālu no pelēkā toņa atrodas krāsa: ja piesātinājums ir 0%, jebkurš hue dod pelēku toni, kas atkarīgs tikai no gaišuma. Ja piesātinājums ir 100%, krāsa ir maksimāli tīra. Gaišums nosaka, cik daudz baltas vai melnas tiek piejaukts.

Rezultātā iegūstam trīs RGB vērtības, kuras var pārveidot arī uz HEX — tas ir tikai cits veids, kā uzrakstīt tos pašus skaitļus (piemēram, 79, 70, 229 decimāli atbilst #4F46E5 heksadecimāli).

Ir svarīgi zināt, ka šī konversija ir noteikta standarta (sRGB) ietvaros. Jebkura atbilstība starp HSL un RGB ir viennozīmīga, ja vien HSL vērtības ir diapazonā un ir pareizā formātā. Tāpēc šī lapa var garantēt, ka nekādu krāsu nobīdi nebūs — atšķirībā, piemēram, no pārveidojumiem starp RGB un CMYK, kur ir vajadzīga profila interpretācija.

Ievadi un izvadi: ko lietotājs saņem

Ievadi: lietotājs ievada HSL vērtību, kas sastāv no trim daļām:

• Hue: vesels skaitlis no 0 līdz 360 (grādi)
• Piesātinājums: procents (piemēram, 75%)
• Gaišums: procents (piemēram, 59%)

Piemērs: 243, 75%, 59% — tas ir violets tonis.

Izvadi — visi lauki tiek atjaunināti uzreiz:

• HEX — 6 zīmju heksadecimāls kods ar # zīmi
• RGB — trīs skaitļi 0–255, piemēram, 79, 70, 229
• HSL — atkārtoti parāda ievadīto vērtību (var rediģēt)
• HSV — Hue, Saturation, Value (vērtība)
• CMYK — Ciāns, Magenta, Dzeltens, Melns (aptuvens)
• LAB — CIE Lab* krāsu telpa

Visi izvadi ir dinamiski — mainot HSL lauku, pārējie automātiski pārrēķinās. Tas ļauj eksperimentēt ar dažādiem toņiem un uzreiz redzēt, kā tie izskatās citās reprezentācijās.

Tabulā var apkopot katra formāta lietojumu:

Svarīga piezīme par CMYK: šeit redzamais CMYK ir tikai aprēķināts tuvinājums, kas paredzēts ekrāna skatam. Īstā drukāšanā izmantotās CMYK vērtības ir atkarīgas no papīra, tintes un printera profila. Tāpēc neizmantojiet šīs vērtības tieši profesionālai drukai bez korekcijas.

Robežgadījumi un kļūdu apstrāde

Lapa apstrādā kļūdainu ievadi. Ja HSL laukā tiek ievadīts kaut kas, ko nevar interpretēt kā derīgu HSL tripletu (piemēram, trūkst procentu zīmes, vai skaitļi ir ārpus diapazona), tiek parādīts šāds ziņojums:

“Enter HSL as hue 0–360 with two percentages, like 243, 75%, 59%.”

Citiem vārdiem, lapa pieprasa, lai ievade būtu precīzā formātā: viens skaitlis, kam seko divi procenti, atdalīti ar komatiem. Piemēram, “180, 50%, 50%” ir pareizi; “180, 50, 50” nav (trūkst %), “180°, 50%, 50%” arī tiks atpazīts? Faktiski izstrādātāji bieži lieto grādu simbolu, bet šī lapa to var neuztvert. Tāpēc ieteicams rakstīt tikai skaitļus un procentus bez vienību apzīmējumiem.

Citas robežas:

• Hue vērtība 360 ir derīga un atbilst sarkanam (tāpat kā 0).
• Saturation un Lightness var būt 0% vai 100%, tās ir derīgas.
• Ja gaišums ir 0%, jebkura hue dod melnu (RGB 0,0,0); ja 100% — baltu (255,255,255).
• Ja piesātinājums ir 0%, rezultāts ir pelēks, un hue zaudē nozīmi (bet joprojām derīgs).

Šīs ir matemātiskas īpašības, nevis kļūdas. Lapa tās pareizi apstrādā.

Kam šī lapa ir noderīga

• Dizaineri, kas veido krāsu paletes vai motīvus un kuriem nepieciešams RGB, lai kodētu CSS vai JavaScript. HSL ir ērtāk manipulēt ar krāsām, bet beigu rezultātam vajag RGB.
• Front-end izstrādātāji, kas pārnes krāsas no dizaina rīka (piemēram, Figma vai Sketch, kas bieži izmanto HSL) uz CSS kodu. Tā vietā, lai aprēķinātu ar roku, viņi var vienkārši ielīmēt HSL vērtību un saņemt RGB.
• Ikviens, kas dod priekšroku domāt par krāsām cilvēka draudzīgos terminos (nokrāsa, piesātinājums, gaišums) un kam nepieciešami precīzi ekrāna skaitļi. Piemēram, veidojot gradientus, ir daudz vieglāk strādāt ar HSL, mainot tikai gaišumu, nekā mēģināt to pašu panākt RGB.

Papildu lietojums: studenti, kas mācās krāsu teoriju, var pārbaudīt, kā viena un tā pati krāsa izskatās dažādos modeļos. Arī testētāji, kas pārbauda krāsu pieejamību — var ātri iegūt RGB, lai aprēķinātu kontrasta attiecību.

Biežāk uzdotie jautājumi (FAQ)

1. Vai konversija starp HSL un RGB ir pilnīgi precīza? Jā, tā ir bez zaudējumiem. Katram derīgam HSL tripletam ir tieši viens RGB triplets sRGB telpā. Pārvēršot atpakaļ, iegūsiet sākotnējo HSL.

2. Kāpēc CMYK vērtības šeit ir tikai aptuvenas? Tāpēc, ka īstā CMYK drukā ir atkarīga no printera, papīra un krāsu profila. Šajā rīkā tiek izmantots vispārējs matemātisks tuvinājums, kas nav piemērots profesionālai drukai bez korekcijas.

3. Kā ievadīt HSL, ja mans rīks rāda “HSL(243°, 75%, 59%)”? Ievadiet tikai skaitļus un procentus: 243, 75%, 59%. Grādu simbols un iekavas nav vajadzīgas. Ja ievadīsiet ar tām, lapa var neatzīt formātu.

4. Vai rīks darbojas bez interneta? Jā, visi aprēķini notiek pārlūkprogrammā. Pirmā lapa jāielādē, bet pēc tam tā darbojas pat bezsaistē (ja vien pārlūks neatsvaidzinās).

5. Kā pārvērst RGB atpakaļ uz HSL? Šī lapa automātiski parāda HSL vērtību, kad ievadāt HSL, bet tā nav paredzēta RGB–HSL konversijai. Jums jāizmanto cits šīs vietnes rīks.

6. Kas notiek, ja piesātinājums ir 100% un gaišums 50%? Tā ir tīrākā iespējamā krāsa konkrētajam hue. Piemēram, 0, 100%, 50% dod spilgti sarkanu (RGB 255,0,0). Tas ir vienīgais punkts, kur piesātinājums un gaišums rada maksimāli tīru krāsu bez baltā vai melnā piejaukuma.