رنگ ها (Colors)
در HTML می توانی «رنگ ها (Colors)» را با نام آماده یا با مقدارهای RGB/HEX/HSL و نسخه های شفاف RGBA/HSLA بنویسی. مثل انتخاب ماژیک برای دفتر، اما اینجا برای صفحه وب است.
نام رنگ ها (Color Names)
بعضی رنگ ها نام آماده دارند؛ مثل Tomato یا DodgerBlue. نوشتنشان ساده است و سریع می فهمی چه می شود. برای فهرست کامل نام ها به منبع مراجعه کن.
نکته: در منبع گفته شده 140 نام استاندارد پشتیبانی می شود.
رنگ پس زمینه (Background Color)
پس زمینه یک تگ را با style تنظیم کن. مانند کاردستی رنگی.
<h1 style="background-color:DodgerBlue;\n">Hello World</h1>
<p style="background-color:Tomato;\n">Lorem ipsum...</p>
رنگ متن (Text Color)
خود متن را هم می توانی رنگی کنی. مثل هایلایت روی جمله.
<h1 style="color:Tomato;\n">Hello World</h1>
<p style="color:DodgerBlue;\n">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;\n">Ut wisi enim...</p>
رنگ حاشیه (Border Color)
حاشیه دور عنصر هم رنگ می گیرد. مثل قاب دور عکس.
<h1 style="border: 2px solid Tomato;\n">Hello World</h1>
<h1 style="border: 2px solid DodgerBlue;\n">Hello World</h1>
<h1 style="border: 2px solid Violet;\n">Hello World</h1>
مقدارهای رنگ (Color Values)
می توانی رنگ را با RGB، HEX، HSL و نسخه های شفاف RGBA/HSLA بدهی. کانال آلفا (Alpha) یعنی شفافیت.
<h1 style="background-color:rgb(255, 99, 71);\n">...</h1>
<h1 style="background-color:#ff6347;\n">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);\n">...</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.5);\n">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);\n">...</h1>
گام های عملی
- یک عنصر ساده بساز؛ مثلاً <h1> یا <p>.
- ویژگی style را بنویس و یک رنگ نامی بده.
- حالا همان را با RGB یا HEX تکرار کن.
نکته: برای ادامه مبحث مقدارها، از صفحات رنگ های RGB، رنگ های HEX و رنگ های HSL استفاده کن. همچنین برای ظاهر کلی، صفحه استایل ها را ببین.
جمع بندی سریع
- نام رنگ ها ساده و سریع اند.
- RGB/HEX/HSL دقیق تر هستند.
- RGBA/HSLA شفافیت اضافه می کنند.
- متن، پس زمینه و حاشیه جداگانه رنگ می گیرند.
- استفاده زیاد ممکن است خوانایی را کم کند.