HTML Colors
در ادامه مبحث رنگ ها در HTML به معرفی و توضیح روش دوم استفاده از رنگ می پردازیم.
۲- Color Values
در HTML رنگ ها می توانند با استفاده از مقادیر RGB، مقادیر HEX، مقادیر HSL، مقادیر RGBA و مقادیر HSLA مشخص شوند. بعنوان مثال در کد پایین، نام رنگ “Tomato “، با استفاده از color value به کار برده شده است.
به کد زیر و خروجی آن دقت کنید:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html> <body> <p>Same as color name "Tomato":</p> <h1 style="background-color:rgb(255, 99, 71);">rgb(255, 99, 71)</h1> <h1 style="background-color:#ff6347;">#ff6347</h1> <h1 style="background-color:hsl(9, 100%, 64%);">hsl(9, 100%, 64%)</h1> <p>Same as color name "Tomato", but 50% ( 0.5 ) transparent:</p> <h1 style="background-color:rgba(255, 99, 71, 0.5);">rgba(255, 99, 71, 0.5)</h1> <h1 style="background-color:hsla(9, 100%, 64%, 0.5);">hsla(9, 100%, 64%, 0.5)</h1> </body> </html> |
RGB Value
هر پارامتر (قرمز، سبز و آبی) شدت رنگ را بین ۰ تا ۲۵۵ تعریف می کند.
به عنوان مثال، rgb (255، ۰، ۰) به صورت قرمز نمایش داده می شود، چرا که قرمز به بالاترین مقدار آن (۲۵۵) و دیگران به ۰ تنظیم شده است.
برای نمایش رنگ سیاه، تمام پارامترهای رنگ باید به ۰ تنظیم شود، مانند این: (rgb (0، ۰، ۰٫
برای نمایش رنگ سفید، تمام پارامترهای رنگ باید به ۲۵۵ تنظیم شود، مانند این: rgb (255)، ۲۵۵، ۲۵۵٫
به کد زیر و خروجی آن دقت کنید:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html> <body > <h1 style="background-color:rgb(255, 0, 0);">rgb(255, 0, 0)</h1> <h1 style="background-color:rgb(0, 0, 255);">rgb(0, 0, 255)</h1> <h1 style="background-color:rgb(60, 179, 113);">rgb(60, 179, 113)</h1> <h1 style="background-color:rgb(238, 130, 238);">rgb(238, 130, 238)</h1> <h1 style="background-color:rgb(255, 165, 0);">rgb(255, 165, 0)</h1> <h1 style="background-color:rgb(106, 90, 205);">rgb(106, 90, 205)</h1> <p style="direction:rtl"> در HTML شما می توانید رنگ مورد نظر خودتان را با مقادیر <b>RGB</b> به وجود آورید.</p> </body> </html> |
HEX Value
در HTML، یک رنگ را می توان با استفاده از مقدار هگزادسیمال در فرم rrggbb# مشخص کرد. که مقادیر rr که مربوط به رنگ قرمز، gg مربوط به رنگ سبز و bb مربوط به رنگ آبی می باشد با هگزادسیم بین ۰۰ و ff جایگزین می شود. (همانند decimal 0-255).
به کد زیر و خروجی آن دقت کنید:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html> <body> <h1 style="background-color:#ff0000;">#ff0000</h1> <h1 style="background-color:#0000ff;">#0000ff</h1> <h1 style="background-color:#3cb371;">#3cb371</h1> <h1 style="background-color:#ee82ee;">#ee82ee</h1> <h1 style="background-color:#ffa500;">#ffa500</h1> <h1 style="background-color:#6a5acd;">#6a5acd</h1> <p style="direction:rtl">در HTML شما می توانید مقادیر مورد دلخواه خودتان را با استفاده از مقادیر Hex به وجود آورید.</p> </body> </html> |
به عنوان مثال، در کد بالا ff0000# به رنگ قرمز نمایش داده می شود، زیرا قرمز به بالاترین مقدار (ff) تنظیم شده است و دیگران به کمترین مقدار (۰۰) تنظیم شده اند.
HSL Value
در HTML، رنگ را می توان با استفاده از سه فاکتور (hue, saturation, lightness) نیز مشخص کرد:
hue یک درجه در چرخه رنگ از ۰ تا ۳۶۰ است. ۰ قرمز است، ۱۲۰ رنگ سبز است و ۲۴۰ آبی است.
saturation به معنای یک مقدار درصدی است ، ۰٪ به معنای سایه خاکستری است و ۱۰۰٪ رنگ کامل است.
lightness نیز به معنای یک مقدار درصدی است ، ۰٪ سیاه است، ۵۰٪ نه روشن و نه تاریک است، ۱۰۰٪ سفید است.
به کد زیر و خروجی آن دقت کنید:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html> <body> <h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1> <h1 style="background-color:hsl(240, 100%, 50%);">hsl(240, 100%, 50%)</h1> <h1 style="background-color:hsl(147, 50%, 47%);">hsl(147, 50%, 47%)</h1> <h1 style="background-color:hsl(300, 76%, 72%);">hsl(300, 76%, 72%)</h1> <h1 style="background-color:hsl(39, 100%, 50%);">hsl(39, 100%, 50%)</h1> <h1 style="background-color:hsl(248, 53%, 58%);">hsl(248, 53%, 58%)</h1> <p style="direction:rtl"> در HTML شما می توانید رنگ مورد علاقه خودتان را با استفاده از مقادیر HSL به وجود آورید.</p> </body> </html> |
Saturation
Saturation را می توان به عنوان شدت یک رنگ تعریف کرد. ۱۰۰٪ رنگ خالص است، بدون سایه ای از رنگ خاکستری، ۵۰٪ یعنی ۵۰% از رنگ خاکستری ، اما شما هنوز هم می توانید رنگ را ببینید و ۰٪ به طور کامل خاکستری است، شما دیگر نمی توانید رنگ را ببینید.
به کد زیر و خروجی آن دقت کنید:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <body> <h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1> <h1 style="background-color:hsl(0, 80%, 50%);">hsl(0, 80%, 50%)</h1> <h1 style="background-color:hsl(0, 60%, 50%);">hsl(0, 60%, 50%)</h1> <h1 style="background-color:hsl(0, 40%, 50%);">hsl(0, 40%, 50%)</h1> <h1 style="background-color:hsl(0, 20%, 50%);">hsl(0, 20%, 50%)</h1> <h1 style="background-color:hsl(0, 0%, 50%);">hsl(0, 0%, 50%)</h1> </body> </html> |
این پست ادامه دارد…