Mae HSL yn disgrifio lliw mewn ffordd y mae pobl yn ei drafod: pa hue, pa mor liwgar, pa mor disglair. Mae troi cod HEX i HSL yn y ffordd gyflymaf i gael lliw mewn ffurf y gallwch ei addasu — ei oleuo, ei ddadlacio, neu greu graddfa gyfan ohono.
Sut mae trosi HEX i HSL yn gweithio
- Trosi'r cod HEX i RGB a rhannu pob sianel â 255, fel bod y tri rhwng 0 a 1.
- Darganfyddwch y mwyaf a'r lleiaf o'r tri gwerth. Mae eu cyfartaledd yn ysgafnder L.
- Mae'r gwahaniaeth rhyngddynt yn penderfynu'r sianeg S: rhannwch ef â (2 − max − min) ar gyfer lliwiau golau, neu â (max + min) ar gyfer lliwiau tywyll.
- Mae'r sianel gyda'r gwerth uchaf yn penderfynu'r hue H — coch ar 0°, gwyrdd ar 120°, glas ar 240° — a gosodir y hue yng nghanol y sector gan y ddwy sianel arall.
Enghraifft wedi gweithio
Mae'r fathemateg yn union, ond fel arfer caiff gwerthoedd HSL eu hamgylchynu i raddau cyflawn a chanrannau. Felly, gall troi yn ôl ddod â chi un neu ddau gam RGB i ffwrdd o'r gwreiddiol — anweledig mewn practis, ond yn ddefnyddiol gwybod os ydych yn troi lliwiau yn aml.
HEX a HSL wedi'u hamlygu
Beth yw HEX?
Mae cod HEX yn rif hecsadegol chwe digid sy'n storio'r sianel coch, gwyrdd a glas o liw ar ôl arwydd #. Mae pob par o ddigidau yn cynrychioli un sianel, o 00 (dim) i FF (llawn), gan roi'r un 16.7 miliwn o liwiau â RGB mewn nodiad llawer byrrach. Mae HEX yn ddiofyn mewn CSS, offer dylunio a chanllawiau brand.
- Sintacs:
- #RRGGBB
- Amrediad:
- 00–FF fesul sianel
- Gorau ar gyfer:
- CSS, trosglwyddo dylunio, canllawiau brand
Beth yw HSL?
Mae HSL yn rhannu lliw yn hue (0–360° ar olwyn lliw), saturation (pa mor lliwgar, 0–100%) a lightness (pa mor ddisglair, 0–100%). Gan fod pob rhan yn cyfateb i'r ffordd mae pobl yn disgrifio lliw, mae HSL yn y fformat hawsaf ar gyfer creu tints, shades a phaletau cyson — â llaw neu mewn cod.
- Sintacs:
- hsl(H, S%, L%)
- Amrediad:
- 0–360°, 0–100%, 0–100%
- Gorau ar gyfer:
- paletau, tints a shades, theming
tabl cyfeirnod HEX i HSL
Y lliwiau CSS mwyaf cyffredin, wedi'u trosi o HEX i HSL.
| Lliw | HEX | HSL |
|---|---|---|
| black | #000000 | hsl(0, 0%, 0%) |
| white | #FFFFFF | hsl(0, 0%, 100%) |
| red | #FF0000 | hsl(0, 100%, 50%) |
| lime | #00FF00 | hsl(120, 100%, 50%) |
| blue | #0000FF | hsl(240, 100%, 50%) |
| yellow | #FFFF00 | hsl(60, 100%, 50%) |
| orange | #FFA500 | hsl(39, 100%, 50%) |
| teal | #008080 | hsl(180, 100%, 25%) |
| purple | #800080 | hsl(300, 100%, 25%) |
| gray | #808080 | hsl(0, 0%, 50%) |