آپ وبآپ وبآپ وبآپ وب
  • صفحه اصلی
  • هاست مخصوص وردپرس
  • هاست لینوکس ( Cpanel )
    • هاست سی پنل آلمان
    • هاست سی پنل ایران (پیشنهاد)
    • هاست ارزان
    • هاست نمایندگی
  • هاست ویندوز ایران
  • سرور مجازی
    • سرور مجازی SSD آلمان
    • سرور مجازی فنلاند
  • قالب وردپرس رایگان
    • فروشگاهی
    • شرکتی
    • همه قالب ها
  • دامنه
    • جستجو و ثبت دامنه
    • گواهی SSL
  • پشتیبانی
    • ارسال درخواست پشتیبانی
    • ارتباط با ما / درباره ما
    • آموزش هاستینگ
    • آموزش HTML
    • قوانین
    • کسب درآمد در آپ وب
ورود به سایت
✕

کد رنگ HSL در HTML

اموزش html

کد رنگ HSL در HTML برای طراحی سایت

کد HSL مخفف سه کلمه Hue ، Saturation ،Lightness میباشد که Hue به معنای اشباع،Saturation به معنای رنگ و Lightness به معنای روشنایی میباشد و با استفاده از HSL میتوان میزان اشباع،روشنایی و رنگ را مشخص کرد.

hsl(hue, saturation, lightness)

مقادیر رنگ HSL

در HTML ، می توان رنگ را با استفاده از رنگ ، اشباع و روشنایی (HSL) به شکل زیر مشخص کرد:
hsl (رنگ ، اشباع ، روشنایی)

Hue: یک درجه در چرخ رنگ از 0 تا 360 است. 0 قرمز ، 120 سبز و 240 آبی است.

saturation: میزان اشباع رنگ را بصورت درصدی نشان میدهد.0% یعنی سایه‎ ای از خاکستری، 100% یعنی رنگ کامل.

lightness:میزان روشنایی رنگ را بصورت درصدی نشان میدهد.0% یعنی سیاه، 50%  یعنی نه روشن و نه تیره، 100% یعنی سفید.(هرچقدر به سمت 100% برود رنگ روشن تر میشود.)

مثال:

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

نتیجه:

hsl(0, 100%, 50%)

hsl(240, 100%, 50%)

hsl(147, 50%, 47%)

hsl(300, 76%, 72%)

hsl(39, 100%, 50%)

hsl(248, 53%, 58%)

Saturation(اشباع)

 اشباع را می توان به عنوان شدت یک رنگ توصیف کرد.

100٪ رنگ خالص است ، بدون سایه خاکستری

 50٪ خاکستری است ، اما هنوز هم می توانید رنگ را ببینید.

0٪ کاملاً خاکستری است ، دیگر نمی توانید رنگ را ببینید.

مثال:

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

نتیجه:

hsl(0, 100%, 50%)

hsl(0, 80%, 50%)

hsl(0, 60%, 50%)

hsl(0, 40%, 50%)

hsl(0, 20%, 50%)

hsl(0, 0%, 50%)

Lightness(روشنایی)

روشنایی یک رنگ را میتوان به میزان روشنایی که می خواهید به رنگ بدهید ، توصیف کرد.

در صورتی که 0٪ باشد به معنی عدم روشنایی (سیاه)،50٪ باشد به معنای 50٪ روشنایی (نه تیره و نه روشن)،100٪ به معنای روشنایی کامل (سفید) است.

 مثال:

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

نتیجه: 

hsl(0, 100%, 0%)

hsl(0, 100%, 25%)

hsl(0, 100%, 50%)

hsl(0, 100%, 75%)

hsl(0, 100%, 90%)

hsl(0, 100%, 100%)

سایه های خاکستری

سایه های خاکستری اغلب با تنظیم رنگ و میزان اشباع روی 0 تعریف می شوند و روشنایی را از 0 تا 100 درصد برای ایجاد سایه های تیره تر/روشن تر تنظیم می کنند.

مثال:

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

 نتیجه:

hsl(0, 0%, 20%)

hsl(0, 0%, 30%)

hsl(0, 0%, 40%)

hsl(0, 0%, 60%)

hsl(0, 0%, 70%)

hsl(0, 0%, 90%)

مقادیر رنگ HSLA

مقادیر رنگ HSLA افزونه‌ای از مقدارهای رنگ HSL با یک کانال آلفا هستند که مقدار تاری رنگ را تعیین می‌کند.

مقدار رنگ HSLA با موارد زیر مشخص شده است:

hsla (رنگ ، اشباع ، روشنایی ، آلفا)

پارامتر آلفا یک عدد بین ۰/۰ (کاملاً شفاف) و ۱/۰ (کاملاً تار) است.

مثال:

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

 نتیجه:

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)

 

مطالب مرتبط

اموزش html
3 خرداد 1401

آموزش طرح بندی و تکنیک های چیدمان عناصر HTML


ادامه مطلب
اموزش html
28 اردیبهشت 1401

آموزش استفاده از تگ Head در HTML بصورت جامع


ادامه مطلب
اموزش html
14 اردیبهشت 1401

آموزش آدرس دهی به فایل ها در HTML بصورت جامع


ادامه مطلب

آپ وب خانه امن رویاهای آنلاین شما


خرید هاست و ثبت دامنه پیش نیاز برای ایجاد سایت میباشد. سرعت بارگزاری هاست و اپتایم نقش مهمی در سئو سایت دارد. آپ وب تلاش میکند بهترین کیفیت هاست را برای شما ایجاد کند.

آپ وب با بیش از 8 سال سابقه در کنار شماست.

نماد اعتماد الکترونیکی


مجوز وزارت صنعت و معدن

خرید هاست



ارسال تیکت

ارتباط با ما


شماره تماس: 32625682-013
info@upweb.ir

نیاز به پشتیبانی دارید؟

اگر سوالی دارید از طریق تیکت به پشتیبان مطرح نمایید.


ارتباط با ما
© تمام حقوق برای شرکت هاستینگ آپ وب محفوظ می باشد.
ورود به سایت