Beddelaha RGB to HSL

U beddel RGB una beddel HSL intaad wax qorayso — bilaash, degdeg ah, oo leh tusaale shaqaynaya iyo shaxda midabada caanka ah.

Tusaale shaqaynaya

RGB 255, 87, 51 = HSL 11, 100%, 60%

Sida uu beddelku u shaqeeyo

  • HSL wuxuu ku sifeeyaa isku mid midabka midabka (hue) (0–360° ee giraanta midabka), dheregta (saturation) iyo iftiinka (lightness) — waxtar u leh madoobaynta ama ka saarista dheregta midabka adoo beddelaya hal qayb oo keliya.

Midabada caanka ah ee RGB iyo HSL

MidabkaRGBHSL
Cas255, 0, 00, 100%, 50%
Ooransho255, 165, 039, 100%, 50%
Jaalle255, 255, 060, 100%, 50%
Cagaar0, 128, 0120, 100%, 25%
Cyan0, 255, 255180, 100%, 50%
Bulsho0, 0, 255240, 100%, 50%
Boqorad (Purple)128, 0, 128300, 100%, 25%
Pink255, 192, 203350, 100%, 88%
Bunni165, 42, 420, 59%, 41%
Caddaan255, 255, 2550, 0%, 100%
Dambas128, 128, 1280, 0%, 50%
Madow0, 0, 00, 0%, 0%

Beddelid kasta waxay ku dhex socotaa biraawsarkaaga. Waxba oo aad geliso looma soo gudbiyo BroBroGo.

Su'aalaha badanaa la isweydiiyo (FAQ)

Sideen RGB ugu beddelaa HSL?

Ku qor ama ku dheji qiimahaaga RGB xagga sare — qiimaha HSL wuxuu cusboonaysiigoobayaa intaad wax qorayso. Waxaad sidoo kale midabka ku dooran kartaa muuqaal ahaan adigoo isticmaalaya swatch-ka.

Beddelku ma yahay mid sax ah?

Qiyamka waxaa lagu soo koobay tiro dhan, qaabka ay filayaan aaladaha CSS iyo naqshadaynta. Farqiga wuxuu aad uga hooseeyaa wax kasta oo ishu arki karto.

Waxa boggani sameeyo

Boggani wuxuu kuu ogolaanayaa inaad geliso midab RGB oo ah seddex lambar oo u dhexeeya 0 ilaa 255, kuwaas oo matalaya sida shaashadu ugu darto iftiinka casaanka (Red), cagaarka (Green), iyo buluuga (Blue). Markaad geliso, isla markiiba waxaad arkeysaa midabkaas u dhigma ee qaabka HSL, halkaas oo hue lagu cabbiro darajo (0–360), saturation iyo lightness ay yihiin boqolleeyo. Intaas waxaa dheer, qalabku wuxuu soo saaraa qaabab kale oo midabka loo beddelo sida HEX, HSV, CMYK, iyo LAB. Tani waxay kaa caawinaysaa inaad nuqul ka sameysato qiimaha midabka aad u baahan tahay mashaariicdaada, ha ahaato CSS, design, ama falanqaynta xogta.

Dhammaan beddeladaasi waxay ku dhacaan browser-kaaga gudihiisa – waxaad gasho lama soo diri server-ka, sidaa darteed xogtaadii waa qarsoodi.

Maxaa boggan ka duway?

Inta badan qalabka midabka ee khadka tooska ah waxay u kala beddelaan qaabab kala duwan, laakiin boggani wuxuu diiradda saarayaa beddelka u dhexeeya RGB (qaabka shaashadda) iyo HSL (qaabka fahamka aadanaha). Sababta tan loo sameeyay waxay tahay in RGB, marka aad beddesho hal qaybood (tusaale ahaan midabka casaanka), ay inta badan is beddesho midabka guud (hue) iyo iftiinkiisa labadaba. Taas beddelkeeda, HSL waxay u kala saartaa sifooyinka midabka si gooni gooni ah: hue waa jihada midabka ee wareega, saturation waa saxnimadiisa, lightness waa iftiinkiisa. Marka aad beddesho lightness, hue kuma dhawaado inuu is beddelo. Tani waxay ka dhigaysaa HSL mid ku habboon samaynta palettes-ka midabka, mowduucyada (themes), iyo isbeddelada iftiinka loogu talagalay helitaanka (accessibility) sida shuruudaha WCAG.

Qalabkani wuxuu ku tusayaa qaabka HSL si aad u fudud, isagoo sidoo kale ku siinaya qiimayaasha kale ee midabka si aad uga dooran karto midda mashaariicdaada ku habboon.

Sida loo isticmaalo: gelinta iyo soo saarista

Gelinta: Waa inaad ku qortaa midabka RGB sida saddex tiro oo kala go'an (0–255), kuna kala tag comma ama bar. Tusaale: 79, 70, 229. Haddii aad geliso qaab aan sax ahayn, waxaad arki doontaa farriin qalad ah:

"Enter RGB as three numbers 0–255, like 79, 70, 229."

Sidoo kale, waxaad gelin kartaa qiimaha HSL si toos ah (tusaale 243, 75%, 59%) si aad u hesho u dhigma RGB. Haddii HSL khalad yahay, farriintani way soo bixi doontaa:

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

Soo saarista: Markaad geliso midab kasta, dhammaan goobaha (HSL, HEX, HSV, CMYK, LAB) isla markiiba way cusboonaadaan. Waxaad nuqul ka qaadan kartaa mid kasta oo ka mid ah.

  • HSL: hue (0–360), saturation (0%–100%), lightness (0%–100%)
  • HEX: #4F46E5
  • HSV: hue, saturation, value
  • CMYK: qiyaas lagu soo saaray oo loogu talagalay shaashadda (ha isticmaalin daabacaad xirfadeed iyadoon la hubin)
  • LAB: CIE Lab* – qaabka midabka ee u dhiganta aragtida aadanaha

Haddii aad geliso LAB ama CMYK oo ay ka baxdo xadka midabka la arki karo (gamut), qalabku wuxuu ku dhawaanayaa midabka ugu dhow ee shaashadda soo bandhigi karto. Haddii aad dib ugu beddesho midabkaas, wuxuu laga yaabaa inuu yara iska beddelo.

Xeerarka iyo xaaladaha gaarka ah

  • Keliya tiro 0–255: Cadaan yahay, lambarada RGB waa inay ahaadaan kumeelgaar ah 0 ilaa 255. Mid kasta oo ka baxsan, qaladka ayaa soo bixi doona.
  • Qaabka gelinta RGB: Waa inay ku kala tagaan comma ama bar. "79 70 229" sidoo kale waa la aqbali karaa.
  • Qaabka gelinta HSL: Hue waa 0–360, saturation iyo lightness waa boqolleeyo. "243, 75%, 59%" waa tusaale sax ah.
  • CMYK waa qiyaas shaashadeed: Qalabkani wuxuu ku saleysan yahay sRGB, marka CMYK-ga la soo saaro waa qiyaas lagu beddelay iyadoo la adeegsanayo qaabka caadiga ah (e.g., tirooyinka daabacaadda si rasmi ah looma isticmaali karo iyadoon la hubin).
  • LAB/CMYK oo ka baxsan gamut: Haddii aad geliso qiime LAB ama CMYK oo aan u dhigmin midab la arki karo, qalabku wuxuu qasbaya inuu ku soo celiyo gamut-ka sRGB, taasoo keeni karta isbeddel yar marka dib loo beddelo.

Faa'iidooyinka HSL marka loo eego RGB

1. Samaynta palettes-ka midabka
Marka aad rabto inaad abuurto noocyo kala duwan oo midab isku mid ah (tints, shades, tones), HSL waxay kuu ogolaanaysaa inaad si fudud u badasho lightness ama saturation adigoo hue-ga sugaya. Tusaale: midabka buluuga ah ee 243°, 75%, 59% waxaad ka dhigi kartaa iftiin badan (lightness: 80%) ama mugdi badan (lightness: 20%) iyadoo midabku (hue) uu isku mid yahay. RGB waxay u baahan tahay xisaab dheeraad ah si loo ilaaliyo hadhka midabka.

2. Helitaanka (Accessibility) iyo WCAG
Shuruudaha WCAG waxay u baahan yihiin in midabada la isticmaalo ay leeyihiin kala duwanaansho iftiin ku filan (contrast ratio). HSL waxay kuu ogolaaneysaa inaad hagaajiso lightness si aad u hesho saamiga loo baahan yahay, adigoo aan wax ka beddelin midabka asaasiga ah. Tani waxay muhiim u tahay naqshadeeyayaasha UI/UX iyo horumariyayaasha webka.

3. CSS iyo horumarinta webka
CSS waxay leedahay shaqooyin hsl() iyo hsla() kuwaas oo aad u fudud in lagu dhex shaqeeyo JavaScript. Tusaale: color: hsl(243, 75%, 59%). Haddii aad rabto inaad iftiimiso midabka marka la guro, waxaad kaliya beddeli kartaa boqolleyda lightness.

4. Naqshadaynta xogta (data visualization)
Mararka qaarkood, midabyada u kala horreeya (sequential color scales) waxay u baahan yihiin kala duwanaansho iftiin oo joogto ah. HSL lightness channel waa mid dareen ahaan u dhow qaabka aadanaha uu u kala saaro iftiinka, marka waxay faa'iido u leedahay samaynta jaantusyada.

Xisaabta ka dambeysa beddelka RGB ilaa HSL

In kasta oo qalabku xisaabta ku sameeyo si otomaatig ah, waxtar leh in la fahmo sida ay u shaqeyso.

Talaabooyinka:

  1. Dhigista qiimaha RGB ilaa 0–1:
    R' = R/255, G' = G/255, B' = B/255

  2. Helitaanka midabka ugu weyn iyo ugu yar:
    max = max(R', G', B')
    min = min(R', G', B')

  3. Xisaabinta chroma (kala duwanaanshaha ugu weyn iyo ugu yar):
    chroma = max - min

  4. Xisaabinta hue (H):
    Haddii chroma = 0, hue waa 0. Haddii kale:

    • Haddii max = R': H = ((G' - B') / chroma) mod 6
    • Haddii max = G': H = ((B' - R') / chroma) + 2
    • Haddii max = B': H = ((R' - G') / chroma) + 4
      Kadibna H = H * 60 (si loo beddelo darajo). Haddii H < 0, ku dar 360.
  5. Xisaabinta lightness (L):
    L = (max + min) / 2

  6. Xisaabinta saturation (S):
    Haddii chroma = 0, S = 0. Haddii kale:
    S = chroma / (1 - |2L - 1|)
    Kadibna S = S * 100 (boqolley ahaan).

Tusaale: RGB (79, 70, 229) oo ah buluug madow. Max = 229/255 ≈ 0.898, min = 70/255 ≈ 0.275. Chroma = 0.623. Max waa B', marka hue = ((0.310 - 0.275)/0.623) + 4 = 4.056, 60 = 243.4°. L = (0.898+0.275)/2 = 0.5865 (≈58.6%). S = 0.623/(1 - |20.5865-1|) = 0.623/(1-0.173) ≈ 0.753 → 75.3%. Qiimaha ugu dhow waa hsl(243°, 75%, 59%).

Cabbiraadaha iyo xaddidaadyada

1. HSL ma aha mid dareen ahaan siman (perceptually uniform).
Dareen ahaan, midabada kala duwan ee isku lightness leh (tusaale: huruud iyo buluug) waxay u ekaan karaan kuwa iftiin kala duwan. Tani waa sababta qaababka sida LAB (CIE Lab*) loo sameeyay si ay u noqdaan kuwa u dhigma sida aadanuhu u arko. Qalabkani waxa uu soo saaraa sidoo kale LAB si aad uga shaqaysato midabada si sax ah.

2. Gamut-ka midabka shaashadda.
RGB iyo HSL labaduba waxay ku saleysan yihiin sRGB, oo ah booska midabka ee shaashadaha caadiga ah. Marka aad ka shaqeyneyso LAB ama CMYK, waxaa laga yaabaa inaad soo marto midabada ka baxsan sRGB. Qalabku wuxuu ku dhawaanayaa midabka ugu dhow, laakiin ma aha mid sax ah.

3. Isticmaalka CMYK ee daabacaadda.
Sida lagu xusay, CMYK-ga la soo saaro waa qiyaas lagu helay beddelka sRGB, oo aan loo talagelin daabacaad xirfadeed iyadoon la hubin midabyada dhabta ah ee daabacaha.

4. Haddii aad isticmaasho HSL si aad u abuurto palettes, fiiri soo jeedinta qaabka OKLCH.
Qaababka cusub ee CSS-ka sida OKLCH ayaa ka fiican HSL marka la eego dareenka aadanaha, laakiin HSL wali waa mid ballaaran oo la fahmi karo.

FAQ (Su'aalo inta badan la weydiiyo)

1. Su'aal: Waa maxay sababta aan u isticmaalo HSL halkii RGB?
Jawaab: HSL waxay kuu ogolaaneysaa inaad si gooni gooni ah u hagaajiso jihada midabka, saxnimadiisa, iyo iftiinkiisa. Tani waxay ka fudud tahay marka la sameynayo noocyo kala duwan oo midab isku mid ah (tusaale, iftiin iyo mugdi) ama marka la rabo in la ilaaliyo midabka asaasiga ah inta lightness la beddelayo.

2. Su'aal: Ma waxaa la i soo diri jiray xogta aan geliyo?
Jawaab: Maya. Dhammaan xisaabintu waxay ku dhacdaa browser-kaaga gudihiisa. Waxaad gasho lama soo dirin server-ka, marka xogtaadu waa badbaado.

3. Su'aal: Maxaa dhacaya haddii aan geliyo midab LAB oo ka baxsan gamut-ka sRGB?
Jawaab: Qalabku wuxuu isku dayaa inuu soo celiyo midabka ugu dhow ee la arki karo. Tani waxay keeni kartaa isbeddel yar markaad dib ugu beddesho HSL ama RGB. Marka la soo celiyo, qiimaha HSL ayaa laga yaabaa inuu ka duwanaado midka la filayo.

4. Su'aal: Waa maxay qaabka ugu fiican ee loogu talagalay CSS: HSL ama HEX?
Jawaab: Labaduba way shaqeeyaan. HSL ayaa laga yaabaa inay fududahay marka aad rabto inaad hagaajiso iftiinka ama saturation-ka iyada oo JavaScript. HEX waa mid gaaban oo la isticmaalo inta badan.

5. Su'aal: Ma waxaan u isticmaali karaa natiijada CMYK daabacaad xirfadeed?
Jawaab: Ma aha talo wanaagsan. Qalabku wuxuu soo saaraa qiyaas ku saleysan sRGB, taasoo aan la mid ahayn qaabka daabacaha dhabta ah. Waa inaad tijaabisaa midabada daabacahaaga iyadoo la adeegsanayo nidaamka midabka ee xarunta daabacaadda.

6. Su'aal: Maxaa farqiga u dhexeeya HSV iyo HSL?
Jawaab: HSV (Hue, Saturation, Value) waxay u dhowdahay HSL, laakiin "value" waxay ka dhigan tahay iftiinka ugu weyn ee midabka (max ee RGB), halka "lightness" ay tahay celceliska iftiinka. HSV waxaa inta badan loo isticmaalaa farshaxanka dhijitaalka ah, halka HSL ay ku badan tahay CSS iyo naqshadaynta webka.