مرجع نام و شماره رنگ ها در CSS

مقدار رنگ در CSS مشخص می کند یک عنصر با چه رنگی نمایش داده شود. می توانید رنگ را با کد هگزادسیمال، مقادیر RGB یا HSL، نسخه های دارای شفافیت آن ها، یا نام های از پیش تعریف شده بنویسید. انتخاب روش به نیاز پروژه، میزان کنترل لازم و خوانایی کد بستگی دارد.

برای نمونه، ویژگی color رنگ نوشته را تعیین می کند و ویژگی background-color برای پس زمینه به کار می رود. در طراحی یک دکمه نیز می توانید رنگ متن، زمینه و حاشیه را جداگانه تعریف کنید. فهم تفاوت این روش ها کمک می کند رنگ ها را متناسب با نیاز رابط کاربری انتخاب کنید و در زمان نگهداری کد سردرگم نشوید.

رنگ فقط جنبه تزئینی ندارد؛ به راهنمایی کاربر، ایجاد سلسله مراتب بصری و انتقال پیام کمک می کند. رنگ اصلی برند ممکن است برای دکمه های مهم استفاده شود، در حالی که رنگ های خنثی برای پس زمینه و متن های فرعی مناسب تر هستند. در هر حالت باید کنتراست کافی و خوانایی نوشته ها را در نظر بگیرید.

برای مقدارهای ثابت و کوتاه، کد هگزادسیمال راهی رایج و فشرده است؛ برای تنظیم جداگانه کانال های قرمز، سبز و آبی می توان از RGB استفاده کرد. HSL نیز زمانی کاربردی است که بخواهید فام، شدت رنگ و روشنایی را مستقل از هم تغییر دهید. هر سه روش در مرورگرهای امروزی پشتیبانی می شوند، اما بهتر است در یک پروژه تا حد امکان از شیوه ای یکدست استفاده کنید.

به عنوان مثال، اگر در حال ساخت یک دکمه با رنگ اصلی برند هستید، HEX راهی روشن و قابل انتقال برای ثبت مقدار دقیق آن است. اگر بخواهید همان رنگ را کمی روشن تر یا کم رنگ تر کنید، HSL تغییرات را قابل فهم تر می کند. برای لایه ای که باید بخشی از محتوای زیر خود را نشان دهد، استفاده از مقدار دارای آلفا انتخاب کاربردی تری است.

یکدستی در شیوه نوشتن رنگ ها، پیدا کردن و اصلاح مقادیر را آسان می کند. در پروژه های تیمی می توانید رنگ های اصلی، فرعی، پس زمینه و وضعیت های تعاملی را در متغیرهای CSS نگه دارید تا تغییرات بعدی سریع تر انجام شوند.

کد هگزادسیمال معمولا با نماد # آغاز می شود و پس از آن سه جفت رقم برای قرمز، سبز و آبی می آید. هر جفت از 00 تا FF مقدار می گیرد. برای نمونه، #FF0000 قرمز و #000000 سیاه است. در قالب کوتاه سه رقمی، هر رقم برای یکی از کانال ها تکرار می شود؛ برای مثال #F00 معادل #FF0000 است.

HEX گزینه ای مناسب برای رنگ های ثابت در صفحه است، چون مقدار آن کوتاه و دقیق است و می توان آن را در فایل های CSS، راهنمای هویت بصری یا تنظیمات سیستم طراحی ثبت کرد. کدهای شش رقمی معمولا از شش نویسه پس از نماد مربع تشکیل می شوند؛ سه بخش دو رقمی به ترتیب شدت قرمز، سبز و آبی را مشخص می کنند.

برای مثال، اگر بخواهید رنگ آبی مشخصی را برای حاشیه یک کارت به کار ببرید، می توانید مقدار آن را مستقیم در ویژگی border قرار دهید. در پروژه ای که چندین رنگ برند دارد، ذخیره کردن کدهای HEX به صورت متغیر، از وارد کردن مقدارهای متفاوت و ناخواسته جلوگیری می کند.

در RGB سه عدد برای میزان قرمز، سبز و آبی نوشته می شود که در شکل متداول بین صفر و ۲۵۵ هستند. RGBA یک کانال چهارم برای شفافیت دارد؛ مقدار شفافیت معمولا از صفر، یعنی کاملا شفاف، تا یک، یعنی کاملا مات، تعیین می شود. این روش برای لایه های نیمه شفاف، سایه ها و پس زمینه هایی که باید محتوای زیرین از آن ها دیده شود، مفید است.

فرض کنید یک پیام اطلاع رسانی روی صفحه نمایش داده می شود و می خواهید پس زمینه آن کمی شفاف باشد تا زمینه صفحه کاملا پوشانده نشود. می توانید رنگ زمینه را با RGBA تعریف کنید. در نمونه زیر، رنگ متن با RGB و زمینه با RGBA مشخص شده است:

.notice {
  color: rgb(25, 60, 120);
  background-color: rgba(59, 130, 246, 0.15);
}

برای خوانایی بهتر کد، واحدها و شیوه نوشتن را در سراسر پروژه یکدست نگه دارید. همچنین شفافیت را با توجه به رنگ زمینه واقعی بررسی کنید؛ یک رنگ نیمه شفاف روی پس زمینه سفید ممکن است متفاوت از همان رنگ روی پس زمینه تیره دیده شود.

در قالب HSL، فام با درجه، اشباع و روشنایی با درصد مشخص می شود. پس از انتخاب فام می توانید با تغییر روشنایی، گونه های روشن تر یا تیره تر همان رنگ را بسازید. نسخه HSLA نیز امکان افزودن شفافیت را می دهد. این ویژگی برای طراحی مجموعه رنگ های هماهنگ، مانند رنگ اصلی دکمه و حالت های شناور یا غیرفعال آن، کاربردی است.

برای نمونه، اگر رنگ اصلی یک پیوند را مشخص کرده باشید، با ثابت نگه داشتن فام و تغییر روشنایی می توانید رنگی روشن تر برای پس زمینه یا رنگی تیره تر برای حالت فعال بسازید. در مقایسه با تغییر جداگانه سه کانال RGB، این روش در بسیاری از کارهای طراحی قابل درک تر است.

HSL به معنی فام، اشباع و روشنایی است. فام خانواده رنگ را مشخص می کند، اشباع شدت یا خلوص آن را نشان می دهد و روشنایی میزان روشنی یا تیرگی را تعیین می کند. این سه مؤلفه به طراح امکان می دهند بدون تغییر کامل خانواده رنگ، چند حالت سازگار ایجاد کند.

.button {
  background-color: hsl(207, 70%, 45%);
}

.button:hover {
  background-color: hsl(207, 70%, 38%);
}

CSS نام های رنگی شناخته شده ای مانند tomato، navy و rebeccapurple دارد. استفاده از نام ها در نمونه های ساده خوانایی خوبی دارد، اما برای تطبیق دقیق با رنگ برند، مقدار HEX یا تابع های رنگی مناسب تر است. در هر روش، تضاد متن و پس زمینه را بررسی کنید تا نوشته ها برای افراد بیشتری خوانا باشند.

نام رنگ برای نمونه های آموزشی یا موقعیت هایی که دقت برند اهمیت زیادی ندارد، راهی سریع و قابل فهم است. اما رنگی با نامی مشخص ممکن است با رنگ مورد نظر کسب و کار شما تفاوت داشته باشد. در این شرایط، بهتر است از مقدار دقیق رنگ استفاده کنید و آن را با راهنمای بصری پروژه تطبیق دهید.

کنتراست ضعیف می تواند خواندن متن را برای کاربران دشوار کند، حتی اگر ترکیب رنگ از نظر زیبایی جذاب به نظر برسد. متن، آیکون ها، دکمه ها و پیوندها باید از پس زمینه قابل تشخیص باشند. رنگ را تنها نشانه انتقال وضعیت قرار ندهید؛ برای پیام خطا یا موفقیت، متن و نشانه های واضح نیز در نظر بگیرید.

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

.card {
  color: navy;
  background-color: rgba(240, 248, 255, 0.9);
  border: 1px solid #6495ED;
}

در این مثال، مقدار navy برای نوشته، یک مقدار RGBA برای زمینه روشن و کد HEX برای حاشیه کارت استفاده شده است. هنگام بازبینی نتیجه، رنگ ها را در کنار محتوای واقعی صفحه ببینید. رنگی که به تنهایی زیبا به نظر می رسد ممکن است در ترکیب با متن یا اجزای دیگر وضوح کافی نداشته باشد.

جدول زیر چند نام رنگ استاندارد CSS، کد هگزادسیمال و کاربرد معمول آن ها را نشان می دهد. نام رنگ را می توان مستقیم در مقدار ویژگی های CSS نوشت؛ برای مثال color: tomato;. کد HEX نیز برای انتخاب دقیق تر و هماهنگ با راهنمای رنگ برند مناسب است. مربع کوچک کنار کد، نمونه تقریبی رنگ را نمایش می دهد.

نام های CSS برای سهولت در نمونه نویسی مفید هستند، اما به خاطر داشته باشید که بعضی نام ها از نظر ظاهری بسیار نزدیک به هم اند و انتخاب میان آن ها به کاربرد صفحه بستگی دارد. در طراحی نهایی، کد رنگ را کنار رنگ های دیگر پروژه بررسی کنید و مطمئن شوید که با رنگ های هویت بصری برند هماهنگ است.

هر قالب رنگی مزیت خاص خودش را دارد. HEX برای تعیین مقدار دقیق و کوتاه کاربردی است، RGB کانال های قرمز و سبز و آبی را جداگانه نمایش می دهد و RGBA امکان کنترل شفافیت را فراهم می کند. HSL نیز برای تنظیم فام و روشنایی گزینه ای قابل فهم است. جدول زیر کاربردهای رایج را کنار هم قرار می دهد.

انتخاب رنگ متن و پس زمینه باید با بررسی کنتراست همراه باشد. رنگی که روی نمایشگر طراح واضح به نظر می رسد، ممکن است روی صفحه ای دیگر یا در نور محیط متفاوت دیده شود. بنابراین رنگ ها را در اندازه های واقعی متن و در کنار اجزای رابط کاربری ارزیابی کنید، نه فقط در پنجره انتخاب رنگ.

برای نمونه، اگر متن خاکستری روشنی روی زمینه سفید قرار دهید، ظاهر صفحه ممکن است مینیمال باشد اما خواندن نوشته برای بسیاری از کاربران دشوار شود. در چنین شرایطی می توانید متن را تیره تر کنید یا از زمینه ای با روشنایی کمتر استفاده کنید. همین بررسی را برای دکمه ها، پیوندها، پیام های خطا و برچسب های فرم نیز انجام دهید.

رنگ به تنهایی نباید تنها راه انتقال معنا باشد. برای پیام خطا، علاوه بر رنگ قرمز، عنوان یا توضیحی روشن اضافه کنید؛ برای وضعیت موفقیت نیز از متن مشخص استفاده کنید. این کار به کاربرانی که تفاوت رنگ ها را به خوبی تشخیص نمی دهند کمک می کند پیام را دریافت کنند.

در پروژه های چندصفحه ای، تکرار کدهای رنگ در بخش های مختلف نگهداری و اصلاح را دشوار می کند. متغیرهای CSS این امکان را می دهند که رنگ های اصلی را در یک نقطه تعریف کنید و سپس در دکمه ها، پیوندها، پس زمینه ها و اجزای دیگر به کار ببرید. اگر رنگ برند تغییر کند، اصلاح مقدار متغیر می تواند جایگزین بازبینی دستی چندین فایل شود.

یک پالت ساده معمولا رنگ اصلی، رنگ متن، رنگ سطح یا پس زمینه و چند رنگ کاربردی برای وضعیت ها را در بر می گیرد. برای مثال، رنگ اصلی می تواند برای دکمه های مهم استفاده شود، در حالی که رنگ سطح زمینه کارت ها را مشخص می کند. بهتر است نام متغیرها کاربرد را توضیح دهد تا خواننده کد به جای حفظ کردن کد HEX بتواند منظور آن را بفهمد.

:root {
  --color-primary: #4169E1;
  --color-text: #193C78;
  --color-surface: #F0F8FF;
}

.button {
  color: #FFFFFF;
  background-color: var(--color-primary);
}

در نمونه بالا، متغیرهای رنگ در بخش :root تعریف شده اند و رنگ اصلی در پس زمینه دکمه استفاده می شود. این الگو برای پروژه هایی که اجزای تکرارشونده دارند مناسب است و به حفظ هماهنگی بصری کمک می کند. با این حال، نام گذاری متغیرها باید با نقش واقعی رنگ هماهنگ باشد تا تغییرات بعدی باعث سردرگمی نشود.

برای انتخاب مقدار رنگ، ابتدا کاربرد آن را مشخص کنید: رنگ متن باید خوانا باشد، رنگ پس زمینه بهتر است مزاحم محتوا نشود و رنگ دکمه باید از اجزای اطراف قابل تشخیص باشد. سپس یک روش متناسب با نیاز خود انتخاب کنید و آن را در بخش های مشابه سایت یکدست نگه دارید. بررسی رنگ در نمایشگرهای مختلف و توجه به کنتراست، تجربه بهتری برای کاربران ایجاد می کند.

برای مدیریت بهتر رنگ ها، می توانید مقادیر اصلی را در متغیرهای CSS ذخیره کنید. به این ترتیب، اگر در آینده رنگ برند یا پس زمینه تغییر کرد، لازم نیست مقدارهای پراکنده را جداگانه پیدا کنید. این شیوه همچنین از ایجاد تفاوت ناخواسته میان دکمه ها، پیوندها و بخش های مشابه جلوگیری می کند.

رنگ ها را در صفحه های کوچک و بزرگ و در کنار متن واقعی بررسی کنید. اگر یک عنصر تعاملی فقط با تغییر رنگ از سایر بخش ها متمایز می شود، شکل، عنوان یا نشانه بصری دیگری نیز برای تشخیص آن در نظر بگیرید. در پایان، مطمئن شوید که روش نوشتن رنگ ها با ساختار و نیاز پروژه هماهنگ است. مرجع نام و شماره رنگ ها در CSS زمانی بیشترین کاربرد را دارد که انتخاب رنگ به خوانایی، هویت بصری و هدف هر جزء صفحه کمک کند.