CSS HSL ﯼﺎﻫ ﮓﻧﺭ

فهرست مطالب

    نمایش فهرست مطالب

HSL ﺖﺳﺍ ﯽﮑﺒﺳ ﻭ ﻉﺎﺒﺷﺍ ،ﮓﻧﺭ ﻒﻔﺨﻣ.

HSL ﺭﺍﺪﻘﻣ

ﺩﺮﮐ ﺺﺨﺸﻣ ﻥﺁ ﺭﺩ (HSL) ﯽﯾﺎﻨﺷﻭﺭ ﻭ ﻉﺎﺒﺷﺍ ،ﮓﻧﺭ ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ ﺎﺑ ﻥﺍﻮﺗ ﯽﻣ ﺍﺭ ﮓﻧﺭ ﮏﯾ ،CSS

hsl(ﮓﻧﺭ، ﻉﺎﺒﺷﺍ، ﻥﺩﻮﺑ ﮏﺒﺳ)

Hue ﺖﺳﺍ ﯽﺑﺁ 240 ﻭ ،ﺰﺒﺳ 120 ،ﺰﻣﺮﻗ 0 .ﺖﺳﺍ 360 ﺎﺗ 0 ﺯﺍ ﮓﻧﺭ ﻪﺧﺮﭼ ﺭﺩ ﻪﺟﺭﺩ ﮏﯾ.

.ﺖﺳﺍ ﻞﻣﺎﮐ ﮓﻧﺭ %100 ﻭ ﺖﺳﺍ ﯼﺮﺘﺴﮐﺎﺧ ﻪﯾﺎﺳ ﯽﻨﻌﻣ ﻪﺑ %0 .ﺖﺳﺍ ﺪﺻﺭﺩ ﺭﺍﺪﻘﻣ ﮏﯾ ﻉﺎﺒﺷﺍ

ﺖﺳﺍ ﺪﯿﻔﺳ ٪100 ،ﻩﺮﯿﺗ ﺎﯾ ﻦﺷﻭﺭ ﻪﻧ ٪50 ،ﺪﯿﻔﺳ ﻭ ﻩﺎﯿﺳ ٪0 .ﺖﺳﺍ ﺪﺻﺭﺩ ﮏﯾ ﻢﻫ ﯽﮑﺒﺳ

:ﺪﯿﻨﮐ ﺶﯾﺎﻣﺯﺁ ﺮﯾﺯ HSL ﺮﯾﺩﺎﻘﻣ ﻥﺩﺮﮐ ﻁﻮﻠﺨﻣ ﺎﺑ

 

HUE

0

SATURATION

100%

LIGHTNESS

50%

ﻝﺎﺜﻣ

hsl(0, 100%, 50%)
hsl(240, 100%, 50%)
hsl(147, 50%, 47%)
hsl(300, 76%, 72%)
hsl(39, 100%, 50%)
hsl(248, 53%, 58%)

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<body>

<h1>Specify colors using HSL values</h1>

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

</body>
</html>

ﻉﺎﺒﺷﺍ

.ﺩﺮﮐ ﻒﯿﺻﻮﺗ ﮓﻧﺭ ﮏﯾ ﺕﺪﺷ ﻥﺍﻮﻨﻋ ﻪﺑ ﻥﺍﻮﺗ ﯽﻣ ﺍﺭ ﻉﺎﺒﺷﺍ

.ﯼﺮﺘﺴﮐﺎﺧ ﯼﺎﻫ ﻪﯾﺎﺳ ﻥﻭﺪﺑ ،ﺖﺳﺍ ﺺﻟﺎﺧ ﮓﻧﺭ 100٪

.ﺪﯿﻨﯿﺒﺑ ﺍﺭ ﮓﻧﺭ ﺪﯿﻧﺍﻮﺗ ﯽﻣ ﻢﻫ ﺯﻮﻨﻫ ﺎﻣﺍ ،ﺖﺳﺍ ﯼﺮﺘﺴﮐﺎﺧ 50٪ 50٪

.ﺪﯿﻨﯿﺒﺑ ﺍﺭ ﮓﻧﺭ ﺪﯿﻧﺍﻮﺗ ﯽﻤﻧ ﺮﮕﯾﺩ ﺎﻤﺷ .ﺖﺳﺍ ﯼﺮﺘﺴﮐﺎﺧ ﻼﻣﺎﮐ 0%

ﻝﺎﺜﻣ

hsl(0, 100%, 50%)
hsl(0, 80%, 50%)
hsl(0, 60%, 50%)
hsl(0, 40%, 50%)
hsl(0, 20%, 50%)
hsl(0, 0%, 50%)

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<body>

<h1>HSL Saturation</h1>

<p>The second parameter of hsl() defines the saturation. Less saturation mean less color. 0% is completely gray:</p>

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

</body>
</html>

ﯽﮑﺒﺳ

.ﺖﺳﺍ (ﻦﺷﻭﺭ ﻪﻧ ﻭ ﮏﯾﺭﺎﺗ ﻪﻧ) ﻦﺷﻭﺭ ٪50 ﯼﺎﻨﻌﻣ ﻪﺑ ٪50 ،(ﻩﺎﯿﺳ) ﯽﯾﺎﻨﺷﻭﺭ ﻡﺪﻋ ﯼﺎﻨﻌﻣ ﻪﺑ ٪

ﻝﺎﺜﻣ

hsl(0, 100%, 0%)
hsl(0, 100%, 25%)
hsl(0, 100%, 50%)
hsl(0, 100%, 75%)
hsl(0, 100%, 90%)
hsl(0, 100%, 100%)

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<body>

<h1>HSL Lightness</h1>

<p>The third parameter of hsl() defines the lightness. 0% means black, and 100% means white:</p>

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

</body>
</html>

ﯼﺮﺘﺴﮐﺎﺧ ﯼﺎﻫ ﻪﯾﺎﺳ

ﻭ 0 ﯼﻭﺭ ﻉﺎﺒﺷﺍ ﻭ ﮓﻧﺭ ﻢﯿﻈﻨﺗ ﺎﺑ ﺐﻠﻏﺍ ﯼﺮﺘﺴﮐﺎﺧ ﯼﺎﻫ ﻪﯾﺎﺳ

ﻝﺎﺜﻣ

hsl(0, 0%, 0%)
hsl(0, 0%, 24%)
hsl(0, 0%, 47%)
hsl(0, 0%, 71%)
hsl(0, 0%, 94%)
hsl(0, 0%, 100%)

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<body>

<h1>Shades of gray</h1>

<p>With HSL, shades of gray are made by setting the saturation to 0%, and adjusting the lightness from 0% to 100%:</p>

<h2 style="background-color:hsl(0, 0%, 0%);">hsl(0, 0%, 0%)</h2>
<h2 style="background-color:hsl(0, 0%, 24%);">hsl(0, 0%, 24%)</h2>
<h2 style="background-color:hsl(0, 0%, 47%);">hsl(0, 0%, 47%)</h2>
<h2 style="background-color:hsl(0, 0%, 71%);">hsl(0, 0%, 71%)</h2>
<h2 style="background-color:hsl(0, 0%, 94%);">hsl(0, 0%, 94%)</h2>
<h2 style="background-color:hsl(0, 0%, 100%);">hsl(0, 0%, 100%)</h2>

</body>
</html>

HSLA ﺵﺯﺭﺍ

ﺪﻨﺘﺴﻫ ﺎﻔﻟﺁ ﻝﺎﻧﺎﮐ ﺎﺑ HSL ﮓﻧﺭ ﺮﯾﺩﺎﻘﻣ ﻂﺴﺑ HSLA ﮓﻧﺭ ﺮﯾﺩﺎﻘﻣ

ﺖﺳﺍ HSLA ﮓﻧﺭ ﺭﺍﺪﻘﻣ ﮏﯾ

hsla(ﮓﻧﺭ، ﻉﺎﺒﺷﺍ، ﮏﺒﺳ،

ﺖﺳﺍ ﺩﺪﻋ ﮏﯾ ﺎﻔﻟﺁ ﺮﺘﻣﺍﺭﺎﭘ

:ﺪﯿﻨﮐ ﺶﯾﺎﻣﺯﺁ ﺮﯾﺯ HSLA ﺮﯾﺩﺎﻘﻣ ﻥﺩﺮﮐ ﻁﻮﻠﺨﻣ ﺎﺑ

 

HUE

0

SATURATION

100%

LIGHTNESS

50%

ALPHA

0.5

ﻝﺎﺜﻣ

hsla(9, 100%, 64%, 0)
hsla(9, 100%, 64%, 0.2)
hsla(9, 100%, 64%, 0.4)
hsla(9, 100%, 64%, 0.6)
hsla(9, 100%, 64%, 0.8)
hsla(9, 100%, 64%, 1)

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<body>

<h1>Make transparent colors with HSLA</h1>

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

</body>
</html>