Tá sé compordach dath a roghnú i HSL, ach rithíonn stíleanna, seoltaí dearadh agus doiciméid bhranda fós ar HEX. Dúnann an tiontaire seo an bhearna sin agus tugann sé an cód sé-dhigit do aon teaglaim hue, saturation agus lightness.
Conas a oibríonn an t-athrú HSL go HEX
- Déan saturation agus lightness a iompú ina fracs: éiríonn 60% mar 0.6.
- Ríomh an chroma C = (1 − |2L − 1|) × S — seo an fad a bhfuil an dath ón liath.
- Úsáid an hue chun an chroma sin a chur ar na cainéil dearg, glas agus gorm, ansin aistrigh na trí cinn go léir faoi L − C/2.
- Iolraigh gach cainéal faoi 255, cruinnigh é, agus scríobh é mar dhá dhigit heicseashonach.
Sampla oibre
Déantar cruinneas amháin sa chéim dheireanach, nuair a chuirtear gach cainéal ar luach iomlán 0–255. Is é an toradh an cód HEX is gaire don ionchur HSL agus de ghnáth comhionann sé leis an méid a thaispeánann uirlis dhearaidh.
HSL agus HEX 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 é HEX?
Is cód HEX é cód seisear-dháta heicsideach a stórálann na hairíonna dearg, glas agus gorm d’aon dath taobh thiar de # tosaigh. Clúdaíonn gach péire de dhigit amháin chanáil amháin, ón 00 (níl) go dtí FF (iomlán), agus mar sin tugann sé na céadta míle dathanna céanna agus RGB i nóta níos giorra. Is é HEX an réamhshocrú i CSS, uirlisí dearaidh agus treoracha branda.
- Sintéis:
- #RRGGBB
- Raon:
- 00–FF in aghaidh na canála
- An-oiriúnach do:
- CSS, réamhchur dearaidh, treoracha branda
Tábla tagartha HSL go HEX
Na dathanna CSS is coitianta, tógtha ó HSL go HEX.
| Dath | HSL | HEX |
|---|---|---|
| black | hsl(0, 0%, 0%) | #000000 |
| white | hsl(0, 0%, 100%) | #FFFFFF |
| red | hsl(0, 100%, 50%) | #FF0000 |
| lime | hsl(120, 100%, 50%) | #00FF00 |
| blue | hsl(240, 100%, 50%) | #0000FF |
| yellow | hsl(60, 100%, 50%) | #FFFF00 |
| orange | hsl(39, 100%, 50%) | #FFA600 |
| teal | hsl(180, 100%, 25%) | #007F80 |
| purple | hsl(300, 100%, 25%) | #80007F |
| gray | hsl(0, 0%, 50%) | #808080 |