Is e HSL an dòigh nas càirdeile airson dath a thaghadh, agus is e RGB an rud a bhios scrionaichean, APIs canvas agus còd ìomhaigh a’ cleachdadh gu dìreach. Bidh an inneal-atharrachaidh seo a’ tionndadh gin de na triùir hue, saturation agus lightness gu seanalan 0–255 ceart.
Mar a tha tionndadh HSL gu RGB ag obair
- Thionndaidh S agus L gu fràmaichean agus cunnaic an chroma C = (1 − |2L − 1|) × S.
- Roinn an hue le 60 gus a roinn air cuairtean nan dathan a lorg agus cunnaic an luach eadar-mheadhanach X = C × (1 − |(H/60 mod 2) − 1|).
- Cuir C, X agus 0 anns na slotan R, G agus B a rèir na roinne sin.
- Cuir an offset lightness L − C/2 ris na trì seanalan uile agus iomadaich le 255.
Eisimpleir obrach
Tha an toradh ceart gu math faisg suas gu crìoch an cuairteachaidh mu dheireadh gu seanalan slàn. Tha luachan hue no saturation de phàirteachadh air an toirt taic agus thèid iad dìreach chun triple RGB as fhaisge.
HSL agus RGB air an mìneachadh
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
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()
Clàr iomraidh HSL gu RGB
Na dathan CSS as cumanta, tionndaichte bho HSL gu RGB.
| Dath | HSL | RGB |
|---|---|---|
| black | hsl(0, 0%, 0%) | rgb(0, 0, 0) |
| white | hsl(0, 0%, 100%) | rgb(255, 255, 255) |
| red | hsl(0, 100%, 50%) | rgb(255, 0, 0) |
| lime | hsl(120, 100%, 50%) | rgb(0, 255, 0) |
| blue | hsl(240, 100%, 50%) | rgb(0, 0, 255) |
| yellow | hsl(60, 100%, 50%) | rgb(255, 255, 0) |
| orange | hsl(39, 100%, 50%) | rgb(255, 166, 0) |
| teal | hsl(180, 100%, 25%) | rgb(0, 127, 128) |
| purple | hsl(300, 100%, 25%) | rgb(128, 0, 127) |
| gray | hsl(0, 0%, 50%) | rgb(128, 128, 128) |