رنگ های 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 در دسترس است.
هشدار: خوانایی را فدای اختصار نکنید؛ نام های رنگ برای کنتراست ضعیف مناسب نیستند. در پروژه های جدی از مدل های عددی استفاده کنید و نسبت کنتراست را بسنجید.
برای آشنایی بیشتر با مقدارها، ویدیو و تمرین ها در ادامه فصل های رنگ قرار دارند.