رنگ ها در CSS

رنگها در CSS معمولا در فرمت های زیر تعریف می شوند :

یک نام رنگمعتبر - مانند : red
یک مقدار RGB - مانند : (255,0,0)rgb
یک مقدار HEX - مانند : ff0000 #
 

نام رنگ ها در CSS

رنگ ها با نام آنها تنظیم می شوند :

مثال :

رنگ
نام رنگ
 
قرمز
 
سبز
 
آبی
 
نارنجی
 
زرد
 
فیروزه ای
 
مشکی

نام رنگ ها
<h2 style="background-color:red">
رنگ زمینه قرمز</h2>

<h2 style="background-color:green">
رنگ زمینه سبز</h2>
مشاهده مثال

نکته ! نام رنگ ها به بزرگی و کوچکی حروف حساس نیستند : red و RED با هم برابرند.

مقدار RGB ( Red , Green , Blue)

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

مثال :

رنگ
نام رنگ
 
rgb(255,0,0)
 
rgb(0,255,0)
 
rgb(0,0,255)
 
rgb(255,165,0)
 
rgb(255,255,0)
 
rgb(0,255,255)
 
rgb(0,0,0)

مقدار RGB
<h2 style="background-color:rgb(255, 0, 0)">
تنظیم رنگ زمینه بر روی  rgb(255, 0, 0)
</h2>

<h2 style="background-color:rgb(0, 255, 0)">
تنظیم رنگ زمینه بر روی rgb(0, 255, 0)
</h2>
مشاهده مثال

سایه های مختلف سفید تا سیاه هم با استفاده از مقادیر مساوی برای هر سه رنگ اصلی ، به دست می آیند.

مثال :


رنگ ها

رنگ
RGB
 
rgb(0,0,0)
 
rgb(128,128,128)
 
rgb(255,255,255)

مقدار RGB برای سایه های خاکستری
<h2 style="background-color:rgb(128, 128, 128);color:white">
تنظیم رنگ زمینه بر روی rgb(128,128,128)
</h2>
مشاهده مثال

رنگ های هگزادسیمال

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

نکته ! مقادیر HEX به بزرگی و کوچکی حروف حساس نیستند. ff0000 همان FF0000 است.

مثال :

رنگ
HEX
 
FF0000
 
00FF00
 
0000FF
 
FFA500
 
FFFF00
 
00FFFF

مقدار HEX رنگ ها

تنظیم رنگ زمینه بر روی FFA500

تنظیم رنگ زمینه بر روی FFFF00

مشاهده مثال

سایه های سفید تا سیاه هم معمولا با تنظیم برابر مقدار هر سه رنگ ، به دست می آیند.

مثال :

رنگ
HEX
 
#000000
 
#808080
 
#FFFFFF

مقدار HEX سایه های خاکستری
<h2 style="background-color:#FFFFFF">
تنظیم رنگ زمینه بر روی FFFFFF
</h2>
مشاهده مثال

نظر شما

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران بپیوندید

   
   
عضویت
پیام تستی برای گروه نرم افزاری وب مهراز