رنگ های CSS (CSS Colors): شروع سریع و کاربردی

در این صفحه با «رنگ های CSS» آشنا می شوید. شما می توانید رنگ را با نام های ازپیش تعریف شده یا با مقادیر RGB، HEX، HSL و نسخه های شفاف RGBA/HSLA تعریف کنید.

نام رنگ ها در CSS

می توانید از نام های استاندارد رنگ مانند tomato، orange یا dodgerblue استفاده کنید. این روش خوانا و سریع است.

h1 { color: tomato; }
p.note { background-color: dodgerblue; }

رنگ های CSS را با نام ها شروع کنید و سپس به مدل های عددی مهاجرت کنید.

پس زمینه (Background Color)

برای رنگ پس زمینه از ویژگی background-color روی هر عنصر استفاده کنید.

.hero { background-color: dodgerblue; }
.card { background-color: tomato; }

رنگ متن (Text Color)

ویژگی color رنگ متن را تعیین می کند. متن های تیتر و پاراگراف را جداگانه هدف بگیرید.

h1 { color: tomato; }
p.lead { color: mediumseagreen; }

رنگ حاشیه (Border Color)

با border می توانید رنگ خطوط دور عناصر را مشخص کنید.

.tag { border: 2px solid violet; }
.btn { border: 2px solid dodgerblue; }

مقادیر رنگ: RGB، HEX، HSL، RGBA، HSLA

همه این مدل ها یک رنگ واحد را نشان می دهند. نسخه های RGBA/HSLA شفافیت را نیز کنترل می کنند.

.sample-rgb { background-color: rgb(255,99,71); }
.sample-hex { background-color: #ff6347; }
.sample-hsl { background-color: hsl(9,100%,64%); }
.sample-rgba { background-color: rgba(255,99,71,0.5); }
.sample-hsla { background-color: hsla(9,100%,64%,0.5); }

نکته: برای رنگ های شفاف از RGBA/HSLA استفاده کنید تا کنترلی دقیق بر روی لایه بندی داشته باشید.

گام های بعدی درباره رنگ ها

جزئیات مدل ها را در صفحات جداگانه ادامه دهید: RGB، HEX و HSL. اگر با خطا روبه رو شدید، بخش ارورها و برای درج صحیح استایل ها صفحه نحوه استفاده را ببینید. برای دسترسی سریع، خود این صفحه با لنگر رنگ های CSS در دسترس است.

هشدار: خوانایی را فدای اختصار نکنید؛ نام های رنگ برای کنتراست ضعیف مناسب نیستند. در پروژه های جدی از مدل های عددی استفاده کنید و نسبت کنتراست را بسنجید.

برای آشنایی بیشتر با مقدارها، ویدیو و تمرین ها در ادامه فصل های رنگ قرار دارند.