په HSL کې رنګ غوره کول ارام دی، خو stylesheets، design handoffs او برنډ سندونه لا هم په HEX روان وي. دا کنورټر دا تشه پُر کوي او د هر hue، saturation او lightness ترکیب لپاره شپږ رقمي کوډ درکوي.
د HSL څخه HEX ته د بدلولو څرنګوالی
- saturation او lightness په برخو بدله کړه: 60% به 0.6 شي.
- chroma C = (1 − |2L − 1|) × S محاسبه کړه — دا ښيي چې رنګ له خړ څخه څومره لرې دی.
- د hue څخه استفاده وکړه تر څو هغه chroma په سور، شین او آبي چینلونو کې ځای پر ځای کړې، بیا ټول درې چینلونه په L − C/2 سره بدل کړه.
- هر چینل په 255 ضرب کړه، ګردان یې کړه، او د دوو هیکس ارقامو په شکل ولیکه.
یو عملي مثال
ګرداني یوازې په وروستي ګام کې کېږي، کله چې هر چینل ته بشپړ 0–255 ارزښت ټاکل کېږي. نتیجه د ستا HSL انپټ ته نږدې ترین HEX کوډ دی او معمولا د هغه څه سره چې د ډیزاین وسیله ښيي یو شان وي.
HSL او HEX تشریح
HSL څه شی دی؟
HSL رنګ په تینګې (حوړ) کې ویشي (0–360° د رنګ په څرخ کې)، سېچوریشن (څومره رنګینه، 0–100%) او رڼا (څومره روښانه، 0–100%). ځکه هره برخه د خلکو د رنګ بیانولو سره سمون لري، HSL د ټینټونو، شیډونو او منظم پالېټونو جوړولو لپاره تر ټولو اسانه فورمټ دی — په لاس یا په کود کې.
- نحو:
- hsl(H, S%, L%)
- حد:
- 0–360°, 0–100%, 0–100%
- د غوره کارونې لپاره:
- پالېټونه، ټینټونه او شیډونه، موضوع بندي
HEX څه شی دی؟
یو HEX کود شپږ-عددي هیګزادیسیمل شمېره ده چې د رنګ د سور، شین او شیني چینلونه د یو مخکیني # تر شا ذخیره کوي. هر زوج ارقام یو چینل ښيي، د 00 (هیڅ) څخه تر FF (بشپړ) پورې، چې هماغه 16.7 میلیون رنګونه د RGB سره برابروي خو په لنډه نوتیشن کې. HEX په CSS، ډیزاین وسیلو او د برانډ لارښوونو کې ډیفالټ دی.
- نحو:
- #RRGGBB
- حد:
- 00–FF per channel
- د غوره کارونې لپاره:
- CSS، د ډیزاین تسلیم، د برانډ لارښوونې
HSL څخه HEX ته د حوالې جدول
تر ټولو عام CSS رنګونه، له HSL څخه HEX ته بدل شوي.
| رنګ | HSL | HEX |
|---|---|---|
| black | hsl(0, 0%, 0%) | #000000 |
| white | hsl(0, 0%, 100%) | #FFFFFF |
| red | hsl(0, 100%, 50%) | #FF0000 |
| lime | hsl(120, 100%, 50%) | #00FF00 |
| blue | hsl(240, 100%, 50%) | #0000FF |
| yellow | hsl(60, 100%, 50%) | #FFFF00 |
| orange | hsl(39, 100%, 50%) | #FFA600 |
| teal | hsl(180, 100%, 25%) | #007F80 |
| purple | hsl(300, 100%, 25%) | #80007F |
| gray | hsl(0, 0%, 50%) | #808080 |