رنگ های HTML

رنگ ها و مقادیر آن در HTML

رنگهای HTML با نام رنگهای از پیش تعریف شده یا با مقادیر RGB ، HEX ، HSL ، RGBA یا HSLA مشخص می شوند.

نام های رنگی

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

<h1 style="background-color:Tomato;">Tomato</h1>
<h1 style="background-color:Orange;">Orange</h1>
<h1 style="background-color:DodgerBlue;">DodgerBlue</h1>
<h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1>
<h1 style="background-color:Gray;">Gray</h1>
<h1 style="background-color:SlateBlue;">SlateBlue</h1>
<h1 style="background-color:Violet;">Violet</h1>
<h1 style="background-color:LightGray;">LightGray</h1>

رنگ پس زمینه در HTML

می توانید رنگ پس زمینه را برای عناصر HTML تنظیم کنید:

<h1 style="background-color:DodgerBlue;">به آپ وب خوش آمدید</h1>

نتیجه:

به آپ وب خوش آمدید

هم ترازکردن متن(text-align)در HTML:

در مثال بالا ما متن (به آپ وب خوش آمدید) را در وسط قرار دادیم،مشابه بالا این خصوصیت به شما کمک می‌کند تا متن‌هایتان را چپ چین, راست چین یا وسط چین کنید.

<h1 style="text-align:center"> متن وسط صفحه قرار می‌گیرد </h1>
<p style="text-align:right"> متن سمت راست صفحه قرار می‌گیرد </p>
<p style="text-align:left"> متن سمت چپ صفحه قرار می‌گیرد </p>

نتیجه:

متن وسط صفحه قرار می‌گیرد

متن سمت راست صفحه قرار می‌گیرد

متن سمت چپ صفحه قرار می‌گیرد

رنگ فونت در HTML

رنگ متن‌ها را در HTML به دو شکل می‌توان تعیین کرد. در حالت اول, رنگ نوشته‌ها را با رنگ‌های پیش‌فرض (مثلا blue، yellow یا ...) مشخص می‌کنند. در این حالت انتخاب‌ها به رنگ‌های از پیش تعریف شده محدود می‌شود, ولی اگر قصد استفاده از رنگ خاصی را دارید باید از کد شش رقمی آن‌ها  درکنار علامت #  استفاده کنید. مثلا 888888# رنگ سفید می توانید رنگ متن در حالت اول به شکل زیر تنظیم کنید:

<h1 style="color:Tomato;">سلام</h1>
<p style="color:DodgerBlue;">به آپ وب خوش آمدید</p>

نتیجه:

سلام

به آپ وب خوش آمدید

رنگ حاشیه در HTML:

برای تغییر رنگ حاشیه (border) یک عنصر HTML ، باید از مشخصه border-color در CSS استفاده نماییم.
می توانید رنگ حاشیه ها را تنظیم کنید:

<h1 style="border:2px solid Tomato;">UPWEB</h1>
<h1 style="border:2px solid DodgerBlue;">UPWEB</h1>
<h1 style="border:2px solid Violet;">UPWEB</h1>

نتیجه:

UPWEB

UPWEB

UPWEB

مقادیر رنگ

در HTML ، رنگها را می توان با استفاده از مقادیر RGB ، مقادیر HEX ، مقادیر HSL ، مقادیر RGBA و مقادیر HSLA نیز تعیین کرد.

سه مولفه ی div در پایین، رنگ پس زمینه ی خود را با استفاده از مقادیر RGB ،HEX و HSL تنظیم کرده اند.

<h1 style="background-color:rgb(255, 99, 71);">rgb(255, 99, 71)</h1>
<h1 style="background-color:#ff6347;">#ff6347</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">hsl(9, 100%, 64%)</h1>

نتیجه:

rgb(255, 99, 71)

#ff6347

hsl(9, 100%, 64%)

دو عنصر <div> در  زیر دارای رنگ زمینه با مقادیر RGBA و HSLA هستند که یک کانال آلفا را به رنگ اضافه می کند (در اینجا 50٪ شفافیت داریم).

میزان شفافیت رنگ را تعیین می کند که می تواند مقداری بین 0 و 1 داشته باشد:

<h1 style="background-color:rgba(255, 99, 71, 0.5);">rgba(255, 99, 71, 0.5)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">hsla(9, 100%, 64%, 0.5)</h1>

نتیجه:

rgba(255, 99, 71, 0.5)

hsla(9, 100%, 64%, 0.5)