HSL رنګ داسې تشریح کوي لکه څنګه چې خلک یې بیانوي: کوم hue، څومره روښانتیا، څومره رنګینتیا. د HEX کود د HSL ته بدلول چټک لار ده چې رنګ په داسې بڼه واچوې چې ته یې واقعاً تعدیل کولای شې — سپکول، خړول، یا له هغه څخه بشپړ پیمانه جوړول.
د HEX څخه HSL ته د بدلولو څرنګوالی
- HEX کود په RGB بدل کړه او هر چینل په 255 وویشه، تر څو ټول درې ارزښتونه د 0 او 1 تر منځ ستاڼې ولري.
- د دې درې ارزښتونو تر مینځ تر ټولو لوی او تر ټولو کوچنی پیدا کړه. د دوی اوسط د روښانتیا L دی.
- د دوی ترمنځ واټن د رنګ رنګینتیا S ټاکي: د روښانه رنګونو لپاره یې په (2 − max − min) تقسیم کړه، یا د تیاره رنګونو لپاره په (max + min).
- هغه چینل چې اعظمي ارزښت لري، hue H ټاکي — سور په 0°، شین په 120°، آبي په 240° — او پاتې دوه چینلونه hue د دې سکتور دننه موقعیت ته ځای په ځای کوي.
یو عملي مثال
حسابونه دقیق دي، خو HSL معمولا په بشپړو درجې او سلنو کې ګردانېږي. بیرته تبدیل کېدل ښايي یو یا دوه RGB ګامونه لرې پای ته ورسیږي — په عمل کې ناسم لیدل کېږي نه، خو که تکراري ډول رنګونه round-trip کوې نو دا باید په پام کې ولرې.
HEX او HSL تشریح
HEX څه شی دی؟
یو HEX کود شپږ-عددي هیګزادیسیمل شمېره ده چې د رنګ د سور، شین او شیني چینلونه د یو مخکیني # تر شا ذخیره کوي. هر زوج ارقام یو چینل ښيي، د 00 (هیڅ) څخه تر FF (بشپړ) پورې، چې هماغه 16.7 میلیون رنګونه د RGB سره برابروي خو په لنډه نوتیشن کې. HEX په CSS، ډیزاین وسیلو او د برانډ لارښوونو کې ډیفالټ دی.
- نحو:
- #RRGGBB
- حد:
- 00–FF per channel
- د غوره کارونې لپاره:
- CSS، د ډیزاین تسلیم، د برانډ لارښوونې
HSL څه شی دی؟
HSL رنګ په تینګې (حوړ) کې ویشي (0–360° د رنګ په څرخ کې)، سېچوریشن (څومره رنګینه، 0–100%) او رڼا (څومره روښانه، 0–100%). ځکه هره برخه د خلکو د رنګ بیانولو سره سمون لري، HSL د ټینټونو، شیډونو او منظم پالېټونو جوړولو لپاره تر ټولو اسانه فورمټ دی — په لاس یا په کود کې.
- نحو:
- hsl(H, S%, L%)
- حد:
- 0–360°, 0–100%, 0–100%
- د غوره کارونې لپاره:
- پالېټونه، ټینټونه او شیډونه، موضوع بندي
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%) |