تو جلسه های قبلی دیدیم چجوری میشه به یه المان ویژگی style بدیم و داخل اون چجوری میتونیم رنگ بدیم به بک گراند یا خود نوشته متن . حالا میخوایم یکم بیشتر در مورد رنگ ها توضیح بدیم . رنگ های در HTML و CSS کلا چند حالت بیشتر نوشته نمیشه. یکی از روش های : 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
استفاده از این رنگ ها در خروجی کار هیچ فرقی باهمدیگه ندارن! برمیگرده به استفاده طراحان گرافیک از کدهای رنگی. مثلا بعضی طراحان میان از کدهای رنگی RGB استفاده میکنن که میشه همون قرمز سبز و آبی خودمون که تمام رنگ ها با این رنگ ها ساخته میشه . اگه از رنگ های RGB استفاده کنیم باید از عددهای ۰ تا ۲۵۵ استفاده کنیم برای هر رنگ. مثلا اگه بخوایم رنگ قرمز رو فقط داشته باشیم و هیچ رنگ دیگه ای داخلش نباشه از آبی یا سبز از این ترکیب باید استفاده کنیم : rgb(255,0,0)
بعضی ها هم میان از کدهای HEX استفاده میکنن که این مورد رو بیشتر میبینین توی سایت ها. با علامت # نوشته میشن و هر کدوم اشاره به یک رنگ خاصی میکنن. برای استفاده از این کد رنگ های HEX هم نیخواد چیزی رو حفظ کنین ! توی دوره های طراحی گرافیک بی اس دیزاین کامل بهتون میگیم. فقط برای استفاده خودتون این دو تا رو بلد باشین که کد #000 برای رنگ سیاه استفاده میشه و کد #fff برای رنگ سفید ! همین .
حالت آخر استفاده از رنگ های HSL هستش . اولی RGB میشه استفاده از ترکیب رنگ قرمز سبز و آبی و رنگ های HSL هم میشه Hue, Saturation و Lightness . که توی طراحی گرافیک استفاده میشه این ها و با استفاده از سه معیار میتونیم تمام رنگ ها رو بسازیم .
حالا اون دو تا دیگه چه فرقی با این کد رنگ ها دارن !؟ RGBA, HSLA !؟ بعضی جاها ما میایم رنگ استفاده میکنیم ولی باید Opacity بدیم بهش . یعنی زیر اون رنگ معلوم باشه ! مثلا میایم رنگ مشکی استفاده میکنیم و زیر اون رنگ هیچی معلوم نیست ولی بعدش که میایم opacity ۵۰ درصد میدیم بهش زیر اون المان که رنگ مشکی دادیم معلوم میشه . در کل همین ! در زیر چند تا مثال استفاده از این رنگ ها رو آوردیم براتون:
<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>
