ເລືອກສີໃນ HSL ສະດວກ, ແຕ່ stylesheet, ການສົ່ງມອບອອກແບບ ແລະ ເອກະສານບຣານຍັງໃຊ້ HEX. ຕົວແປນີ້ຈະປິດຊ່ອງນັ້ນແລະໃຫ້ເຈົ້າລະຫັດຫົວໜ່ວຍຫັບຫມາກສົບທີ່ມີຫນີ້ສີ, saturation ແລະ lightness ທຸກກໍລະນີ.
ວິທີແປຈາກ HSL ເປັນ HEX
- ແປ saturation ແລະ lightness ເປັນເປີເຊນ: 60% ຈະກາຍເປັນ 0.6.
- ຄຳນວນ chroma C = (1 − |2L − 1|) × S — ນີ້ແມ່ນລະຫວ່າງວ່າສີຫນາຍຫດຈົນໄລຍະໄປຈາກເທັກ (grey).
- ນຳ hue ມາວາງຕຳແໜ່ງ chroma ບນ channel ແດງ, ເຂື້ອງ ແລະ ຄອງ, ແລະເຮັດການເເປ່ງທຸກ channel ດ້ວຍ L − C/2.
- ນຳທຸກ channel ມາຄູນດ້ວຍ 255, ປັງຈຳນວນແລ້ວຂຽນເປັນສອງຕົວເລກເຮັດເປັນ hexadecimal.
ຕົວຢ່າງທີ່ເຮັດໄດ້
ການປັງເກີດຂຶ້ນໃນຂັ້ນຕອນທ້າຍ, ເມື່ອທຸກ channel ຖືກດຶງໄວ້ເປັນຄ່າເຕັມ 0–255. ຜົນລັດເປັນ HEX ທີ່ໃກ້ຄຽງທີ່ສຸດກັບຂ່າງເຂົ້າ HSL ຂອງເຈົ້າ ແລະສ່ວນໃຫຍ່ຈະຕົວຄ່າກັບທີ່ທຸກຕູ້ອອກຈາກວິທີອຸປະກອນອອກແບບ.
HSL ແລະ HEX ອະທິບາຍ
HSL ແມ່ນຫຍັງ?
HSL ແຍກສີເປັນ hue (0–360° ຢູ່ໃນວົງຈັກສີ), saturation (ຄວາມເຄັ່ງສີ, 0–100%) ແລະ lightness (ຄວາມສະຫວ່າງ, 0–100%). ເນື່ອງຈາກແຕ່ລະສ່ວນສອດຄອງກັບວິທີທີ່ຄົນອະທິບາຍສີ, HSL ແມ່ນຮູບແບບງ່າຍທີ່ສຸດເພື່ອສ້າງ tint, shade ແລະ palette ທີ່ຄົງທີ່ — ດ້ວຍມືຫຼືໃນຄອດ.
- ສັນຊັນສັນຍາ:
- hsl(H, S%, L%)
- ຂອບເຂດ:
- 0–360°, 0–100%, 0–100%
- ເຫດທີ່ເຫຼັກ:
- palette, tint ແລະ shade, ການທີມ
HEX ແມ່ນຫຍັງ?
ໂຄດ HEX ແມ່ນຕົວເລກແຮບາແຮບາຫົກຫ້ອງທີ່ເກັບຄ່າຊ່າງສີແດງ, ເຂັ້ມ ແລະ ຟຼູ ຫຼັງຈາກຄ່ານໍາຫນ້າ #. ທຸກຄູ່ຂອງໂຄດຄຸ້ມຄອງຊ່າງສີໜຶ່ງ ຈາກ 00 (ບໍ່ມີ) ຫາ FF (ສົ່ງສິ່ງເຕັມ), ຊ່ວຍໃຫ້ມີສີໃນຮູບແບບສັ້ນກວ່າ RGB ແຕ່ຍັງຄືມິກ 16.7 ລ້ານສີ. HEX ເປັນຄ່າເລີ່ມຕົ້ນໃນ CSS, ເຄື່ອງມືອອກແບບ ແລະໜສິນປະກັນຕົວຕົນຍີ່ງ.
- ສັນຊັນສັນຍາ:
- #RRGGBB
- ຂອບເຂດ:
- 00–FF ຕໍ່ຊ່າງ
- ເຫດທີ່ເຫຼັກ:
- CSS, ການສ່ວນງານອອກແບບ, ຄວາມແນະນຳແບບຍີ່ຫໍ່
ຕາຕະລາງອ້າງອີງ HSL ເປັນ HEX
ສີ CSS ທີ່ແພດຫຼາຍທີ່ສຸດ, ແປຈາກ HSL ເປັນ HEX.
| ສີ | 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 |