HSL ອະທິບາຍສີໃຫ້ເຫັນແນວທີ່ຄົນເວົ້າກ່ອນ: ສີໃດ, ມີຄວາມສັດສະເຫຼີມແຄ່ໃດ, ແລະ ສວ່ງແບບໃດ. ການແປຈາກເລກ HEX ເປັນ HSL ແມ່ນວິທີໄວ້ທີ່ສຸດເພື່ອເຮັດໃຫ້ສີຢູ່ໃນຮູບແບບທີ່ເຈົ້າສາມາດແກ້ໄຂໄດ້ຈົນ — ປືກແສງມື້ຂຶ້ນ, ອ້ອມສີໜຶ່ງ ຫຼື ສ້າງສະຫຼຸບສີຈາກມັນ.
ວິທີແປຈາກ HEX ເປັນ HSL
- ແປລະຫັດ HEX ເປັນ RGB ແລ້ວແບ່ງທຸກ channel ດ້ວຍ 255, ເພື່ອໃຫ້ຄ່າທັງສາມຢູ່ລະຫວ່າງ 0 ແລະ 1.
- ຄົ້ນຫາຄ່າສູງສຸດ ແລະ ຕ່ຳສຸດ ຂອງສອງແລະສາມຄ່າ. ຄ່າເຉື່ອງການລະຫວ່າງກັນ (average) ແມ່ນ lightness L.
- ການແກ້ຄ່າຄວາມແບ່ງຫນ່ວຍລະຫວ່າງພວກເຂົານັ້ນ ກຳນົດ saturation S: ແບ່ງມັນດ້ວຍ (2 − max − min) ສໍາລັບສີແບບແສງ, ຫຼື ໂດຍ (max + min) ສໍາລັບສີມືດ.
- channel ທີ່ມີຄ່າສູງສຸດ ກຳນົດ hue H — ແດງ 0°, ເຂື້ອງ 120°, ຄອງ 240° — ແລະສອງ channel ທີ່ເຫຼືອຢູ່ໃນພາກນັ້ນຈຳວັນຕຳແຫນ່ງ hue ພາຍໃນສິ່ງນັ້ນ.
ຕົວຢ່າງທີ່ເຮັດໄດ້
ຄຳນວນແມ່ນຖືກແທ້, ແຕ່ຄ່າ HSL ສະເລ່ຍຖືກປັງເປັນມູນສົມບູນອັນດັ່ງເປັນອົງສະກັນອັນເຕັກ ແລະລະຫວ່າງແປເທື່ອອາດຈະເຮັດໃຫ້ RGB ຄ່າກະທັນໄປທີ່ຫນຶ່ງ ຫຼື ສອງ ແຕ່ໃນປະສົບການແນວນີ້ຈະບໍ່ມີຜົນຕໍ່ການມອງເຫັນ — ແຕ່ກໍຄວນຮູ້ວ່າມັນເກີດຂຶ້ນໄດ້ຖ້າເຈົ້າແປກັນຫຼາຍຄັ້ງ.
HEX ແລະ HSL ອະທິບາຍ
HEX ແມ່ນຫຍັງ?
ໂຄດ HEX ແມ່ນຕົວເລກແຮບາແຮບາຫົກຫ້ອງທີ່ເກັບຄ່າຊ່າງສີແດງ, ເຂັ້ມ ແລະ ຟຼູ ຫຼັງຈາກຄ່ານໍາຫນ້າ #. ທຸກຄູ່ຂອງໂຄດຄຸ້ມຄອງຊ່າງສີໜຶ່ງ ຈາກ 00 (ບໍ່ມີ) ຫາ FF (ສົ່ງສິ່ງເຕັມ), ຊ່ວຍໃຫ້ມີສີໃນຮູບແບບສັ້ນກວ່າ RGB ແຕ່ຍັງຄືມິກ 16.7 ລ້ານສີ. HEX ເປັນຄ່າເລີ່ມຕົ້ນໃນ CSS, ເຄື່ອງມືອອກແບບ ແລະໜສິນປະກັນຕົວຕົນຍີ່ງ.
- ສັນຊັນສັນຍາ:
- #RRGGBB
- ຂອບເຂດ:
- 00–FF ຕໍ່ຊ່າງ
- ເຫດທີ່ເຫຼັກ:
- CSS, ການສ່ວນງານອອກແບບ, ຄວາມແນະນຳແບບຍີ່ຫໍ່
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 ເປັນ HSL
ສີ CSS ທີ່ແພດຫຼາຍທີ່ສຸດ, ແປຈາກ HEX ເປັນ HSL.
| ສີ | 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%) |