RGB سکرین ته وایی چې څومره رڼا خپره کړي؛ HSL درته وایی رنګ په اصل کې څنګه ښکاري. د دې دریو چینلونو بدلول په hue، saturation او lightness کې رنګ په لاس سره تنظیمول اسانه کوي.
د RGB څخه HSL ته د بدلولو څرنګوالی
- R، G او B په 255 وویشه تر څو هر ارزښت د 0 او 1 تر منځ راشي.
- د دې درېو تر منځ اعظمي او اقل راواخله — د دوی اوسط د روښانتیا L دی.
- که اعظمي او اقل مساوي وي، رنګ خړ دی: hue او saturation دواړه 0 دي.
- بلصورت کې S د اعظمي او اقل ترمنځ د واټن څخه پیدا کړه، او H د هغه چینل څخه ولوله چې اعظمي وي.
یو عملي مثال
اصولا دقیق دی. ځکه چې H، S او L عموما د بشپړو نمبرو په توګه ښودل کېږي، بیرته بدلول ممکن یو یا دوه چینل ګامونه بدل کړي.
RGB او HSL تشریح
RGB څه شی دی؟
RGB یو رنګ د رڼا په درې چینلونو کې تشریح کوي — سور، شین او شیني — هر یو له 0 څخه تر 255 پورې. دا د سکرینونو د کار کولو څرګندویي کوي: ټول درې په 255 کې سپین ورکوي، ټول په 0 کې تور. کله چې تا اړتیا وي له رنګ سره محاسبه وکړې، RGB سم انتخاب دی، او rgba() شفافیت هم وړ اضافه کوي.
- نحو:
- rgb(R, G, B)
- حد:
- 0–255 per channel
- د غوره کارونې لپاره:
- کود، canvas، د rgba() سره شفافیت
HSL څه شی دی؟
HSL رنګ په تینګې (حوړ) کې ویشي (0–360° د رنګ په څرخ کې)، سېچوریشن (څومره رنګینه، 0–100%) او رڼا (څومره روښانه، 0–100%). ځکه هره برخه د خلکو د رنګ بیانولو سره سمون لري، HSL د ټینټونو، شیډونو او منظم پالېټونو جوړولو لپاره تر ټولو اسانه فورمټ دی — په لاس یا په کود کې.
- نحو:
- hsl(H, S%, L%)
- حد:
- 0–360°, 0–100%, 0–100%
- د غوره کارونې لپاره:
- پالېټونه، ټینټونه او شیډونه، موضوع بندي
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%) |