HSL ṣàpèjúwe awọ níbí tí eniyan ti ma n sọ̀rọ̀ nípa rẹ: ipa-hue wo, bí ó ṣe kún fun awọ, bí ó ṣe tan. Iyipada koodu HEX sí HSL ni ọna tó yarayara láti gba awọ sí fọọmu tí o lè ṣe atunṣe — ṣe ìtanràn rẹ, dín ìkan rẹ, tàbí kọ́ àtòjọ ìwọn kan láti inú rẹ.
Bá a ṣe ń yipada HEX sí HSL
- Yi koodu HEX pada sí RGB ki o si pin gbogbo ikanni nipasẹ 255, kí gbogbo mẹ́ta jẹ́ láàárin 0 àti 1.
- Wa iye tó pọ̀ jùlọ àti iye tó kere jùlọ nínú mẹ́ta. Apapọ wọn ni ìtanràn L.
- Iyatọ láàárin wọn ni o fa ìfarapa S: pin rẹ nipasẹ (2 − max − min) fún awọn awọ tan, tàbí nipasẹ (max + min) fún awọn dudu.
- Ikanni tí ó ní iye tó pọ̀ jùlọ ni yóò pinnu hue H — pupa ni 0°, alawọ ewé ni 120°, búlùù ni 240° — àti awọn ikanni méjì kejì máa gbe hue sípò lẹ́nu apá yẹn.
Àpẹẹrẹ tó ṣiṣẹ
Ìṣirò naa jẹ́ gangan, ṣùgbọ́n àwọn iye HSL maa n jẹ́ yíyíká sí ìyí ìwọn-ẹ̀gbẹ́ lé pọ̀ọ̀gọ̀ àti ìpèsè ogorùn-ún. Nígbà tí o ba yí padà sí ẹ̀yà mìíràn, ó lè yọrí sí pé RGB kan tàbí meji yà kuro ní ìbẹ̀rẹ̀ — kò hàn nínú ìṣe, ṣùgbọ́n tọ́ láti mọ́ tí o bá ń ṣe ìrìn-àpadà àwọn awọ leralera.
HEX ati HSL ṣàlàyé
Kí ni HEX?
Koodu HEX jẹ nọmba hexadecimal mẹfa-ti-digit ti o tọju ikanni pupa, alawọ ati buluu ti awọ kan lẹhin # akọkọ. Awọn tọkọtaya kọọkan ti awọn digits bo ikanni kan, lati 00 (ko si) si FF (kikun), eyiti o funni ni awọn awọ 16.7 million kanna bi RGB ninu kikọ kukuru. HEX ni aiyipada ninu CSS, awọn irinṣẹ apẹrẹ ati awọn itọsọna ami.
- Sínatìsí:
- #RRGGBB
- Ibiti:
- 00–FF fun ikanni kọọkan
- Tó dára jùlọ fún:
- CSS, gbigbe apẹrẹ, awọn itọsọna ami
Kí ni HSL?
HSL pin awọ si hue (0–360° lori kẹkẹ awọ), saturation (bawo ni awọ, 0–100%) ati lightness (bawo ni didan, 0–100%). Nitori apakan kọọkan ba ọna ti eniyan ṣe n ṣapejuwe awọ mu, HSL jẹ ọna kika ti o rọọrun julọ fun kikọ tints, shades ati paleti to ni ibamu — pẹlu ọwọ tabi ninu koodu.
- Sínatìsí:
- hsl(H, S%, L%)
- Ibiti:
- 0–360°, 0–100%, 0–100%
- Tó dára jùlọ fún:
- awọn paleti, tints ati shades, theming
Tábìlì ìtọ́kasí HEX sí HSL
Àwọn awọ CSS tí ó wọ́pọ̀ jùlọ, tí a yí láti HEX sí HSL.
| Awọ | 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%) |