آموزش HTML به زبان ساده-قسمت هفتم:رنگ ها در HTML

---

انواع رنگ در HTML

در جلسه قبل با نحوه استایل دهی به عناصر مختلف آشنا شدید. مقدار برخی از استایل‌ها از نوع رنگ ها هستند. به طور مثال برای تعیین رنگ نوشته ها، از استایل color و برای تعیین پس زمینه یک عنصر از استایل background استفاده می‌کنیم. در HTML می‌توانید به چند روش از رنگ ها استفاده کنید که ما در اینجا فقط به عمده ترین و البته بهترین راه‌ها اشاره خواهیم کرد. در این آموزش ابتدا روش ساده‌ی استفاده از نام رنگ را آموزش خواهیم داد سپس به معرفی راه‌های پیچیده‌تر یعنی هگزا دسیمال و rgba خواهیم پرداخت.

راه اول: رنگ‌های رزرو شده

در HTML برخی از رنگ‌ها رزرو شده هستند و با نوشتن نام آن رنگ می‌توانیم از آن استفاده کنیم. این روش از ساده‌ترین راه‌های استفاده از رنگ‌ها در HTML است. برای این کار تنها کافیست نام رنگ را در جلوی استایل مورد نظر بنویسید. به طور مثال می‌توانید به درس قبلی رفته و نمونه‌های به کار رفته را دوباره بررسی کنید یا اینکه به جعبه کد‌های زیر توجه بفرمایید.

See the Pen yLBRqgr by amir (@amir5250) on CodePen.0

تعداد کد‌های رزرو شده HTML برابر 140 عدد است که یاد گرفتن آنها کاری بسیار دشوار است. به همین دلیل ما توصیه می‌کنیم از روش های دیگر که ذکر می‌کنیم استفاده نمایید. البته به منظور آشنایی بیشتر شما با رنگ های رزرو شده، نام تمام رنگ ها را در یک سند متنی آماده کرده‌ایم و با استفاده از دکمه زیر می‌توانید آن را بارگیری نمایید.

راه دوم: رنگ‌های هگزا دسیمال (rgb)

کلمه hexadecimal به معنی “شش ضلعی” می‌باشد. سه حرفی rgb برگرفته از کلمات red-green-blue است. باید بدانید که تمامی رنگ ها از ترکیب این سه رنگ بدست می‌آیند. در این سیستم رنگ دهی، هر رنگ دارای یک کد شش رقمی است که هر رقم آن می‌تواند یکی از مقادیر 0-9 و یا a-f را به خود اختصاص دهد. برای اینکه به مرورگر بفهانیم که این کد شش رقمی یک رنگ دسیمال است، باید در ابتدای این کد یک هشتگ ( # ) قرار دهیم. دو رقم اول این کد شش رقمی، تعیین کننده رنگ قرمز، دو رقم دوم تعیین کننده رنگ سبز و دو رقم آخر تعیین کننده رنگ آبی هستند.

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

با توجه به دو نکته بالا، کد 0000ff# به رنگ آبی روشن اشاره دارد. زیرا دو عدد اول این کد به صفر بودن رنگ قرمز و دو عدد دوم به صفر بودن رنگ سبز اشاره دارند. برای درک بهتر به جعبه کد‌های زیر توجه کنید.

See the Pen ZEzqMpB by amir (@amir5250) on CodePen.0

اما اگر از ویرایشگر DreamWeaver استفاده می‌کنید بهترین راه این است که پس از نوشتن ویژگی استایل یک فاصله ایجاد کنید تا یک نوار مانند تصویر زیر برای شما نمایش داده شود. حال روی گزینه پالت رنگ با عنوان (…color) کلیک کنید تا هر رنگی را که دوست دارید به سادگی انتخاب کنید.

راه سوم: استفاده از رنگ های rgba

چهار حرفی rgba برگرفته از کلمات red-green-blue-alpha است که کلمه alpha به میزان کدر(مات) بودن رنگ ایجاد شده اشاره دارد. به عنوان مثال اگر یک شیشه را در نظر بگیرید که آنسوی آن مشخص باشد، میزان کدر بودن این شیشه برابر صفر است. اما اگر همین شیشه را رنگ کنیم تا پشت آن قابل روئیت نباشد، در این صورت کدری این شیشه برابر 100% می‌شود.

در سیستم rgba هر رنگ می‌تواند یکی از مقادیر 0 تا 255 را به خود اختصاص دهد و همچنین مقدار عدد alpha باید بین 0 تا 1 باشد. که در این میان عدد 0 به معنای شفاف بودن کامل و عدد 1 به معنای مات بودن کامل رنگ است. ساختار کلی rgba به شکل زیر است:

rgba(red,green,blue,alpha)

هر چه مقدار عددی رنگ‌ها بزرگتر باشند به معنی روشن تر بودن آن رنگ است تا جایی که عدد 255 به سفید و عدد0 به رنگ سیاه اشاره دارد. برای درک بهتر به کد های زیر نگاه کنید.

See the Pen VwZgGEr by amir (@amir5250) on CodePen.0

اگر به کد های بالا نگاه کنید می‌بینید که رنگ ها چگونه تعیین می‌شوند. همچنین میزان کدر بودن پس زمینه خط دوم را برابر 0.7 قرار دادیم که این عدد به معنی 70% است.

اگر از ویرایشگر DreamWeaver استفاده می‌کنید می‌توانید مانند قسمت قبلی پالت رنگ‌ها را انتخاب کنید و این دفعه مانند تصویر زیر نوع رنگ را روی rgba قرار دهید. به تصویر زیر نگاه کنید.

در قسمت شماره چهار می‌توانید نوع سیستم رنگی را روی rgba یا hexadecimal قرار دهید. البته سیستم دیگری به نام HSLa نیز وجود دارد که زیاد مورد توجه برنامه نویسان نیست. و ما نیز آن را توضیح نخواهیم داد.

در قسمت شماره یک می‌توانید محدوده رنگ را انتخاب نمایید و با استفاده از قسمت شماره دو، به تعیین تاریکی یا روشنی آن رنگ بپردازید. قسمت شماره سوم نیز مربوط به opacity یا میزان کدر بودن رنگ است. این قسمت به مقدار alpha اشاره دارد.