Tha RGB ag innse don sgrìn cia mheud solas a sgaoil; tha HSL a’ mìneachadh mar a tha an dath a’ coimhead. Tha tionndadh nan trì sianalan gu hue, sàthaichte agus soilleireachd a’ dèanamh dath gu furasta a bhith air a chur an àite le làimh.
Mar a tha tionndadh RGB gu HSL ag obair
- Roinn R, G agus B le 255 gus am bi gach luach eadar 0 agus 1.
- Gabh an luach as motha agus an luach as lugha den triùir — ’s e an cuibheas aca an soilleireachd L.
- Ma tha an luach as motha agus an luach as lugha co-ionann, tha an dath liath: tha hue agus sàthaichte an dà chuid 0.
- Mura h-eil, faigh S bhon sgaoileadh eadar an luach as motha agus as lugha, agus leugh H bho còd nan sianalan a tha as motha.
Eisimpleir obrach
Gu teòiridheach gu ceart. Leis gu bheil H, S agus L mar as trice air an taisbeanadh mar àireamhan slàn chrùinte, faodaidh tionndadh air ais gluasad a thoirt do shianal le aon no dhà cheum.
RGB agus HSL air an mìneachadh
Dè th' ann an RGB?
Tha RGB a’ mìneachadh dath mar thrì sianalan solais — dearg, uaine agus gorm — gach fear bho 0 gu 255. Tha e a’ sgeadachadh mar a bhios scrionaichean ag obrachadh: ma tha na trì uile aig 255 tha geal, ma tha iad uile aig 0 tha dubh. 'S e RGB an roghainn nuair a dh’ fheumas tu obrachadh leis na h-àireamhan, agus tha rgba() a’ cur soilleireachd air a’ mhullach.
- Sintàs:
- rgb(R, G, B)
- Raon:
- 0–255 gach sianal
- As fheàrr airson:
- còd, canvas, soilleireachd le rgba()
Dè th' ann an HSL?
Tha HSL a’ sgaradh dath ann an hue (0–360° air cuibhle dath), saturation (cho dathach, 0–100%) agus lightness (cho soilleir, 0–100%). Leis gu bheil gach pàirt a’ maidseadh mar a bhios daoine a’ mìneachadh dath, 's e HSL an cruth as fhasa airson tints, shades agus pàileatan seasmhach a thogail — le làimh no ann an còd.
- Sintàs:
- hsl(H, S%, L%)
- Raon:
- 0–360°, 0–100%, 0–100%
- As fheàrr airson:
- pàileatan, tints agus shades, cuspairean
Clàr iomraidh RGB gu HSL
Na dathan CSS as cumanta, tionndaichte bho RGB gu HSL.
| Dath | RGB | HSL |
|---|---|---|
| black | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
| white | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| red | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| lime | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| blue | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| yellow | rgb(255, 255, 0) | hsl(60, 100%, 50%) |
| orange | rgb(255, 165, 0) | hsl(39, 100%, 50%) |
| teal | rgb(0, 128, 128) | hsl(180, 100%, 25%) |
| purple | rgb(128, 0, 128) | hsl(300, 100%, 25%) |
| gray | rgb(128, 128, 128) | hsl(0, 0%, 50%) |