HTML Colors

در ادامه مبحث رنگ ها در HTML به معرفی و توضیح روش دوم استفاده از رنگ می پردازیم.

۲- Color Values

در HTML رنگ ها می توانند با استفاده از مقادیر RGB، مقادیر HEX، مقادیر HSL، مقادیر RGBA و مقادیر HSLA مشخص شوند. بعنوان مثال در کد پایین، نام رنگ “Tomato “، با استفاده از color value به کار برده شده است.

به کد زیر و خروجی آن دقت کنید:

RGB Value

هر پارامتر (قرمز، سبز و آبی) شدت رنگ را بین ۰ تا ۲۵۵ تعریف می کند.

به عنوان مثال، rgb (255، ۰، ۰) به صورت قرمز نمایش داده می شود، چرا که قرمز به بالاترین مقدار آن (۲۵۵) و دیگران به ۰ تنظیم شده است.

برای نمایش رنگ سیاه، تمام پارامترهای رنگ باید به ۰ تنظیم شود، مانند این: (rgb (0، ۰، ۰٫

برای نمایش رنگ سفید، تمام پارامترهای رنگ باید به ۲۵۵ تنظیم شود، مانند این: rgb (255)، ۲۵۵، ۲۵۵٫

به کد زیر و خروجی آن دقت کنید:

HEX Value

در HTML، یک رنگ را می توان با استفاده از مقدار هگزادسیمال در فرم rrggbb# مشخص کرد. که مقادیر rr که مربوط به رنگ قرمز، gg مربوط به رنگ سبز و bb مربوط به رنگ آبی می باشد با هگزادسیم بین ۰۰ و ff جایگزین می شود. (همانند decimal 0-255).

به کد زیر و خروجی آن دقت کنید:

به عنوان مثال، در کد بالا ff0000# به رنگ قرمز نمایش داده می شود، زیرا قرمز به بالاترین مقدار (ff) تنظیم شده است و دیگران به کمترین مقدار (۰۰) تنظیم شده اند.

HSL Value

در HTML، رنگ را می توان با استفاده از سه فاکتور (huesaturationlightness) نیز مشخص کرد:

hue یک درجه در چرخه رنگ از ۰ تا ۳۶۰ است. ۰ قرمز است، ۱۲۰ رنگ سبز است و ۲۴۰ آبی است.

saturation به معنای یک مقدار درصدی است ، ۰٪ به معنای سایه خاکستری است و ۱۰۰٪ رنگ کامل است.

lightness نیز به معنای یک مقدار درصدی است ، ۰٪ سیاه است، ۵۰٪ نه روشن و نه تاریک است، ۱۰۰٪ سفید است.

به کد زیر و خروجی آن دقت کنید:

Saturation


Saturation را می توان به عنوان شدت یک رنگ تعریف کرد. ۱۰۰٪ رنگ خالص است، بدون سایه ای از رنگ خاکستری، ۵۰٪ یعنی ۵۰% از رنگ خاکستری ، اما شما هنوز هم می توانید رنگ را ببینید و ۰٪ به طور کامل خاکستری است، شما دیگر نمی توانید رنگ را ببینید.

به کد زیر و خروجی آن دقت کنید:

این پست ادامه دارد…

معرفی HTML – جلسه هشتم
Tagged on:                             

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *