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