یو چاپ شوی پاڼی ته ویب ته راوړل په HSL کې اسانه دي: کله چې ستا د رنګ مرکب د هیو، سیچوریشن او لایټنس په توګه څرګند شوی وي، ته کولی شې په ثانیو کې له هغې څخه hover حالتونه، tints او shades جوړ کړې.
د CMYK څخه HSL ته د بدلولو څرنګوالی
- د CMYK سلنې RGB چینلونو ته د 0 او 255 ترمنځ واړوه.
- چینلونه په 255 تقسیم کړه او د هغو اعظمي او اقلي واخله.
- د اعظمي او اقلي منځګړیتوب د لایټنس L دی، او د هغوی پراخوالی سیچوریشن S ټاکي.
- هغه چینل چې اعظمي ارزښت لري، په رنګ څرخ کې د درجې په بڼه هیو H ټاکي.
یو عملي مثال
د CMYK څخه RGB ګام لا له مخکې نږدې والی دی او HSL ارزښتونه بشپړو ارقامو ته ګردې کېږي. نتیجه ډېر نږدې مطابقت دی، نه یو رنګ‑مدیریت شوی تبدیل.
CMYK او HSL تشریح
CMYK څه شی دی؟
CMYK د چاپ لپاره استعمالېدونکی د څلورو رنګونو ماډل دی: cyan، magenta، yellow او key (تور)، هر یو د 0 څخه تر 100٪ پورې سلنه. رنګ د رڼا راکمه کوي پر ځای د رڼا خپرولو، نو CMYK د سکرین په پرتله لږ رنګونه څنډي — ځکه ځینې روښانه سکرین رنګونه کله چې چاپ شي ښورې ښکاري.
- نحو:
- cmyk(C%, M%, Y%, K%)
- حد:
- 0–100% per ink
- د غوره کارونې لپاره:
- چاپ، بسته بندي، د چاپ لپاره تیار هنر
HSL څه شی دی؟
HSL رنګ په تینګې (حوړ) کې ویشي (0–360° د رنګ په څرخ کې)، سېچوریشن (څومره رنګینه، 0–100%) او رڼا (څومره روښانه، 0–100%). ځکه هره برخه د خلکو د رنګ بیانولو سره سمون لري، HSL د ټینټونو، شیډونو او منظم پالېټونو جوړولو لپاره تر ټولو اسانه فورمټ دی — په لاس یا په کود کې.
- نحو:
- hsl(H, S%, L%)
- حد:
- 0–360°, 0–100%, 0–100%
- د غوره کارونې لپاره:
- پالېټونه، ټینټونه او شیډونه، موضوع بندي
CMYK څخه HSL ته د حوالې جدول
تر ټولو عام CSS رنګونه، له CMYK څخه HSL ته بدل شوي.
| رنګ | CMYK | HSL |
|---|---|---|
| black | cmyk(0%, 0%, 0%, 100%) | hsl(0, 0%, 0%) |
| white | cmyk(0%, 0%, 0%, 0%) | hsl(0, 0%, 100%) |
| red | cmyk(0%, 100%, 100%, 0%) | hsl(0, 100%, 50%) |
| lime | cmyk(100%, 0%, 100%, 0%) | hsl(120, 100%, 50%) |
| blue | cmyk(100%, 100%, 0%, 0%) | hsl(240, 100%, 50%) |
| yellow | cmyk(0%, 0%, 100%, 0%) | hsl(60, 100%, 50%) |
| orange | cmyk(0%, 35%, 100%, 0%) | hsl(39, 100%, 50%) |
| teal | cmyk(100%, 0%, 0%, 50%) | hsl(180, 100%, 25%) |
| purple | cmyk(0%, 100%, 0%, 50%) | hsl(300, 100%, 25%) |
| gray | cmyk(0%, 0%, 0%, 50%) | hsl(0, 0%, 50%) |