Mae dewis lliw mewn HSL yn cyfleus, ond mae stylesheets, trosglwyddiadau dylunio a dogfennau brand yn dal i redeg ar HEX. Mae'r troswr hwn yn cau'r bwlch ac yn rhoi'r cod chwe-digid ar gyfer unrhyw gyfuniad o hue, saturation a lightness.
Sut mae trosi HSL i HEX yn gweithio
- Trosi saturation a lightness i rhannau: mae 60% yn troi'n 0.6.
- Cyfrifwch y chroma C = (1 − |2L − 1|) × S — dyna pa mor bell y mae'r lliw o lwyd.
- Defnyddiwch y hue i osod y chroma ar y sianeli coch, gwyrdd a glas, yna symudwch y tri yn ôl gan L − C/2.
- Amlygwch bob sianel â 255, amgylchynwch hi, a'i ysgrifennu fel dwy digid hexadegol.
Enghraifft wedi gweithio
Mae amgylchynu yn digwydd unwaith, yn yr olaf gam, pan gaiff pob sianel ei glymu i werth cyfan 0–255. Mae'r canlyniad yn y cod HEX agosaf at eich mewnbwn HSL ac yn fel arfer yn unfath â'r hyn a ddangosir gan offer dylunio.
HSL a HEX wedi'u hamlygu
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
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
tabl cyfeirnod HSL i HEX
Y lliwiau CSS mwyaf cyffredin, wedi'u trosi o HSL i HEX.
| Lliw | 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 |