RGB ບອກຈໍໃຫ້ຮູ້ວ່າຈໍຈະປ່ອຍແສງຫຼາຍແນວໃດ; HSL ບອກເຈົ້າວ່າສີແມ່ນເປັນແນວໃດ. ການແປຈາກສາມ channel ເປັນ hue, saturation ແລະ lightness ເຮັດໃຫ້ເຈົ້າປັບສີໄດ້ງ່າຍດ້ວຍມື.
ວິທີແປຈາກ RGB ເປັນ HSL
- ແບ່ງ R, G ແລະ B ໂດຍ 255 ເພື່ອໃຫ້ແຕ່ລະຄ່າຢູ່ລະຫວ່າງ 0 ແລະ 1.
- ເອົາຄ່າສູງສຸດ ແລະ ຕ່ຳສຸດ ຂອງສາມຄ່າ — ຄ່າສະເລ່ຍຂອງພວກເຂົາແມ່ນ lightness L.
- ຖ້າຄ່າສູງສຸດແລະຕ່ຳສຸດເທົ່າກັນ, ສີແມ່ນຂາວເທົ່ານັ້ນ: hue ແລະ saturation ທັງສອງເປັນ 0.
- ຖ້າບໍ່ແມ່ນອັນນັ້ນ ນຳ S ມາຈາກຂະ້ມລ່ວງລະຫວ່າງຄ່າສູງສຸດແລະຕ່ຳສຸດ, ແລະອ່ານ H ຈາກ channel ທີ່ເປັນຄ່າສູງສຸດ.
ຕົວຢ່າງທີ່ເຮັດໄດ້
ຖືກໃນທົ່ວໄປ. ເນື່ອງຈາກ H, S ແລະ L ມັກຖືກປັງເປັນຈຳນວນຈົນ, ການແປກັບຫາ RGB ອາດຈະເຮັດໃຫ້ channel ໜຶ່ງເຄື່ອນຂຶ້ນຫຼືຫຼຸ່ມຫນຶ່ງຂັ້ນ.
RGB ແລະ HSL ອະທິບາຍ
RGB ແມ່ນຫຍັງ?
RGB ອະທິບາຍສີໃນຮູບແບບສາມຊ່າງຂອງແສງ — ແດງ, ເຂີ້ງ ແລະ ຟ້າ — ທຸກຊ່າງຈາກ 0 ຫາ 255. ມັນສະຫມັກກັບວິທີທີ່ຈໍສະແດງແສງ: ທັງສາມໃນ 255 ເຮັດໃຫ້ຂາວ, ທັງໝົດໃນ 0 ເຮັດໃຫ້ດໍ. RGB ເໝາະສົມເມື່ອເຈົ້າຕ້ອງຄຳນວນກັບສີ, ແລະ rgba() ເພີ່ມຄວາມແພກເລື່ອງໂຕະ.
- ສັນຊັນສັນຍາ:
- rgb(R, G, B)
- ຂອບເຂດ:
- 0–255 ຕໍ່ຊ່າງ
- ເຫດທີ່ເຫຼັກ:
- ຄໍາສັ່ງ, canvas, ຄວາມແພກດ້ວຍ rgba()
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, ການທີມ
ຕາຕະລາງອ້າງອີງ RGB ເປັນ HSL
ສີ CSS ທີ່ແພດຫຼາຍທີ່ສຸດ, ແປຈາກ RGB ເປັນ HSL.
| ສີ | RGB | HSL |
|---|---|---|
| black | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
| white | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| red | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| lime | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| blue | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| yellow | rgb(255, 255, 0) | hsl(60, 100%, 50%) |
| orange | rgb(255, 165, 0) | hsl(39, 100%, 50%) |
| teal | rgb(0, 128, 128) | hsl(180, 100%, 25%) |
| purple | rgb(128, 0, 128) | hsl(300, 100%, 25%) |
| gray | rgb(128, 128, 128) | hsl(0, 0%, 50%) |