Kā darbojas HEX krāsu kodi?
HEX jeb heksadecimālā krāsu kodēšana ir viena no visplašāk lietotajām metodēm tīmeklī un dizaina rīkos. Tā tieši attēlo sarkano, zaļo un zilo kanālu skaitliskās vērtības bāzē–16. Pilna sešciparu HEX forma, piemēram, #4f46e5, sadalās trīs pa diviem cipariem: 4f (sarkanais), 46 (zaļais), e5 (zilais). Katra pāra decimālā vērtība ir no 0 līdz 255 — tātad kopā 16,7 miljoni iespējamo krāsu. Trīsciparu saīsinājums, piemēram, #abc, tiek automātiski izvērsts, dublējot katru ciparu: #aabbcc. Šī kompaktā notācija darbojas tikai tad, ja katrs kanāls sastāv no diviem identiskiem cipariem.
HEX kods nenes nekādu caurspīdīguma informāciju — tas vienmēr apzīmē pilnīgi necaurspīdīgu krāsu. Tāpēc arī pārveidošana uz HSL (hue, saturation, lightness) notiek bez alfa kanāla. Šis rīks akceptē gan sešciparu, gan trīsciparu HEX, ar vai bez sākuma # rakstzīmes. Ja ievaddati neatbilst šiem nosacījumiem, tiek parādīts kļūdas ziņojums: “Ievadiet heksadecimālo krāsu, piemēram, #4f46e5 vai #abc.”
HSL – cilvēkam saprotamāka krāsu sistēma
HSL apzīmē Hue (toņkārta), Saturation (piesātinājums) un Lightness (gaismotne). Tā ir izstrādāta, lai krāsas būtu intuitīvāk pielāgojamas nekā ar neapstrādātu RGB paleti.
- Hue (nokrāsa) mēra grādos uz krāsu apļa no 0 līdz 360. 0° ir sarkans, 120° zaļš, 240° zils. Šī vērtība atbilst cilvēka vizuālajai uztverei — mēs domājam par krāsu kā par “sarkanīgu” vai “zilganu”, nevis kā par trīs skaitļu kopu.
- Saturation (piesātinājums) izsaka procentos no 0% (pelēks) līdz 100% (pilnīgi tīra nokrāsa). Tas norāda, cik intensīva ir krāsa – pavisam blāva vai spilgta.
- Lightness (gaismotne) arī procentos: 0% vienmēr ir melns, 100% vienmēr balts, bet 50% ir “tīrā” nokrāsa. Šī ir vienīgā vērtība, kuru mainot, var viegli padarīt krāsu tumšāku vai gaišāku, saglabājot to pašu nokrāsu un piesātinājumu.
Tieši šī īpašība padara HSL par ideālu izvēli krāsu paletēm, motīvu sistēmām un pieejamības pārbaudēm. Piemēram, lai izveidotu tumšu režīmu, var vienkārši samazināt Lightness vērtību, neaiztiekot Hue. Ar HEX vai RGB tas būtu daudz apgrūtinošāk, jo būtu jāpārrēķina visi trīs kanāli.
Kas atšķir šo HEX–HSL pārveidotāju?
Šī lapa ir vairāk nekā vienkāršs formātu pārveidotājs. Tā uzreiz parāda krāsu visos atbalstītajos formātos: HEX, RGB, HSV, CMYK un LAB. Rediģējot HEX kodu, visi lauki atjaunojas vienlaikus. Tas ļauj nokopēt krāsu tieši tādā formātā, kāds nepieciešams — vai nu CSS lietošanai, vai tipogrāfijas vajadzībām, vai cilvēka uztverei draudzīgā HSL.
Atšķirībā no daudziem tīmekļa rīkiem, visi aprēķini notiek jūsu pārlūkprogrammā. Neviens ievadītais HEX kods netiek augšupielādēts vai saglabāts. Tas ir svarīgi, ja strādājat ar konfidenciāliem dizaina projektiem vai sensitīvu zīmola identitāti.
Rīks apstrādā tikai necaurspīdīgas krāsas. Ja jums nepieciešama alfa caurspīdīgums, HEX (sešciparu vai trīsciparu) šo informāciju tāpat nesatur. Tāpēc HSL izvade vienmēr būs ar Lightness vērtību, kas atbilst 100% necaurspīdīgumam.
Pārveidošanas process: no HEX uz RGB uz HSL
Lai iegūtu HSL no HEX, vispirms HEX jāpārvērš RGB decimālās vērtībās. Piemēram, #4f46e5:
- Sarkanais:
4f(heksadecimāli) = 79 (decimāli) - Zaļais:
46= 70 - Zilais:
e5= 229
Tālāk šīs RGB vērtības normalizē uz diapazonu (dala ar 255). Tad aprēķina:
- Lightness: (max + min) / 2
- Saturation: ja max == min, tad 0%; citādi (delta / (1 - |2*Lightness - 1|) ) * 100%
- Hue: atkarībā no tā, kurš kanāls ir max. Formula: ja R ir max: ( (G - B) / delta ) mod 6; ja G ir max: ( (B - R) / delta ) + 2; ja B ir max: ( (R - G) / delta ) + 4. Tad rezultātu reizina ar 60, lai iegūtu grādus.
Piemērā #4f46e5 (RGB 79,70,229) iegūstam:
- Max = 229 (zilais), min = 70
- Delta = 159
- Lightness = (229+70)/2 = 149.5 -> procentos: (149.5/255)*100 ≈ 58.6%
- Saturation = (159 / (1 - |2*0.586 - 1|) ) / 255? Precīzs aprēķins dod ~74.5%
- Hue = ( (70-79)/159 + 4 ) * 60 ≈ 240° (zils).
Šis matemātiskais modelis ir standarta CSS specifikācijā aprakstītais RGB–HSL pārveidojums. Rīks to veic acumirklīgi, bez servera starpniecības.
Robežgadījumi un svarīgas piezīmes
Rīks pieņem tikai derīgus HEX kodus. Ja ievadīsiet kaut ko citu — burtus ārpus A–F, nepareizu ciparu skaitu vai simbolus — parādīsies kļūdas ziņojums. Piemēram, #GGG vai #12345 netiks apstrādāti.
Ja pārslēdzaties uz citu krāsu telpu, piemēram, LAB vai CMYK, un ievadāt vērtības, kas ir ārpus redzamā RGB diapazona (gamuta), krāsa tiek koriģēta uz tuvāko attēlojamo krāsu. Šī korekcija var radīt nelielu nobīdi, ja šo krāsu atkal pārveidos atpakaļ uz HEX.
CMYK vērtības ir aptuvenas. Tās tiek aprēķinātas uz ekrāna, balstoties uz RGB->CMYK algoritmu, kas ir atkarīgs no profila. Profesionālajai drukai šīs vērtības nebūtu jāizmanto bez atsevišķas kalibrēšanas.
Nav alfa kanāla. HEX kodi un HSL (kā definēts CSS) neietver caurspīdīgumu. Ja vajag caurspīdīgu krāsu, jāizmanto atsevišķs alfa kanāls, piemēram, rgba() vai hsla() CSS.
Kam šis rīks noderēs?
- Frontend izstrādātājiem, kas raksta CSS un vēlas pārvērst HEX krāsu no dizaina maketa uz HSL, lai viegli pielāgotu gaismotni hover stāvokļiem vai motīvu variantiem.
- UI/UX dizaineriem, kuri domā toņkārtā, piesātinājumā un gaismotnē, bet saņem zīmola krāsu HEX formātā. Ar HSL viņi var ātri izveidot harmoniskas krāsu shēmas.
- Ikvienam, kas veido krāsu paletes – HSL vienkāršo komplementāro, analogo vai monohromatisko shēmu ģenerēšanu, mainot tikai Hue vai Saturation.
- Tīmekļa pieejamības auditoriem, kam jāpārbauda kontrasta attiecības pret WCAG standartiem. HSL ir vieglāk saprast, kā mainīt Lightness, lai panāktu pietiekamu kontrastu.
Bieži uzdotie jautājumi
Vai trīsciparu HEX (piemēram, #abc) tiek atbalstīts?
Jā. Trīsciparu apzīmējums tiek automātiski izvērsts uz sešciparu, dublējot katru ciparu. #abc kļūst par #aabbcc. Tāpat darbojas arī bez # rakstzīmes.
Kāpēc HSL tiek uzskatīta par intuitīvāku nekā HEX? HEX ir tikai divciparu pāri sarkanam, zaļam un zilam. Lai mainītu krāsas gaismotni, jāredz, kā mainīt visus trīs kanālus vienlaicīgi. HSL atdala nokrāsu (cilvēkam svarīgāko) no piesātinājuma un gaismotnes, tāpēc ir daudz vienkāršāk radīt variācijas, saglabājot to pašu krāsu.
Vai dati tiek augšupielādēti uz serveri? Nē. Visi aprēķini notiek jūsu pārlūkprogrammā. Nekas, ko ievadāt, netiek nosūtīts vai glabāts.
Kāpēc CMYK vērtības ir tikai aptuvenas? CMYK ir atkarīgs no drukas profila, papīra, tintes un iekārtas. Šis rīks izmanto vienkāršotu RGB→CMYK pārveidojumu, kas paredzēts tikai orientējošai apskatei. Lai izmantotu CMYK profesionālā drukā, nepieciešama atsevišķa kalibrēšana.
Kas notiek, ja ievadu nederīgu HEX kodu? Tiks parādīts kļūdas ziņojums: “Ievadiet heksadecimālo krāsu, piemēram, #4f46e5 vai #abc.” Tikai derīgi heksadecimālie kodi ar sešiem vai trim cipariem tiks apstrādāti.
Vai HSL un HSV ir viens un tas pats? Nē. Abas sistēmas izmanto Hue, bet otrais komponents atšķiras: HSV izmanto Saturation un Value (brightness), bet HSL izmanto Saturation un Lightness. Lightness ir viduspunkts starp melnu un baltu, savukārt Value ir maksimālā kanāla vērtība. Tas nozīmē, ka tā pati nokrāsa HSV un HSL izskatās atšķirīgi. Šis rīks pārveido tikai uz HSL.