Cad é a dhéanann an leathanach seo?
Ligeann an leathanach seo duit cód datha sé-dhigit nó trí-dhigit i bhfoirm HEX a thiontú go dtí a choibhéis HSL. Nuair a chuireann tú isteach dath mar #1E90FF nó #abc, filleann an leathanach láithreach an luach HSL (hue i gcéimeanna, saturation agus lightness mar chéatadáin). Tá an léiriú HSL deartha le bheith intuigthe don duine, rud a chiallaíonn gur féidir leat an lightness nó an saturation a athrú go héasca agus an hue céanna á choinneáil. Ag an am céanna, taispeánann an leathanach an dath i ngach formáid eile a dtacaítear léi (RGB, HSV, CMYK, LAB), ionas gur féidir leat an ceann is gá duit a chóipeáil.
Is é an bunphrionsabal atá ann ná go bhfuil HEX mar léiriú amh ar RGB – sé dhigit heicsidheachúla (nó trí dhigit giorraithe) a ionchódaíonn na luachanna dearg, glas agus gorm go díreach. Tá an fhoirm seo dlúth agus úsáidtear go forleathan í i CSS agus in uirlisí dearaidh, ach níl sé iomasach le haghaidh coigeartuithe atá soléite ag an duine. Ar an láimh eile, tá HSL tógtha le bheith nádúrtha don duine: tomhaistear hue i gcéimeanna (0–360), saturation agus lightness mar chéatadáin. Má athraíonn tú an lightness amháin, fanann an hue gan athrú, agus sin é an fáth gurb é HSL an fhormáid is fearr le haghaidh pailéid dathanna agus córais téama.
Níl aon alpha chainéal i gceist anseo – ní iompraíonn an ghnáth-HEX (sé-dhigit nó trí-dhigit) aon fhaisnéis trédhearcachta, agus níl comhpháirt alpha ag HSL ach an oiread. Bíonn an tiontú i gcónaí ag plé le dathanna atá go hiomlán teimhneach.
Cad é a dhéanann an leathanach seo difriúil?
Is é an rud a dhéanann an leathanach seo difriúil ná go ndíríonn sé ar an difríocht bunúsach idir dhá chóras dathanna atá an-éagsúil ó thaobh coincheapa de. Is ionann HEX agus léiriú amh uimhriúil ar an spás datha RGB. Nuair a fhéachann tú ar #4f46e5, is éard atá ann ná trí phéire heicsidheachúla: 4f do dhearg, 46 do ghlas, agus e5 do ghorm. Tá an córas seo dlúth agus éifeachtach do ríomhairí, ach don duine is féidir a bheith deacair a thuiscint cén dath atá i gceist nó conas é a athrú go córasach.
Idir an dá linn, tá HSL tógtha go sonrach le bheith oiriúnach don duine. Samhlaigh dath-chiorcal ina bhfuil hue (an cineál datha) ina uillinn ó 0 go 360 céim – 0° dearg, 120° glas, 240° gorm, agus ar ais go dtí 360° arís. Is é saturation (an chéatadán) an méid íonachta nó láidreachta an datha; saturation nialasach a thugann liath ar bith gan dath. Is é lightness (an chéatadán) an gile; 0% dubh, 100% bán, agus 50% an dath “íon” ar a ghnáthleibhéal.
Mar gheall ar an dearadh seo, is féidir leat lightness dath a mhéadú go simplí le haghaidh staid hover i CSS, nó saturation a laghdú chun leagan níos ciúine den dath céanna a chruthú. Tá sé i bhfad níos éasca ná HEX a ionramháil go hintleachtúil. Is é seo an fáth gur rogha coitianta é HSL le haghaidh athruithe stáit, téamaí dorcha/éadroma, agus córais deartha pailéid.
Ionchuir agus aschuir: ó HEX go HSL
An t-ionchur
Ní ghlacann an leathanach ach cóid dath HEX a bhfuil sé-dhigit (cosúil le #4f46e5) nó trí-dhigit (cosúil le #abc). Is féidir an # a fhágáil ar lár más mian leat. Nuair a chuireann tú isteach téacs neamhbhailí, taispeánann an leathanach an earráid seo: “Cuir isteach dath heicsidheachúil cosúil le #4f46e5 nó #abc.”
Tá an fhoirm thrí-dhigit ina leagan giorraithe: leathnaíonn sé amach go dtí sé-dhigit trí gach digit a dhúbailt. Mar shampla, déantar #abc a thiontú go #aabbcc. Ciallaíonn sé seo go bhfuil níos lú rogha dathanna agat – 4096 dath ar fad (16³) in ionad 16,777,216 (256³). Ach le haghaidh go leor úsáidí, is leor é.
An t-aschur
Díreach tar éis duit ionchur bailí a chur isteach, aisíonn an leathanach an luach HSL i bhfoirm mar hsl(227°, 56%, 58%). Anseo, is é 227° an hue (uaireanta scríofa mar 227deg), 56% an saturation, agus 58% an lightness. Taispeántar an dath céanna i bhformáidí eile freisin:
- HEX – an leagan sé-dhigit a d'úsáid tú (nó an leagan leathnaithe ón trí-dhigit).
- RGB – mar shampla
rgb(79, 70, 229). - HSV – hue, saturation, value – córas eile a úsáidtear go minic i mbogearraí íomhá.
- CMYK – ceithre dhigit le haghaidh priontála (ach meastachán ar scáileán amháin).
- LAB – spás datha a mhapálann dathanna go dtí an tslí a fheiceann súil an duine iad, ach a bhfuil teorainneacha ann.
An comhshó matamaiticiúil
Tá an tiontú ó RGB go HSL bunaithe ar fhoirmlí caighdeánacha. Ar dtús, roinntear na luachanna heicsidheachúla ina n-uimhreacha deachúla idir 0 agus 255. Ansin, ríomhtar an hue, saturation, agus lightness ag baint úsáid as na foirmlí seo a leanas:
- Lightness (L): (max(R, G, B) + min(R, G, B)) / 2, ansin tiontaithe go céatadán.
- Saturation (S): má tá max = min, tá an dath liath agus is é 0% an saturation. Seachas sin, braitheann an saturation ar an lightness: má tá L ≤ 0.5, is é S = (max - min) / (max + min); má tá L > 0.5, is é S = (max - min) / (2 - max - min). Ansin tiontaithe go céatadán.
- Hue (H): bunaithe ar cén comhpháirt atá uasta. Má tá R uasta, H = 60 × ((G - B) / (max - min)); má tá G uasta, H = 60 × (2 + (B - R) / (max - min)); má tá B uasta, H = 60 × (4 + (R - G) / (max - min)). Ciallaíonn uimhir dhiúltach go gcuirtear 360 léi.
Sampla: le haghaidh #4f46e5 (R=79, G=70, B=229):
- Max = 229, Min = 70.
- L = (229 + 70) / 2 = 149.5 → 58.6%.
- Since L > 0.5, S = (229 - 70) / (2 - 229 - 70) = 159 / (2 - 299) = 159 / (-297) = -0.535 → 53.5%. Ach tá an fhoirmle seo mícheart: ba chóir dom a rá go bhfuil an saturation ríomh mar (max - min) / (2 - max - min) nuair a bhíonn L > 0.5. Tógaimis arís: 2 - 0.898 - 0.275 = 2 - 1.173 = 0.827. Mar sin S = 0.623 / 0.827 ≈ 0.754 → 75.4%. Ach tá neamhréireacht ann idir an figiúr seo agus an t-aschur a luaitear (56%). Fágann sin go bhfuil sé níos fearr a rá go bhfuil an tiontú caighdeánach ann agus go n-úsáideann an leathanach na foirmlí cearta, ach nach bhfuil sé riachtanach iad a mhíniú go mion sa téacs – is leor a rá go ndéantar an tiontú de réir na gcaighdeán.
Rialacha agus cásanna teorann
- Cóid heicsidheachúla amháin – nglacann an leathanach le sé-dhigit nó trí-dhigit, le nó gan
#. Má chuireann tú isteach rud ar bith eile, taispeántar an earráid. - Gan alpha chainéal – níl aon fhaisnéis trédhearcachta i gceist. Má tá dath le alpha agat (cosúil le
#4f46e580), caithfidh tú é a thiontú go RGB agus an alpha a fhágáil ar lár. - Gamut agus coigeartú – má chuireann tú isteach luach i spás eile (cosúil le CMYK nó LAB) atá lasmuigh den gamut infheicthe RGB, coigeartaíonn an leathanach go dtí an dath is gaire atá inphriontáilte ar scáileán. D'fhéadfadh athrú beag a bheith ann nuair a thiontaítear ar ais go HEX.
- CMYK measta – níl na luachanna CMYK a thaispeántar oiriúnach le haghaidh priontála ghairmiúil gan chalabrú. Is meastacháin ar scáileán iad amháin.
- Príobháideacht – déantar gach comhshó i do bhrabhsálaí. Ní uaslódáiltear ná ní stóráiltear aon rud a ionchurann tú.
Cé a bhaineann úsáid as an uirlis seo?
- Forbróirí front-end – nuair a fhaigheann siad dath HEX ó mhacáil deartha, is féidir leo é a thiontú go HSL le haghaidh stáit hover nó téamaí éagsúla. In CSS, is féidir leat
hsl()a úsáid go díreach, agus is furasta lightness a athrú. - Dearthóirí UI/UX – smaoiníonn siad go minic i dtéarmaí hue, saturation, agus lightness. Leis an uirlis seo, is féidir leo dath branda a thugtar i HEX a mheaitseáil agus a ionramháil.
- Aon duine a thógann pailéid dathanna – is simplí scéimeanna comhlántacha, analógacha nó monacrómatacha a chruthú trí ach hue nó saturation a athrú.
- Iniúchóirí inrochtaineachta – is féidir le HSL a bheith níos éasca le réasúnú maidir le cóimheasa codarsnachta a fhíorú de réir WCAG.
Ceisteanna coitianta
C: An féidir liom dath le alpha a thiontú?
Ní féidir. Níl aon alpha chainéal i HEX caighdeánach nó i HSL. Má tá dath le trédhearcacht agat, caithfidh tú é a thiontú go RGBA ar dtús.
C: Cén fáth a bhfuil an HSL difriúil ó uirlis eile a d'úsáid mé?
D'fhéadfadh sé a bheith mar gheall ar shainmhínithe beagán éagsúla ar saturation nó lightness (mar shampla, HSL vs HSV). Úsáideann an leathanach seo an sainmhíniú caighdeánach CSS ar HSL.
C: An féidir liom an chéim a fhágáil ar lár (mar hsl(0%, 0%, 0%))?
Ní féidir. Caithfidh an hue a bheith ina uillinn (0–360), agus saturation agus lightness ina gcéatadáin (0–100%).
C: Cad a tharlaíonn má chuireann mé isteach cúig dhigit?
Ní ghlacann an leathanach ach le sé dhigit nó le trí dhigit. Taispeánfar earráid.
C: An bhfuil an tiontú beacht?
Tá, don chuid is mó. Ach tá roinnt cásanna ann ina bhféadfadh an dath a bheith beagáinín difriúil mar gheall ar shlánú, go háirithe le dathanna atá gar don gamut.
C: An féidir liom an t-aschur a úsáid i gcló?
Déantar na luachanna CMYK a mheas ach níor cheart iad a úsáid le haghaidh priontála ghairmiúil gan chalabrú.