آموزش HTML – فصل هفتم: استفاده از رنگ ها

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

آموزش HTML – فصل هفتم: استفاده از رنگ ها

استفاده از رنگ ها در اچ تی ام ال

رنگ های اچ تی ام ال به وسیله اسم رنگ از پیش تعریف شده یا مقدار های RGB HEX HSL RGBA HSLA مشخص میشوند. به طور کامل به توضیح هر کدام از این روش های استفاده از رنگ خواهیم پرداخت.

اما بهتر است در ابتدا بگوییم که چگونه می شود متن ها را رنگی کرد و یا از پس زمینه رنگی برای المانی استفاده کرد؟

شما در خاصیت style هر المان می توانید از دستور های مربوط به رنگ CSS استفاده کنید. در پایین توضیحات کامل در این مورد ارائه شده است.

استفاده از رنگ پس زمینه Background Color

شما میتوانید برای المان های اچ تی ام ال رنگ پس زمینه بگذارید.

مثل این متن.

مثال استفاده از رنگ پس زمینه با استفاده از background-color در اچ تی ام ال:



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

رنگ کردن متن ها در HTML

شما می توانید با استفاده از property سی اس اس color در خاصیت style المان مورد نظر، رنگ نوشته های آن را تغییر دهید.

با استفاده از همین قابلیت، این متن آبی است.



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

تعیین رنگ خط حاشیه المان ها با استفاده از Border Color

شما میتوانید با استفاده از border-color در خاصیت استایل می توانید رنگ حاشیه المان ها را مشخص کنید.

البته border نیز یک property سی اس اس است که همزمان می تواند نوع، رنگ و اندازه خط حاشیه المان ها را مشخص کند. در مثال های زیر از border استفاده شده است.

برای مثال:



حالا که استفاده از رنگ ها را آموختید، بیشتر توضیح می دهیم که چه مقادیری را می توانید در این property ها سی اس اس استفاده کنید.

استفاده از رنگ، با نوشتن نام رنگ ها

در اچ تی ام ال یک رنگ را میتوان بوسیله اسم آن رنگ مشخص کرد:



اچ تی ام ال از 140 اسم استاندارد رنگ استفاده میکند.

استفاده از مقدار RGB در اچ تی ام ال برای تعیین رنگ

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

در ار جی بی سه مقدار وجود دارد R قرمز، G سبز، B آبی که شدت و غلظت هر کدام بین مقادیر 0 تا 255 است. با ساختار RGB(RED,GREEN,BLUE) کل رنگ آر جی بی مشخص می شود.

برای مثال rgb(255, 0, 0) به شکل قرمز نشان داده میشود چون در آن مقدار قرمز به حداکثر خودش نمایش داده میشود و بقیه مقدار های سبز و آبی 0 است.

برای نمایش دادن رنگ سیاه تمام مقادیر باید به 0 تنظیم شوند بدین صورت:  rgb(0, 0, 0)

و برای نمایش دادن رنگ سفید تمام مقادیر رنگی باید به روی 255 تنظیم شوند.

با تلفیق مقادیر زیر، رنگ های مختلف را آزمایش کنید.



درجه های خاکستری با قرار دادن مقدار های مساوی برای هر سه منبع نور قرمز و سبز و آبی مشخص میشوند.



استفاده از مقدار رنگی HEX در اچ تی ام ال

در اچ تی ام ال رنگ ها را میتوان در قالب اعداد شانزده تایی نشان داد به صورت : #RRGGBB که آر قرمز است و جی سبز و بی آبی میباشد و مقادیر شانزده تایی هر کدام از رنگ ها مابین 00 و FF که همان 0 و 255 در قالب شانزده تایی هستند مشخص میشود.

برای مثال #FF0000 به رنگ قرمز نمایش داده میشود که در آن مولفه ی قرمز به حد اکثر خود تنظیم شده است و دیگر رنگ ها صفر بوده و نوری ندارند.



درجه های خاکستری هم اغلب با تنظیم مقادیر مساوی برای هر سه منبع نور مشخص میشوند.



استفاده از مقدار HSL برای تعیین رنگ در اچ تی ام ال

در اچ تی ام ال رنگ را میتوان با مقادیر فام HUE غلظت SATURATION و روشنایی LIGHTNESS که همان مولفه های HSL هستند تنظیم کرد.

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



فام یا همان HUE یک درجه بر روی چرخ رنگ هاست که از 0 تا 360 است.

0 همان رنگ قرمز است و120 سبز بوده و 240 آبی است.

غلظت یک مقدار درصدی است 0 یک درجه از خاکستری است و 100 درصد رنگ کامل میباشد.

روشنایی نیز یک درصد است 0 همان سیاه بوده 50 چیزی مابین سیاه و سفید است و در آخر 100 سفید می باشد.



غلظت Saturation در رنگ های HSL اچ تی ام ال

غلظت یا همان SATURATION را میتوان شدت رنگ گفت.

100% رنگ خالص را نمایش میدهد 50 نیمی خاکستری و نیمی رنگ را میتوان دید و در 0 فقط یک درجه از خاکستری نمایان است و دیگر رنگی را نمیتوان دید.

مثال:



روشنایی Lightness در رنگ های HSL اچ تی ام ال

روشنایی یک رنگ وقتی تعریف میشود که شما چه مقدار میخواهید نور به رنگ بدهید همانطور که گفتیم در حداقل این مقدار سیاهی را داریم و در حداکثر سفیدی و در این میان رنگ روشنایی مورد نظر را میگیرد.

مثال:



درجه های خاکستری اغلب با قرار دادن مولفه ی غلظت به روی 0 و تنظیم روشنایی برای به دست آوردن درجات روشن تر یا تیره تری از خاکستری تعریف میشوند.

مثال:



رنگ های RGBA در زبان HTML

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

یک مقدار رنگی RGBA به صورت rgba(red, green, blue, alpha) نوشته میشود که مولفه ALPHA یک عدد بین 0.0 تا 1.0 است که هر چه مقدار کمتر باشد رنگ شفاف تر و هر چه به یک نزدیک تر باشد رنگ کدر نمایش داده میشود.

مثال استفاده از رنگ های دارای شفافیت:



رنگ HSLA در زبان HTML

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

hsla(hue, saturation, lightness, alpha)

مولفه ALPHA یک عدد بین 0.0 تا 1.0 است که هر چه مقدار کمتر باشد رنگ شفاف تر و هر چه به یک نزدیک تر باشد رنگ کدر نمایش داده میشود.

مثال:



در ادامه آموزش گام به گام زبان HTML، مطلب آموزش HTML – فصل هشتم: استفاده از CSS را مطالعه کنید.

ویدیوها و مطالب مشابه