Is bealach cairdiúil é HSL chun dath a roghnú; is é RGB atá á ithe ag scáileáin, APIs canvas agus cóid íomhá. Casann an comhroinnt seo aon triúr hue, saturation agus lightness go díreach ina chainéil 0–255.
Conas a oibríonn an t-athrú HSL go RGB
- Athraigh S agus L go fraclánna agus ríomhaidh an chroma C = (1 − |2L − 1|) × S.
- Roinn an hue faoi 60 chun a fhsegment ar roth na dathanna a fháil agus ríomhaidh an luach idirleathach X = C × (1 − |(H/60 mod 2) − 1|).
- Cuir C, X agus 0 sna sliotáin R, G agus B de réir an tsegméind sin.
- Cuir an ais offset lightness L − C/2 leis na trí chainéal go léir agus iolraigh le 255.
Sampla oibre
Tá an toradh beacht go dtí an crónamh deiridh chuig chainéil iomlána. Tacaítear le luachanna hue nó saturation fraclánacha agus tagann siad simplí ar an triúr RGB is cóngaraí.
HSL agus RGB mínithe
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
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()
Tábla tagartha HSL go RGB
Na dathanna CSS is coitianta, tógtha ó HSL go 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) |