با عرض سلام خدمت کاربران سایت پی وی لرن . در این پست قصد داریم به آموزش نحوه کار با رنگ ها در HTML بپردازیم. تعریف و رنگ بندی تگ ها و بخش های یک وب سایت از مباحثی است که در جذابیت و زیبایی صفحه وب نقش بسیار مهمی دارد. صفحه وبی که دارای رنگ های متنوع و مرتبط نباشد، خسته کننده و کسل کننده است. در آموزش های قبلی چگونگی کار با تگ های Table , Div و تگ img را در صفحات html را توضیح دادیم. در ادامه این پست نیز به آموزش تعریف رنگ های html برای بخش های مختلف صفحه وب ،می پردازیم.
رنگ های html با استفاده از نام رنگ های از پیش تعریف شده یا RGB، HEX، HSL، RGBA، HSLA مشخص می شوند. رنگ ها در HTML می تواند با استفاده از نام آن رنگ مشخص شود:
1 2 3 4 5 6 7 8 | <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 را تنظیم کنید:
مثال:
1 2 | <h1 style="background-color:DodgerBlue;">Hello World</h1> <p style="background-color:Tomato;">Lorem ipsum...</p> |
شما همچنین می توانید ،رنگ متن ها را تعیین کنید:
مثال:
1 2 3 | <h1 style="color:Tomato;">Hello World</h1> <p style="color:DodgerBlue;">Lorem ipsum...</p> <p style="color:MediumSeaGreen;">Ut wisi enim...</p> |
می توانید برای border کادر دور عناصر html ، رنگ تعریف کنید
مثال:
1 2 3 | <h1 style="border:2px solid Tomato;">Hello World</h1> <h1 style="border:2px solid DodgerBlue;">Hello World</h1> <h1 style="border:2px solid Violet;">Hello World</h1> |
در HTML رنگها نیز می توانند با استفاده از مقادیر RGB، مقادیر HEX، مقادیر HSL، مقادیر RGBA و مقادیر HSLA مشخص شوند. همانند نام رنگ “Tomato” :
رنگ های فوق را می توان با شفافیت بیشتر نیز نشان داد :
مثال:
1 2 3 4 5 6 | <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> |
در HTML، یک رنگ را می توان به عنوان یک مقدار RGB تعریف کرد، با استفاده از این فرمول:
(rgb(red, green, blue
در فرمول بالا هر کدام از پارامتر های red , green , blue می تواند مقادیر بین ۰ تا ۲۵۵ را داشته باشد.
برای مثال مقدار (۰, ۰, ۲۵۵) رنگ قرمز را نمایش می دهد.
برای رنگ سیاه باید تمام پارامتر ها را به صفر تنظیم کنید مانند: (rgb(0, 0, 0.
برای رنگ سفید باید تمام پارامتر ها را به ۲۵۵ تنظیم کرد مانند: (rgb(255, 255, 255.
1 2 3 4 5 6 | <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> |
1 2 3 4 5 6 | <h1 style="background-color:rgb(0, 0, 0);">rgb(0, 0, 0)</h1> <h1 style="background-color:rgb(60, 60, 60);">rgb(60, 60, 60)</h1> <h1 style="background-color:rgb(120, 120, 120);">rgb(120, 120, 120)</h1> <h1 style="background-color:rgb(180, 180, 180);">rgb(180, 180, 180)</h1> <h1 style="background-color:rgb(240, 240, 240);">rgb(240, 240, 240)</h1> <h1 style="background-color:rgb(255, 255, 255);">rgb(255, 255, 255)</h1> |
مقدار HEX
در html می توان رنگ را بر مبنای Hex تعریف کرد مانند فرمول زیر:
rrggbb #
جایی که rr (قرمز)، gg (سبز) و bb (آبی) مقادیر هگزادسیمال بین ۰۰ و ff هستند (مانند دهدهی ۰-۲۵۵).
به عنوان مثال، # ff0000 به صورت قرمز نمایش داده می شود، زیرا قرمز به بالاترین مقدار (ff) و دیگران به پایین ترین مقدار (۰۰) تنظیم شده است.
مثال:
1 2 3 4 5 6 | <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> |
1 2 3 4 5 6 | <h1 style="background-color:#000000;">#000000</h1> <h1 style="background-color:#3c3c3c;">#3c3c3c</h1> <h1 style="background-color:#787878;">#787878</h1> <h1 style="background-color:#b4b4b4;">#b4b4b4</h1> <h1 style="background-color:#f0f0f0;">#f0f0f0</h1> <h1 style="background-color:#ffffff;">#ffffff</h1> |
1 2 3 4 5 6 | <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> |
Saturation در واقع به معنی شدت و کمیت یک رنگ است.
۱۰۰٪ رنگ خالص است، بدون سایه خاکستری.
۵۰٪ خاکستری است، اما شما هنوز هم می توانید رنگ را ببینید.
۰٪ به طور کامل خاکستری است، شما دیگر نمی توانید رنگ را ببینید.
1 2 3 4 5 6 | <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> |
Lightness یک رنگ را می توان به این صورت توضیح داد: مقدار روشنایی رنگ، که ۰٪ به معنای هیچ نوری (سیاه و سفید)، ۵۰٪ به معنای ۵۰٪ نور (نه تاریک و نه نور) ۱۰۰٪ به معنی نور کامل (سفید) توصیف می شود.
1 2 3 4 5 6 | <h1 style="background-color:hsl(0, 100%, 0%);">hsl(0, 100%, 0%)</h1> <h1 style="background-color:hsl(0, 100%, 25%);">hsl(0, 100%, 25%)</h1> <h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1> <h1 style="background-color:hsl(0, 100%, 75%);">hsl(0, 100%, 75%)</h1> <h1 style="background-color:hsl(0, 100%, 90%);">hsl(0, 100%, 90%)</h1> <h1 style="background-color:hsl(0, 100%, 100%);">hsl(0, 100%, 100%)</h1> |
در رنگ های خاکستری:
1 2 3 4 5 6 | <h1 style="background-color:hsl(0, 0%, 0%);">hsl(0, 0%, 0%)</h1> <h1 style="background-color:hsl(0, 0%, 24%);">hsl(0, 0%, 24%)</h1> <h1 style="background-color:hsl(0, 0%, 47%);">hsl(0, 0%, 47%)</h1> <h1 style="background-color:hsl(0, 0%, 71%);">hsl(0, 0%, 71%)</h1> <h1 style="background-color:hsl(0, 0%, 94%);">hsl(0, 0%, 94%)</h1> <h1 style="background-color:hsl(0, 0%, 100%);">hsl(0, 0%, 100%)</h1> |
مقادیر رنگ RGBA یک فرمت ارزش رنگی RGB با یک کانال آلفا است که کدورت را برای یک رنگ مشخص می کند.
مقدار رنگ RGBA با فرمت زیر تعیین می شود:
rgba(red, green, blue, alpha)
پارامتر alpha در فرمت فوق می تواند مقداری بین ۰٫۰ (بیشترین میزان شفافیت) و ۱٫۰ (بیشترین میزان شفافیت) را داشته باشد.
1 2 3 4 5 6 | <h1 style="background-color:rgba(255, 99, 71, 0);">rgba(255, 99, 71, 0)</h1> <h1 style="background-color:rgba(255, 99, 71, 0.2);">rgba(255, 99, 71, 0.2)</h1> <h1 style="background-color:rgba(255, 99, 71, 0.4);">rgba(255, 99, 71, 0.4)</h1> <h1 style="background-color:rgba(255, 99, 71, 0.6);">rgba(255, 99, 71, 0.6)</h1> <h1 style="background-color:rgba(255, 99, 71, 0.8);">rgba(255, 99, 71, 0.8)</h1> <h1 style="background-color:rgba(255, 99, 71, 1);">rgba(255, 99, 71, 1)</h1> |
مقدار HSLA شامل مقادیر نوع HSL به همراه یک پارامتر alpha که میزان شفافیت رنگ را مشخص می کند همراه است.
برای استفاده از مقادیر HSLA باید از فرمت زیر استفاده کرد :
hsla(hue, saturation, lightness, alpha)
پارامتر alpha در فرمت فوق می تواند مقداری بین ۰٫۰ (بیشترین میزان شفافیت) و ۱٫۰ (بیشترین میزان شفافیت) را داشته باشد.
1 2 3 4 5 6 | <h1 style="background-color:hsla(9, 100%, 64%, 0);">hsla(9, 100%, 64%, 0)</h1> <h1 style="background-color:hsla(9, 100%, 64%, 0.2);">hsla(9, 100%, 64%, 0.2)</h1> <h1 style="background-color:hsla(9, 100%, 64%, 0.4);">hsla(9, 100%, 64%, 0.4)</h1> <h1 style="background-color:hsla(9, 100%, 64%, 0.6);">hsla(9, 100%, 64%, 0.6)</h1> <h1 style="background-color:hsla(9, 100%, 64%, 0.8);">hsla(9, 100%, 64%, 0.8)</h1> <h1 style="background-color:hsla(9, 100%, 64%, 1);">hsla(9, 100%, 64%, 1)</h1> |
رنگ بندی تگ ها و بخش های یک وب سایت از مباحثی است که در جذابیت و زیبایی صفحات وب نقش بسیار مهمی دارد. و به نوعی باعث جذب کاربران بیشتر به وب سایت می شود. از این در این بخش به بررسی فرمت های مختلف رنگ ها در HTML پرداختیم.