در HTML می توان رنگ ها را با استفاده از نام های از پیش تعریف شده برای رنگ ها، مقادیر RGB ، HEX ، HSL ، RGBA ، HSLA مقدار دهی کرد. در این فصل ما به آموزش رنگ ها در همهی حالت ها خواهیم پرداخت.
اسم رنگ ها
در HTML یک رنگ را می توان با اسم مخصوص به آن رنگ مشخص کرد:
| نام فارسی | نام انگلیسی | رنگ |
|---|---|---|
| گوجه ای | Tomato | |
| نارنجی | Orange | |
| نیلی | DodgerBlue | |
| خزه ای | MediumSeaGreen | |
| خاکستری | Gray | |
| آبی فولادی | SlateBlue | |
| بنفش روشن | Violet | |
| خاکستری روشن | LightGray |
رنگ پس زمینه
شما می توانید با استفاده از صفت background-color رنگ پس زمینه ای دلخواه برای عناصر HTML انتخاب کنید:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
مثال
<p style="background-color:Tomato;">Lorem ipsum...</p>
رنگ متن
شما می توانید با استفاده از صفت color رنگی دلخواه برای عناصر HTML انتخاب کنید:
Hello World
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
مثال
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>
رنگ حاشیه
شما می توانید با استفاده از صفت border رنگی دلخواه برای حاشیه عناصر HTML انتخاب کنید:
Hello World
Hello World
Hello World
مثال
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>
مقادیر رنگ ها در HTML
در HTML می توان رنگ ها را با استفاده از مقادیر RGB، مقادیر هگزادسیمال (HEX)، مقادیرHSL، مقادیر RGBA و مقادیر HSLA مشخص کرد:
در ادامه مثال هایی با رنگ یکسان گوجه ای برای هر یک از مقادیر بالا آورده شده است:
در مثال زیر از همان رنگ گوجه ای استفاده شده، اما 50 درصد شفاف تر:
مثال
<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>
مقدار RGB
در HTML یک رنگ را می توان با مقدار RGB با استفاده از این فرمول مشخص کرد: (rgb(red, green, blue.
به جای هر پارامتر (red, green, blue) عددی بین 0 تا 255 قرار می گیرد.
به عنوان مثال، (rgb(255, 0, 0 رنگ قرمز را نشان می دهد، زیرا رنگ قرمز روی بالاترین مقدار آن روی 255 تنظیم شده و مقدار بقیه پارامترها روی صفر قرار داده شده است.
برای نمایش رنگ سیاه باید تمام پارامترها با عدد 0 مقدار دهی شوند، اینگونه: (rgb(0, 0, 0.
برای نمایش رنگ سفید باید تمام پارامترها با عدد 255 مقدار دهی شوند، اینگونه: (rgb(255, 255, 255.
در مثال زیر چند رنگ با مقدار RGB مقدار دهی شده اند:
مثال
سایه های خاکستری اغلب با قرار دادن مقادیر مساوی به جای هر سه پارامتر تعریف می شوند:
مثال
مقدار هگزادسیمال
در HTML یک رنگ را می توان با مقدار هگزادسیمال به این صورت تعریف کرد:
#rrggbb
که در آن rr (قرمز)، gg (سبز) و bb (آبی) مقادیر هگزادسیمالی بین 00 تا ff (به صورت تقریبی مشابه 255 حالت البته در مبنای 16) هستند.
سایه های خاکستری اغلب با قرار دادن مقادیر مساوی به جای هر سه پارامتر تعریف می شوند:
مقدار HSL
در HTML یک رنگ را می توان با مقدار HSL به این صورت تعریف کرد:
hsl(hue, saturation, lightness)
hue درجه ای از چرخه رنگ از 0 تا 360 است. 0 رنگ قرمز، 120 رنگ سبز و 240 رنگ آبی است.
مقدار saturation از جنس درصد است، 0% به معنای سایه خاکستری و 100% به معنای رنگ کامل است.
مقدار lightness نیز از جنس درصد است، 0% سیاه، 50% نه روشن و نه تاریک و 100% به معنای سفید است.
مثال
اشباع (saturation)
saturation را می توان به عنوان شدت یک رنگ توصیف کرد.
100% رنگ خالص است و سایه ای از خاکستری ندارد.
50% خاکستری است اما هنوز هم می توانید رنگ آن را ببینید.
0% کاملا خاکستری است و دیگر نمی توانید رنگ آن را ببینید.
مثال
روشنایی (lightness)
شما می توانید از lightness برای تنظیم میزان روشنایی رنگتان استفاده کنید. 0% به معنای تاریکی (سیاه)، 50% به معنای نه روشن و نه تاریک و 100% بع معنای کاملا روشن (سفید) است.
مثال
سایه های خاکستری غالبا با تنظیم hue و saturation روی عدد صفر مشخص می شوند و برای رسیدن به سایه های خاکستری تیره تر یا روشن تر lightness را از 0 تا 100 تنظیم می کنند:
مثال
مقدار RGBA
مقدار رنگ RGBA از همان فرمت RGB است با این تفاوت که این فرمت حاوی پارامتر آلفا (alpha) نیز هست که برای تعیین شفافیت رنگ کاربرد دارد.
مقدار رنگ RGBA در HTML به صورت زیر تعریف می شود:
rgba(red, green, blue, alpha)
پارامتر آلفا (alpha) عددی بین 0.0 (کاملا شفاف) و 1.0 (بسیار کدر) است:
مثال
مقدار HSLA
مقدار رنگ HSLA از همان فرمت HSL است با این تفاوت که این فرمت حاوی پارامتر آلفا (alpha) نیز هست که برای تعیین شفافیت رنگ کاربرد دارد.
مقدار رنگ HSLA در HTML به صورت زیر تعریف می شود:
hsla(hue, saturation, lightness, alpha)
پارامتر آلفا (alpha) عددی بین 0.0 (کاملا شفاف) و 1.0 (بسیار کدر) است:
