Innéasann RGB do scáileán cé mhéad solais le scaoileadh; insíonn HSL duit conas a fheictear an dath i ndáiríre. Déanann an tiontú ar na trí chainéal go hue, saturation agus lightness an dath éasca le coigeartú de láimh.
Conas a oibríonn an t-athrú RGB go HSL
- Roinn R, G agus B faoi 255 ionas go bhfuil gach luach idir 0 agus 1.
- Tóg an uasmhéid agus an íosmhéid den trí — is é a meán an éadromas L.
- Mura bhfuil an uasmhéid agus an íosmhéid comhionann, is liath an dath: tá hue agus saturation araon 0.
- Murach sin, bain amach S ón scaradh idir uasmhéid agus íosmhéid, agus léigh H ón gcainéal a bhfuil an uasmhéid ann.
Sampla oibre
Beacht i gcoincheap. Mar gheall go gcuirtear H, S agus L de ghnáth i láthair mar uimhreacha iomlána cuartha, d’fhéadfadh athchur ar ais céim amháin nó dhó a athrú ar chainéal.
RGB agus HSL mínithe
Cad é RGB?
Léiríonn RGB dath mar thrí chainéal solais — dearg, glas agus gorm — gach ceann ó 0 go 255. Is léiríonn sé conas a oibríonn scáileáin i ndáiríre: má tá na trí cinn ag 255 bíonn bán, má tá siad go léir ag 0 bíonn dubh. Is é RGB an rogha ceart nuair is gá duit ríomh a dhéanamh le dath — animéadú chainéil, meascadh i gcód, nó trédhearcacht le rgba().
- Sintéis:
- rgb(R, G, B)
- Raon:
- 0–255 in aghaidh na canála
- An-oiriúnach do:
- cód, canbhás, trédhearcacht le rgba()
Cad é HSL?
Roinníonn HSL dath ina hue (0–360° ar roth dathanna), sáithiú (cé chomh dathúil, 0–100%) agus solúbthacht/nó soilsiú (cé chomh geal, 0–100%). Ós rud é go n-oireann gach cuid don tslí a chuireann daoine tuairim ar dath, is í HSL an fhormáid is éasca le tints, shades agus paláistí comhsheasmhacha a thógáil — de láimh nó i gcód.
- Sintéis:
- hsl(H, S%, L%)
- Raon:
- 0–360°, 0–100%, 0–100%
- An-oiriúnach do:
- paláistí, tints agus shades, téamáil
Tábla tagartha RGB go HSL
Na dathanna CSS is coitianta, tógtha ó RGB go 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%) |