رنگ ها در HTML

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

اسامی رنگ ها

در زبان HTML می توان یک رنگ را با استفاده از نام متعارف آن تعریف کرد. مثال:

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

زبان HTML از 140 نام رنگ استاندارد پشتیبانی می کند.

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

می توان رنگ پس زمینه عنصر HTML را تعیین کرد. مثل:


Hello World

 


Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>

رنگ متن در HTML

می توان رنگ متن را HTML تعیین کرد، مثل:

Hello World

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>

رنگ حاشیه در HTML

در HTML می توان حاشیه یا لبه عناصر را با رنگ مشخص کرد. مثل:

Hello World

Hello World

Hello World

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

مقدار رنگ در HTML

می توان در HTML مقدار رنگ (Color Values) را با استفاده از هریک از مقادیر RGB، HEX، HSL،  RGBA و HSLA تعیین نمود. مثلا برای رنگ گوجه ای:

rgb(255, 99, 71)
#ff6347
hsl(9, 100%, 64%)

رنگ زیر همان رنگ گوجه ای است، اما 50% شفافیت به آن داده شده است:

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

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

مقدار RGB

در زبان HTML می توان رنگ را با استفاده از کد RGB آن تعیین کرد که به صورت کد زیر بیان می شود:

rgb(red, green, blue)

هر یک از پارامترهای (red،  green، blue) شدت رنگی بین صفر تا 255 را بخود می گیرند.

برای مثال رنگ (rgb(255,0,0 به صورت قرمز نمایش می یابد، زیرا پارامتر قرمز در بالاترین مقدار (255) و دو پارامتر دیگر به صفر ست شده اند.

برای نمایش رنگ سیاه بایستی هر سه پارامتر به صفر ست شود، بدین صورت: (rgb(0,0,0

همچنین برای تعریف رنگ سفید بایستی هر سه پارامتر به بالاترین سطح خود یعنی 255 ست شوند، بدین صورت: (rgb(255,255,255

در اینجا چند نمونه رنگ با ترکیب کد RGB آنها آمده است:

 هر یک از پارامترهای (red،  green، blue) شدت رنگی بین صفر تا 255 را بخود می گیرند. برای مثال رنگ rgb(255,0,0) به صورت قرمز نمایش می یابد، زیرا پارامتر قرمز در بالاترین مقدار (255) و دو پارامتر دیگر به صفر ست شده اند. برای نمایش رنگ سیاه بایستی هر سه پارامتر به صفر ست شود، بدین صورت: rgb(0,0,0) همچنین برای تعریف رنگ سفید بایستی هر سه پارامتر به بالاترین سطح خود یعنی 255 ست شوند، بدین صورت: rgb(255,255,255) در اینجا چند نمونه رنگ با ترکیب کد RGB آنها آمده است: طیف خاکستری اغلب به صورت مقادیر مساوی از هر سه رنگ یا منبع نوری تعریف می شود. برای مثال:

طیف خاکستری اغلب به صورت مقادیر مساوی از هر سه رنگ یا منبع نوری تعریف می شود. برای مثال:

 هر یک از پارامترهای (red،  green، blue) شدت رنگی بین صفر تا 255 را بخود می گیرند. برای مثال رنگ rgb(255,0,0) به صورت قرمز نمایش می یابد، زیرا پارامتر قرمز در بالاترین مقدار (255) و دو پارامتر دیگر به صفر ست شده اند. برای نمایش رنگ سیاه بایستی هر سه پارامتر به صفر ست شود، بدین صورت: rgb(0,0,0) همچنین برای تعریف رنگ سفید بایستی هر سه پارامتر به بالاترین سطح خود یعنی 255 ست شوند، بدین صورت: rgb(255,255,255) در اینجا چند نمونه رنگ با ترکیب کد RGB آنها آمده است: طیف خاکستری اغلب به صورت مقادیر مساوی از هر سه رنگ یا منبع نوری تعریف می شود. برای مثال:

مقدار HEX

در HTML می توان رنگ ها را به صورت کد هگزادسیمال نیز بیان کرد که شکل #RRGGBB بخود می گیرد؛ که در آن RR (قرمز)، GG (سبز) و BB (آبی) مقادیر هگزادسیمال بین 00 و FF می باشند (همانند دسیمال که بین 255-0 است).

برای مثال، کد #FF0000 به صورت قرمز نمایش می یابد، زیرا رنگ قرمز آن به بالاترین مقدار (FF) ست شده است و سایر مقادیر به کمترین مقدار (00) ست شده است. در زیر چند مثال از کد رنگ هگزادسیمال آمده است.

 در HTML می توان رنگ ها را به صورت کد هگزادسیمال نیز بیان کرد که شکل #RRGGBB بخود می گیرد؛ که در آن RR (قرمز)، GG (سبز) و BB (آبی) مقادیر هگزادسیمال بین 00 و FF می باشند (همانند دسیمال که بین 255-0 است). برای مثال، کد #FF0000 به صورت قرمز نمایش می یابد، زیرا رنگ قرمز آن به بالاترین مقدار (FF) ست شده است و سایر مقادیر به کمترین مقدار (00) ست شده است. در زیر چند مثال از کد رنگ هگزادسیمال آمده است. در این سیستم نیز طیف خاکستری به صورت مقادیر مساوی از هر سه منبع نوری تعریف می شود. مثل:

در این سیستم نیز طیف خاکستری به صورت مقادیر مساوی از هر سه منبع نوری تعریف می شود. مثل:

 در HTML می توان رنگ ها را به صورت کد هگزادسیمال نیز بیان کرد که شکل #RRGGBB بخود می گیرد؛ که در آن RR (قرمز)، GG (سبز) و BB (آبی) مقادیر هگزادسیمال بین 00 و FF می باشند (همانند دسیمال که بین 255-0 است). برای مثال، کد #FF0000 به صورت قرمز نمایش می یابد، زیرا رنگ قرمز آن به بالاترین مقدار (FF) ست شده است و سایر مقادیر به کمترین مقدار (00) ست شده است. در زیر چند مثال از کد رنگ هگزادسیمال آمده است. در این سیستم نیز طیف خاکستری به صورت مقادیر مساوی از هر سه منبع نوری تعریف می شود. مثل:

مقدار HSL

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

hsl(hue, saturation, lightness)

hue یا سایه رنگ میزان اعمال رنگ در یک چرخه صفر تا 360 درجه است. صفر رنگ قرمز، 120 رنگ سبز و 240 رنگ آبی است.

Saturation یا اشباع رنگ درصد اشباع بوده و صفر برای سایه خاکستری و 100 درصد برای رنگ کامل است.

lightness یا نور رنگ نیز به درصد بوده و از صفر برای سیاه تا 50% برای نه تاریک و نه روشن و 100% برای روشن کامل یا همان سفید می باشد.

 در HTML می توان با مشخص کردن میزان سایه، اشباع و نور رنگ، رنگ را مشخص کرد. دستور آن به صورت زیر می باشد: hue یا سایه رنگ میزان اعمال رنگ در یک چرخه صفر تا 360 درجه است. صفر رنگ قرمز، 120 رنگ سبز و 240 رنگ آبی است.  Saturation یا اشباع رنگ درصد اشباع بوده و صفر برای سایه خاکستری و 100 درصد برای رنگ کامل است. lightness یا نور رنگ نیز به درصد بوده و از صفر برای سیاه تا 50% برای نه تاریک و نه روشن و 100% برای روشن کامل یا همان سفید می باشد.

اشباع رنگ

اشباع رنگ (Saturation) را می توان به عنوان شدت رنگ توصیف کرد. اگر اشباع صد درصد باشد یعنی رنگ خالص است و هیچ سایه ای از خاکستری به آن اعمال نشده است.

اشباع 50% یعنی 50% سایه خاکستری به رنگ اعمال شده است و اشباع صفر درصد یعنی کاملا خاکستری و دیگر رنگ مشخص نیست.

 اشباع رنگ (Saturation) را می توان به عنوان شدت رنگ توصیف کرد. اگر اشباع صد درصد باشد یعنی رنگ خالص است و هیچ سایه ای از خاکستری به آن اعمال نشده است. اشباع 50% یعنی 50% سایه خاکستری به رنگ اعمال شده است و اشباع صفر درصد یعنی کاملا خاکستری و دیگر رنگ مشخص نیست.

میزان نور

میزان نور (lightness) رنگ به عنوان شفافیت و نوری است که به رنگ اعمال می شود و صفر به معنی سیاه (تاریک) و 50 میانه و 100 درصد یعنی سفید (روشن کامل) است.

 میزان نور (lightness) رنگ به عنوان شفافیت و نوری است که به رنگ اعمال می شود و صفر به معنی سیاه (تاریک) و 50 میانه و 100 درصد یعنی سفید (روشن کامل) است.

سایه خاکستری معمولا همراه اشباع و نور تعیین می شود و در دامنه صفر تا 100 درصد است و صفر برای روشن کامل و 100 درصد برای تاریک یا خاکستری است.

 سایه خاکستری معمولا همراه اشباع و نور تعیین می شود و در دامنه صفر تا 100 درصد است و صفر برای روشن کامل و 100 درصد برای تاریک یا خاکستری است.

مقدار RGBA

مقدار رنگ RGBA شاخه ای از رنگ RGB است که در آن کانال آلفا نیز مشخص می گردد. بدین معنی که میزان شفافیت رنگ تعیین می گردد. این مقدار به صورت زیر تعیین می شود:

rgba(red, green, blue, alpha)

پارامتر آلفا عددی بین صفر (کاملا مات) تا 1 (کاملا شفاف) متغیر است. هرچه مقدار آلفا بیشتر باشد، پس زمینه پشت رنگ بیشتر مشخص می گردد.

 مقدار رنگ RGBA شاخه ای از رنگ RGB است که در آن کانال آلفا نیز مشخص می گردد. بدین معنی که میزان شفافیت رنگ تعیین می گردد. این مقدار به صورت زیر تعیین می شود: پارامتر آلفا عددی بین صفر (کاملا مات) تا 1 (کاملا شفاف) متغیر است. هرچه مقدار آلفا بیشتر باشد، پس زمینه پشت رنگ بیشتر مشخص می گردد.

مقدار HSLA

مقدار رنگ HSLA شاخه ای از HSL است که کانال آلفا به آن اضافه شده است. مقدار رنگ HSLA به صورت زیر تعیین می شود:

hsla(hue, saturation, lightness, alpha)

پارامتر آلفا عددی بین صفر (کاملا مات) تا 1 (کاملا شفاف) متغیر است. هرچه مقدار آلفا بیشتر باشد، پس زمینه پشت رنگ بیشتر مشخص می گردد.

 مقدار رنگ HSLA شاخه ای از HSL است که کانال آلفا به آن اضافه شده است. مقدار رنگ HSLA به صورت زیر تعیین می شود پارامتر آلفا عددی بین صفر (کاملا مات) تا 1 (کاملا شفاف) متغیر است. هرچه مقدار آلفا بیشتر باشد، پس زمینه پشت رنگ بیشتر مشخص می گردد.

عضویت در خبرنامه پلکسا

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

با ما شریک شوید

با ما باشید

قابل توجه وبمسترها

وبمستر گرامی

در صورتی که به دنبال جذب بازدید کننده یا ارتقای رنکینگ سایت خود هستید، پیشنهاد می کنیم پلکسا را یک پست یا مطلب مهمان کنید. همانطور که برای سایت خود مطلب می نویسید، مطلب خود را آماده و کد نویسی کرده و در پلکسا منتشر کنید. پلکسا هیچگونه دخل یا تصرفی در پست شما نخواهد داشت.