‎‎رنگ فرم اچ اس الHTML HSL and HSLA Colors -‎

Previous >    <Next  

HSL‎مخفف hue ,saturation,lightness ميباشد.و HSLA گسترش يافته HSL با يك حالت تاري يا ‎ Alpha channel‎‎ميباشد.

‎‎مقادير رنگ اج اس الHSL Color Valus -‎

‎‎درHTML يگ رنگ ميتواند در فرم hsl مطابق زير مشخص شود

‎hsl(hue , saturation , lightness)‎

‎‎كهhue درجه رنگ بين‎0-‎360‎ و مقدار صفرو 360رنگ قرمز،120سبز و 240آبي

Saturation‎سبكي يا شدت رنگ بصورت درصد بوده و از‎0-‎100‎ ميباشد .مقدار ‎ 100‎رنگ كامل ‎بدون سايه خاكستري ومقدار 50 درصد يعني داراي50 درصد سايه خاكستري است، ودرصد صفر ‎بمعني اينست كه رنگ كاملا خاكستريست.

lightness‎بعنوان سبكي يا روشنائي است وبصورت در صد ميباشد .صفر بمعني رنگ در تاريكي كامل ‎و100يعني رنگ در روشنائي كامل.

‎‎در مدل زير شما خود ميتوانيد با تركيب مقادير پارامترها نتايج را مشاهده كنيد.

hsl(0, 100%, 50%)

HUE

0

SATURATION

100%

LIGHTNESS

50%

‎‎مثال ـ نمونه برنامه استفاده ازفرم رنگhsl

‎ 

<<html>
<body>

<h1style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>
<h1style="background-color:hsl(240, 100%, 50%);">hsl(240, 100%, 50%)</h1>
<h1style="background-color:hsl(147, 50%, 47%);">hsl(147, 50%, 47%)</h1>
<h1style="background-color:hsl(300, 76%, 72%);">hsl(300, 76%, 72%)</h1>
<h1style="background-color:hsl(39, 100%, 50%);">hsl(39, 100%, 50%)</h1>
<h1style="background-color:hsl(248, 53%, 58%);">hsl(248, 53%, 58%)</h1>

</body>
</html>

--(go to editor for change code and run)

‎‎شدت يا اشباع رنگSaturation -‎

saturation‎ميتواند بعنوان شدت رنگ باشد، %100بعنوان رنگ كامل بدون سايه، % 0بعنوان تيرگي ‎كامل و% 50بمعني 50 در صد تيرگي كه هنوز رنگ مشاهده ميشود.

‎مثال ـ نمونه استفاده از شدت رنگ .در اين مثال دو پارامتر ديگرثابت ميباشند تا تاثير شدت رنگ ‎مشخص شود.

‎ 
<!DOCTYPE html>
<html>
<body>

<h1style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>
<h1style="background-color:hsl(0, 80%, 50%);">hsl(0, 80%, 50%)</h1>
<h1style="background-color:hsl(0, 60%, 50%);">hsl(0, 60%, 50%)</h1>
<h1style="background-color:hsl(0, 40%, 50%);">hsl(0, 40%, 50%)</h1>
<h1style="background-color:hsl(0, 20%, 50%);">hsl(0, 20%, 50%)</h1>
<h1style="background-color:hsl(0, 0%, 50%);">hsl(0, 0%, 50%)</h1>

<p With HSL colors, less saturation mean less color. 0% is completely gray.</p>

</body>
</html>

--(go to editor for change code and run)

‎‎روشني يا سبكيLightness -‎

‎روشن بودن رنگ را ميتوان اينطور توصيف كرد كه رنگ را با چه ميزان نور مشاهده ميكنيد .% 0بمعني ‎عدم روشنائي يعني سياه به نظر مى آيد .% 100بمعني نور كامل يعني سفيدو% 50يعني حالت ميانه ‎روشنائي وتاري.

‎‎مثال ـ در مثال زير اثرLightness را برنمايش رنگ نشان ميدهد .دوعامل ديگر ثابت هستند.

‎ 
<!DOCTYPE html>
<html>
<body>

<h1style="background-color:hsl(0, 100%, 0%);">hsl(0, 100%, 0%)</h1>
<h1style="background-color:hsl(0, 100%, 25%);">hsl(0, 100%, 25%)</h1>
<h1style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>
<h1style="background-color:hsl(0, 100%, 75%);">hsl(0, 100%, 75%)</h1>
<h1style="background-color:hsl(0, 100%, 90%);">hsl(0, 100%, 90%)</h1>
<h1style="background-color:hsl(0, 100%, 100%);">hsl(0, 100%, 100%)</h1>

<p With HSL colors, 0% lightness means black, and 100 lightness means white.</p>

</body>
</html>

--(go to editor for change code and run)

‎‎سايه هاي خاكستريShades of Gray -‎

‎سايه هاي خاكستري اغلب باتنظيم رنگ واشباع روي 0 و تنظيم روشنائي روي مقادير متفاوت نور يا ‎يا روشنائي بدست مي آيد مقدار آن از 100 ـ0 به ترتيب روند كاهش تيرگي وافزايش ‎روشني را دارد.

‎‎مثال ـ سايه هاي خاكستري

‎ 
<!DOCTYPE html>
<html>
<body>

<h1style="background-color:hsl(0, 0%, 20%);">hsl(0, 0%, 20%)</h1>
<h1style="background-color:hsl(0, 0%, 30%);">hsl(0, 0%, 30%)</h1>
<h1style="background-color:hsl(0, 0%, 40%);">hsl(0, 0%, 40%)</h1>
<h1style="background-color:hsl(0, 0%, 60%);">hsl(0, 0%, 60%)</h1>
<h1style="background-color:hsl(0, 0%, 70%);">hsl(0, 0%, 70%)</h1>
<h1style="background-color:hsl(0, 0%, 90%);">hsl(0, 0%, 90%)</h1>

</body>
</html>

--(go to editor for change code and run)

‎‎مقادير رنگ گسترش يافتهHSLA Color Valus -‎ Hsl

‎مقادير رنگhsla توسعه يافتهhsl ميباشد .با يگ پارامتر ديگر بنامAlpha cannel يا مشخصه ‎كدورت رنگ.

‎‎فرم كلي رنگHsla مطابق زير است .

‎hsla(hun , saturation, lightnees , alpha)‎‎

‎‎كه پارامترalpha بين‎0-‎1‎ميباشد .مقدار 1 كاملا غير شفاف ومقدار0كاملا شفاف

‎‎با مدل زير مقادير پارامترهايhsla را تركيب و نتيجه را مشاهده كنيد .

hsla(0, 100%, 50%, 0.5)

HUE

0

SATURATION

100%

LIGHTNESS

50%

ALPHA

0.5

‎‎مثال ـ در مثال زير اثر تغييراتalpha را باتوجه به ثابت بودن بقيه پارامترها مشاهده كنيد.

‎ 
<!DOCTYPE html>
<html>
<body>

<h1style="background-color:hsla(9, 100%, 64%, 0);">hsla(9, 100%, 64%, 0)</h1>
<h1style="background-color:hsla(9, 100%, 64%, 0.2);">hsla(9, 100%, 64%, 0.2)</h1>
<h1style="background-color:hsla(9, 100%, 64%, 0.4);">hsla(9, 100%, 64%, 0.4)</h1>
<h1style="background-color:hsla(9, 100%, 64%, 0.6);">hsla(9, 100%, 64%, 0.6)</h1>
<h1style="background-color:hsla(9, 100%, 64%, 0.8);">hsla(9, 100%, 64%, 0.8)</h1>
<h1style="background-color:hsla(9, 100%, 64%, 1);">hsla(9, 100%, 64%, 1)</h1>

</body>
</html>

--(go to editor for change code and run)

Previous >    <Next