RGB uz HSL konvertētājs

Kā RGB krāsu modelis atšķiras no HSL?

RGB (sarkans, zaļš, zils) ir krāsu modelis, kas tieši atbilst tam, kā darbojas displeji – monitori, telefoni, projektori. Katrs pikselis sastāv no trim maziem gaismas avotiem: sarkana, zaļa un zila. To intensitāte tiek izteikta veselos skaitļos no 0 līdz 255. Ja visi trīs ir 255, iegūst baltu; ja visi ir 0 – melnu. Šī ir aditīvā krāsu jaukšana – jo vairāk gaismas, jo gaišāks tonis.

HSL (hue, saturation, lightness – tonis, piesātinājums, gaišums) savukārt ir modelis, kas veidots atbilstoši cilvēka uztverei. Tone tiek attēlots kā leņķis uz krāsu apļa (0–360°): 0° ir sarkans, 120° zaļš, 240° zils utt. Piesātinājums procentos (0–100%) norāda, cik tīra ir krāsa – 0% ir pelēks tonis, 100% ir pilnīgi piesātināts. Gaišums procentos (0–100%) parāda, cik gaiša vai tumša šķiet krāsa: 0% ir melns, 100% balts.

Galvenā atšķirība: RGB kanāli ir cieši saistīti – mainot vienu, bieži vien mainās arī vizuālais tonis. HSL ļauj mainīt gaišumu, nemainot toni. Tas padara HSL par daudz piemērotāku izvēli krāsu paletēm, tēmām un piekļūstamības kontrasta variantiem, jo jūs varat kontrolēt gaišumu neatkarīgi. Šī lapa ir īpaši izstrādāta, lai pārvērstu displejam raksturīgos RGB skaitļus šajā cilvēkam saprotamākajā formā.

Ko šī lapa piedāvā?

Ievadot trīs RGB skaitļus (0–255), piemēram, 79, 70, 229, uzreiz tiek parādīts ekvivalents HSL formātā: tonis 243°, piesātinājums 75%, gaišums 59%. Turklāt tiek automātiski aprēķinātas arī citas bieži izmantotas krāsu reprezentācijas:

• HEX – sešu simbolu heksadecimālā vērtība (piem., #4F46E5).
• HSV – tonis, piesātinājums, vērtība (bieži izmanto grafiskajā dizainā).
• CMYK – ciāns, fuksīns, dzeltens, melns (uz ekrāna balstīts aptuvens aprēķins, nav piemērots profesionālai drukai bez pārbaudes).
• LAB – CIE L*a*b* krāsu telpa, kas ir vairāk perceptuāli vienmērīga.

Katru no šiem laukiem var rediģēt – piemēram, ievadīt HSL vērtību, un rīks to automātiski pārvērsīs atpakaļ uz RGB un pārējiem formātiem. Viss aprēķins notiek jūsu pārlūkprogrammā; nekas netiek augšupielādēts vai saglabāts serverī.

Kā tiek veikta konversija no RGB uz HSL?

Lai gan šis rīks aprēķinus veic automātiski, ir vērts saprast matemātiku aiz tā. Process sastāv no trim soļiem:

1. Normalizācija – katra RGB vērtība tiek dalīta ar 255, lai iegūtu skaitļus intervālā. Piemēram, 79, 70, 229 kļūst par 0.310, 0.275, 0.898.

2. Min un max noteikšana – no normalizētajām vērtībām atrod mazāko (min) un lielāko (max). Gaišumu (L) aprēķina kā (max + min) / 2. Ja max un min ir vienādi, krāsa ir pelēka (piesātinājums = 0%, tonis nav definēts).

3. Tonis (H) un piesātinājums (S):

   • Piesātinājumu nosaka pēc formulas:
     • Ja L <= 0.5, tad S = (max - min) / (max + min)
     • Ja L > 0.5, tad S = (max - min) / (2 - max - min)
   • Tonis atkarīgs no tā, kurš kanāls ir maksimālais:
     • Ja max ir sarkanais: H = 60° * (0 + (zaļais - zilais) / (max - min))
     • Ja max ir zaļais: H = 60° * (2 + (zilais - sarkanais) / (max - min))
     • Ja max ir zilais: H = 60° * (4 + (sarkanais - zaļais) / (max - min))
   • Ja H iznāk negatīvs, pieskaita 360°.

Piemēram, ar minētajām vērtībām (0.310, 0.275, 0.898) max = 0.898 no zilā kanāla, min = 0.275 (zaļais). L = (0.898 + 0.275)/2 = 0.5865 (jeb 59%). Tā kā L > 0.5, S = (0.898 - 0.275) / (2 - 0.898 - 0.275) = 0.623 / 0.827 ≈ 0.753 (75%). H aprēķins: 60 * (4 + (0.310 - 0.275) / (0.898 - 0.275)) = 60 * (4 + 0.035/0.623) = 60 * 4.056 ≈ 243.4°.

Šīs formulas ir standarta sRGB – visplašāk izmantotajā krāsu telpā tīmeklī un displejos. Lai gan aprēķins ir precīzs, atcerieties, ka HSL joprojām nav perceptuāli vienmērīgs: piemēram, dzeltens un zils ar vienādu gaišumu (50%) šķiet atšķirīgi spilgti – tas ir saistīts ar cilvēka acs nejutīgumu pret zilu gaismu.

Kāpēc HSL ir noderīgs dizainā un tīmekļa izstrādē?

Krāsu palešu veidošana – ar HSL ir viegli ģenerēt viena toņa variantus: vienkārši mainiet gaišumu (piem., par 10% soli), lai iegūtu gaišāku vai tumšāku toni, nezaudējot sākotnējo nokrāsu. RGB šāda manipulācija ir daudz sarežģītāka – jums būtu jāmaina proporcionāli visi trīs kanāli, kas bieži noved pie negaidīta toņa nobīdes.

Tēmu pārslēgšana – daudzās mūsdienu lietotnēs ir gaišais un tumšais režīms. Ar HSL varat saglabāt vienu un to pašu piesātinājumu un toni, bet samazināt gaišumu par 20% (piemēram, fona krāsai), tādējādi saglabājot vizuālo identitāti.

Piekļūstamība (WCAG) – lai nodrošinātu pietiekamu kontrasta attiecību starp tekstu un fonu, bieži ir jāpielāgo gaišums. HSL ļauj to izdarīt, nemainot toni, kas ir svarīgi zīmola krāsām. Piemēram, ja zīmola zilā krāsa ir pārāk tumša uz melna fona, varat palielināt gaišumu, saglabājot toni 240°.

CSS atbalsts – mūsdienu CSS ir funkcijas hsl() un hsla(), kas ļauj norādīt krāsas tieši HSL formātā. Piemērs: background-color: hsl(243, 75%, 59%); ir daudz lasāmāks nekā #4F46E5, un to ir vieglāk modificēt ar JavaScript. Piemēram, lai padarītu krāsu par 10% gaišāku, vienkārši mainiet trešo argumentu: hsl(243, 75%, 69%).

Ierobežojumi un robežgadījumi

Lai gan rīks ir vienkāršs, ir svarīgi zināt tā robežas:

• Nederīga ievade – ja RGB vērtības nav trīs veseli skaitļi diapazonā 0–255, atdalīti ar komatiem vai atstarpēm, parādās kļūdas ziņojums: “Ievadiet RGB kā trīs skaitļus 0–255, piemēram, 79, 70, 229.” Līdzīgi, HSL ievadei: “Ievadiet HSL kā toni 0–360 ar diviem procentiem, piemēram, 243, 75 %, 59 %.”

• CMYK kā aptuvens aprēķins – CMYK kanāli ir atkarīgi no drukas iekārtas un papīra. Šis rīks izmanto vienkāršotu matemātisku konversiju, kas der tikai ekrāna priekšskatījumam. Nekad nepaļaujieties uz to bez ICC profilu pārbaudes.

• LAB un CMYK ārpus RGB gammas – dažas krāsas, kas definētas LAB vai CMYK, neeksistē sRGB telpā. Rīks tās pielāgo tuvākajam displejā attēlojamajam tonim. Pārvēršot atpakaļ, var rasties nelielas nobīdes.

• Perceptuālā vienmērība – kā jau minēts, HSL nav ideāls. Ja nepieciešams vizuāli vienmērīgs gradients (piemēram, secīgai krāsu skālai datu vizualizācijā), labāk izmantot LAB vai HCL (tone-chroma-lightness).

Kam šis rīks ir paredzēts?

• UI/UX dizaineri – lai izveidotu piekļūstamas krāsu paletes, kur gaišums tiek regulēts neatkarīgi no toņa.
• Front-end izstrādātāji – pārveidojot dizaina sistēmas krāsas no RGB (piemēram, no Figma vai Sketch) uz CSS hsl() funkcijām.
• Tēmu veidotāji – ģenerējot gaišus un tumšus variantus zīmola krāsām, saglabājot to pašu toni.
• Datu vizualizācijas dizaineri – HSL gaišuma kanāls ir intuitīvs secīgām krāsu skālām, taču jāapzinās tā ierobežojumi.

Biežāk uzdotie jautājumi (FAQ)

Kā pareizi ievadīt RGB vērtības? Ievadiet trīs veselus skaitļus no 0 līdz 255, atdalītus ar komatiem vai atstarpēm. Piemēram: 79, 70, 229 vai 79 70 229. Ja ievadīsiet kaut ko citu, rīks parādīs kļūdas paziņojumu.

Vai es varu ievadīt HSL vērtību, lai iegūtu RGB? Jā, tieši tāpat. Ievadiet toni (0–360), piesātinājumu un gaišumu procentos. Piemērs: 243, 75%, 59%. Rīks uzreiz parādīs atbilstošo RGB, HEX un citus formātus.

Kāpēc CMYK vērtības ir tikai aptuvens aprēķins? CMYK ir atkarīgs no konkrētas drukas iekārtas, tintes un papīra. Šeit izmantotā konversija ir vienkāršota un neatbilst reāliem ICC profiliem. Izmantojiet to tikai ekrāna priekšskatījumam; profesionālai drukai pārbaudiet ar atbilstošu profilēšanas rīku.

Ko nozīmē, ja LAB vai CMYK vērtība ir ārpus RGB gammas? Tas nozīmē, ka šī krāsa nav attēlojama tipiskā datora monitorā. Rīks to pielāgo tuvākajam iespējamajam tonim. Pārvēršot atpakaļ, jūs iegūsiet nedaudz citu krāsu.

Vai šis rīks darbojas bez interneta savienojuma? Jā, viss kods darbojas jūsu pārlūkprogrammā. Pēc lapas ielādes nav nepieciešama tīkla savienojuma, lai veiktu konversijas. Nekas netiek nosūtīts uz serveri.

Kāpēc dažām krāsām HSL un HSV vērtības atšķiras? HSV (tonis, piesātinājums, vērtība) izmanto citu gaišuma definīciju – vērtība ir maksimālā no RGB komponentēm. HSL gaišums ir vidējā vērtība starp min un max. Tādēļ tām pašām RGB vērtībām HSL un HSV parasti atšķiras (izņemot melno un balto).