مرجع کامل نام رنگ‌ها در CSS

مقدمه

هنگام تعیین رنگ‌ها در CSS معمولاً از فرمت‌هایی مانند HEX، RGB، RGBA، HSL و HSLA استفاده می‌کنیم. اما CSS روش ساده‌تر دیگری هم در اختیار ما قرار داده است: استفاده از نام رنگ‌ها (Color Keywords).

در CSS می‌توانید به جای نوشتن کد رنگ، مستقیماً از نام رنگ استفاده کنید:

color: tomato;
background-color: royalblue;
border-color: gold;

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

CSS از چند نام رنگ پشتیبانی می‌کند؟

استاندارد CSS از ۱۴۰ نام رنگ مختلف پشتیبانی می‌کند.

البته در لیست رسمی در مجموع ۱۴۷ نام مشاهده می‌شود، زیرا برخی رنگ‌ها دارای نام‌های تکراری هستند. برای مثال:

gray
grey

هر دو به یک رنگ اشاره می‌کنند.

علاوه بر رنگ‌های قدیمی، رنگ‌های معرفی‌شده در CSS3 و همچنین رنگ معروف rebeccapurple که در CSS Color Level 4 اضافه شده نیز در این مجموعه وجود دارند.

چرا از نام رنگ‌ها استفاده کنیم؟

استفاده از نام رنگ‌ها مزایای مختلفی دارد:

• خوانایی بیشتر کدها
• سرعت بالاتر در نمونه‌سازی اولیه (Prototype)
• یادگیری راحت‌تر برای افراد مبتدی
• کاهش نیاز به حفظ کردن کدهای HEX

برای مثال:

.button {
  background: tomato;
  color: white;
}

در مقایسه با:

.button {
  background: #FF6347;
  color: #FFFFFF;
}

خواندن و درک نسخه اول ساده‌تر است.

نمونه‌ای از رنگ‌های پرکاربرد CSS

رنگ‌های اصلی

رنگ‌های محبوب در طراحی رابط کاربری

رنگ‌های خنثی

رنگ‌های بنفش و صورتی

رنگ خاص rebeccapurple

یکی از معروف‌ترین رنگ‌های CSS، رنگ:

rebeccapurple

است که کد رنگ زیر را دارد:

#663399

این رنگ به یاد «ربکا مایر» (Rebecca Meyer)، دختر اریک مایر (یکی از چهره‌های شناخته‌شده دنیای CSS)، به استاندارد CSS اضافه شد و امروزه بخشی از CSS Color Level 4 محسوب می‌شود.

مثال استفاده در CSS

.card {
  background: aliceblue;
  border: 2px solid steelblue;
}

.title {
  color: darkslategray;
}

.button {
  background: tomato;
  color: white;
}

چه زمانی از Color Names استفاده کنیم؟

استفاده از نام رنگ‌ها برای موارد زیر مناسب است:

• پروژه‌های آموزشی
• نمونه‌سازی اولیه (Prototype)
• رنگ‌های استاندارد و رایج
• افزایش خوانایی کد

اما در پروژه‌های حرفه‌ای که از سیستم طراحی (Design System) استفاده می‌شود، معمولاً HEX یا HSL انتخاب دقیق‌تری هستند؛ زیرا کنترل بیشتری روی طیف رنگی فراهم می‌کنند.

جمع‌بندی

CSS به صورت پیش‌فرض از ۱۴۰ نام رنگ استاندارد پشتیبانی می‌کند که می‌توان از آن‌ها به جای مقادیر HEX، RGB یا HSL استفاده کرد. این قابلیت باعث می‌شود کدها خواناتر و توسعه سریع‌تر شود.

اگرچه در طراحی‌های حرفه‌ای معمولاً از سیستم‌های رنگی دقیق‌تر استفاده می‌شود، اما Color Names همچنان یکی از ساده‌ترین و کاربردی‌ترین روش‌های تعریف رنگ در CSS محسوب می‌شوند.

از همراهی شما با پارمین کلود متشکریم.