رنگ در HTML

قبلاً با ویژگی style ظاهر را عوض کردید و معنا را با قالب‌بندی و نقل‌قول علامت زدید. رنگ حال‌وهوا و خوانایی را شکل می‌دهد. در این مسیر مبتدی HTML، مقدارهای رنگ را داخل style تمرین می‌کنید: نامهای رایج، کد hex و تابع rgb(). سامانهٔ طراحی کامل بعداً در CSS می‌آید؛ اینجا خواندن و نوشتن درستِ شکل‌ها را یاد می‌گیرید.

مقدار رنگ HTML چیست؟

مقدار رنگ به مرورگر می‌گوید برای ویژگی CSS مثل color یا background-color کدام رنگ را به کار ببرد. همان شکل‌ها در style درون‌خطی و در stylesheet کار می‌کنند. مبتدی اول با سه شکل عملی روبه‌رو می‌شود: نام خوانا (tomato)، کد hex (#c0392b) و ترکیب rgb() مثل (rgb(192, 57, 43)). این‌ها می‌توانند یک فام را با املای متفاوت توصیف کنند.

پاسخ مستقیم

متن را با color و ناحیه پشت محتوا را با background-color تنظیم کنید. شکلی را انتخاب کنید که همان لحظه مناسب است: نام برای دموی سریع، hex وقتی از پالت کپی می‌کنید، یا rgb() وقتی کانال قرمز/سبز/آبی را از ۰ تا ۲۵۵ فکر می‌کنید. کنتراست را برای خواندن کافی نگه دارید. با رشد پروژه، رنگ‌های مشترک را به CSS ببرید نه اینکه attributeهای بلند را در هر صفحه تکرار کنید.

شکل مقدارها در یک نگاه

رنگ با نام

نام‌های رنگ دوست‌داشتنی‌ترین نقطهٔ شروع‌اند. رنگ متن و پس‌زمینه را جفت کنید تا واژه‌ها خوانا بمانند.

خواندن نمونه

• پاراگراف اول فقط رنگ متن را عوض می‌کند
• دومی هم پس‌زمینه و هم متن را می‌گذارد تا سرمه‌ای روی آبی روشن واضح بماند
• نام‌ها در CSS به بزرگی/کوچکی حروف حساس نیستند، ولی عادت lowercase روشن است
• هر واژهٔ رنگی انگلیسی نام معتبر CSS نیست — به نام‌های رایجی کهتأیید کرده‌اید بچسبید

رنگ‌های hex

رنگ hex معمولاً با # شروع می‌شود و شش نویسه از 0–9 و a–f دارد. جفت‌ها یعنی قرمز، سبز و آبی. #000000 سیاه است؛ #ffffff سفید. لازم نیست کاتالوگ حفظ کنید — از پالت بردارید و با دقت بچسبانید.

نکته‌های hex

• # را نگه دارید — در شکل این درس 336699 خالی با #336699 یکی نیست
• فقط رقم hex معتبر؛ حروف تا f
• hex سه‌رقمی در CSS هست (#333)، ولی در این مرحله کد شش‌رقمی کافی است
• کپی/پیست را دوباره چک کنید تا رقم جاافتاده بی‌صدا خراب نکند

رنگ‌های rgb()

تابع rgb() قرمز، سبز و آبی را با عدد ۰ تا ۲۵۵ مخلوط می‌کند. rgb(255, 0, 0) قرمز خالص است. وقتی یک کانال را جدا تنظیم می‌کنید این شکل مفید است.

وصل کردن شکل‌ها

یک فام اغلب هم با نام، هم hex و هم rgb نوشته می‌شود. در هر دمو یک شکل بردارید تا چشم نحو را یاد بگیرد. جلوتر در CSS نمادهای دیگر هم می‌آید؛ این سه تا تمرین اولیه HTML را پوشش می‌دهند.

کنتراست و خوانایی

رنگ معتبر هنوز می‌تواند انتخاب بدی باشد. متن زرد روشن روی سفید ممکن است درست پارس شود و هنوز سخت خوانده شود. وقتی هم color و هم background-color می‌گذارید، ببینید متن برجسته است. در سایت واقعی کنتراست بخشی از دسترس‌پذیری است — عادت را از همین دموهای کوچک شروع کنید.

تمرین در ویرایشگر

1. زیر یک تیتر سه پاراگراف کوتاه بسازید.
2. متن اول را با نام رنگ کنید (teal یا مشابه).
3. متن دوم را با مقدار hex رنگ کنید.
4. به سومی background-color با rgb() بدهید و اگر لازم است color تیره برای کنتراست بگذارید.
5. ذخیره و تازه کنید. تأیید کنید هر شکل کار می‌کند.
6. عمداً یک hex را خراب کنید (حذف یک رقم)، تازه کنید، درستش کنید — نحو دقیق را تمرین می‌کند.

اشتباهاتی که رنگ را پنهان یا ضعیف می‌کنند

• قاطی کردن color (متن) با background-color (پشت متن)
• نوشتن #33، #gggggg یا hex بدون # وقتی منظورتان کد شش‌رقمی است
• ترکیب کم‌کنتراست که «استایل‌دار» به نظر می‌رسد ولی خواندنش سخت است
• ساخت کل تم برند فقط با تکرار style درون‌خطی به‌جای یادگیری CSS مشترک بعدی
• فرض اینکه هر واژهٔ رنگی انگلیسی نام معتبر CSS است بدون بررسی

خلاصه

• برای دموی سریع رنگ از color و background-color در style استفاده کنید
• مقدارها: نام، hex (#RRGGBB) یا rgb(r, g, b)
• جفت‌های hex به قرمز، سبز، آبی نگاشت می‌شوند؛ کانال‌های rgb از ۰ تا ۲۵۵اند
• وقتی متن روی پس‌زمینه رنگی است کنتراست خوانا را ترجیح دهید
• با رشد صفحه و پروژه رنگ‌های مشترک را به CSS ببرید
• با ذخیره و تازه‌سازی چک کنید؛ وقتی رنگ «هیچ کاری نمی‌کند» نحو را دقیق درست کنید