آموزش کار با رنگ ها یا Colors در HTML

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کار با رنگ ها یا Colors در HTML با من همراه باشید.

آموزش کار با رنگ ها یا Colors در HTML

Free-Learn

کار با رنگ ها یا Colors در HTML

در این بخش میخواهیم با نحوه استفاده از رنگ ها یا به انگلیسی Colors در HTML و اینکه از چه روش هایی میتوانیم از رنگ ها در HTML استفاده نماییم،آشنا شویم. لطفا در ادامه با من همراه باشید.

دوستان عزیز و محترم سایت آموزشی فری لرن ، آموزش کامل کار با رنگ ها، از جمله آموزش کامل انواع رنگ ها و انواع کدهای رنگ ها و.. را از منوی اصلی سایت بخش رنگ ها مشاهده نمایید.

لذا در این قسمت فقط بصورت خلاصه ما با انواع روش های رنگدهی و نحوه استفاده از این روش های در صفحات وب و بطور کلی در یک صفحه ی HTML آشنا خواهیم شد.

ما از چندین روش میتونیم از رنگ ها در HTML و یا CSS استفاده نمایم که این روش هارو در ادامه مشاهده خواهید نمود :

  • استفاده از نام رنگ | Color Name
  • استفاده از کد هگزادسیمال رنگ | HEX
  • استفاده از مقدار RGB رنگ | RGB Value

Free-Learn

نام رنگ یا Color Name

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

مثله موارد زیر :

background-color:red;

background-color:blue;

امتحان کنید

برای تولید رنگ سفید از نام white و برای تولید رنگ سیاه از نام black استفاده نمایید.

Free-Learn

مقدار هگزادسیمال رنگ یا HEX Value

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

شکل کلی یک مقدار هگزادسیمال بصورت زیر می باشد :

همانطور که مشاهده مینمایید این کد از ۶ مقدار تشکیل می شود، اول از هرچیز باید یک علامت شارپ یا # گذاشته سپس : rr یعنی محدوده رنگ (قرمز) – gg یعنی محدوده رنگ (سبز) و bb یعنی محدوده رنگ (آبی) که هر از این مقدارها میتوانند از ۰۰ تا FF باشند.

مثله موارد زیر :

background-color:#6AC239;

background-color:#9C27B0;

امتحان کنید

برای تولید رنگ سفید از مقدار fff# و برای تولید رنگ سیاه از مقدار ۰۰۰# استفاده نمایید.

Free-Learn

مقدار RGB رنگ یا RGB Value

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

همانطور که مشاهده مینمایید این مقدار از ۳ بخش تشکیل می شود: red (محدوده رنگ قرمز) – green (محدوده رنگ سبز) و blue (محدوده رنگ آبی) که هر کدام از این بخش ها میتوانند از ۰ تا ۲۵۵ مقدار بگیرند.

مثله موارد زیر :

background-color:rgb(255, 84, 14);

background-color:rgb(254, 251, 87);

امتحان کنید

برای تولید رنگ سفید باید تمام بخش ها مقدار ۲۵۵ و برای تولید رنگ سیاه تمام بخش ها مقدار ۰ بگیرند.


Free-Learn

  • خلاصه ی این بخش
  • در روش استفاده از نام رنگ، باید نام رنگ را وارد کرد، مثلا برای رنگ آبی باید بنویسیم blue و برای مثلا رنگ قرمز باید بنویسیم red و دیگر نام رنگ ها.
  • یک کد هگزادسیمال از ۶ مقدار تشکیل می شود، که هر کدام از این مقادیر میتوانند از ۰۰ تا FF مقدار بگیرند.
  • یک کد RGB از ۳ قسمت تشکیل می شود، که از هر کدام از این قسمت ها میتوانند از ۰۰ تا ۲۵۵ مقدار بگیرند.
  • دانلود PDF این آموزش
  • برای دانلود فایل PDF این آموزش کلیک نمایید