CSS از مقادیر رنگ برای تعیین رنگ استفاده شده در عناصر استفاده می‌کند. به طور معمول، این مقادیر برای تنظیم رنگ یا برای پس‌زمینه عنصر استفاده می‌شوند. همچنین می‌توانند برای تغییر رنگ حاشیه‌ها و اثرات تزئینی دیگر استفاده شوند.
می‌توانید مقادیر رنگ خود را در فرمت‌های مختلفی مشخص کنید. جدول زیر تمام فرمت‌های ممکن را لیست می‌کند:
-
کلمه کلیدی (Keyword): CSS دارای مجموعه‌ای از نام‌های رنگ از پیش تعیین شده است که می‌توانید مستقیماً استفاده کنید. برخی از این نام‌ها شامل
red،blue،green،yellow،black،whiteو غیره هستند. -
کد شش‌گانه دهدهی (Hexadecimal Code): شروع می‌شود با یک علامت هشتر (#) و پس از آن شش رقم دهدهی. مثال:
#FF0000– قرمز. -
کد دهدهی کوتاه (Short Hexadecimal Code): نسخه کوتاهتر از فرمت دهدهی، که هرکدام از مؤلفه‌های RGB توسط یک رقم واحد نمایش داده می‌شود، و مقدار تکرار می‌شود. مثال:
#F00– قرمز. -
RGB: رنگ‌ها می‌توانند با استفاده از تابع
rgb()تعریف شوند که سه پارامتر را نشان می‌دهد که مقادیر قرمز، سبز و آب را نمایش می‌دهد. مثال:rgb(0, 0, 255)– آبی. -
RGBA: شبیه به RGB است، با یک پارامتر اضافی برای مقدار آلفا (شفافیت). مقدار 0 (کاملاً شفاف) و 1 (کاملاً مات) است. مثال:
rgba(0, 0, 255, 0.5)– آبی نیمه شفاف. -
HSL: رنگ‌ها می‌توانند با استفاده از تابع
hsl()تعریف شوند که سه پارامتر را نشان می‌دهد که مقادیر رنگ، اشباع و روشنایی را نمایش می‌دهد. مثال:hsl(120, 100%, 50%)– سبز خالص. -
HSLA: مشابه HSL است، با یک پارامتر اضافی برای مقدار آلفا (شفافیت). مثال:
hsla(120, 100%, 50%, 0.5)– سبز نیمه شفاف. -
کلمه کلیدی currentcolor: به مقدار خواص رنگ عنصر ارجاع دارد. مثال:
color: red; /* رنگ متن قرمز */ border: 10px solid currentcolor; /* رنگ حاشیه قرمز */ -
رنگ سیستمی: بر اساس سیستم عامل یا مرورگر کاربر، CSS اجازه استفاده از رنگ‌های سیستمی تعریف شده توسط سیستم عامل یا مرورگر را می‌دهد. مثال:
ButtonText،Window،WindowTextو غیره.
این فرمت‌ها در بخش‌های بعدی به طور دقیق‌تر توضیح داده شده‌اند.
کلمه کلیدی (Keyword)
CSS از نام‌های رنگ برای ارسال به خاصیت‌های background-color و color پشتیبانی می‌کند. 140 نام استاندارد رنگ توسط CSS پشتیبانی می‌شود.
چند نمونه از این نام‌های رنگ در ادامه آورده شده است:
Black
Red
Blue
Green
Aquamarine
مثال:
<html>
<head>
<style>
#colorkeyword{
background-color: aqua;
padding: 10px;
}
</style>
</head>
<body>
<h3>نام رنگ - مثال</h3>
<p>زمانی که نام کلیدی aqua ارسال می‌شود، پس زمینه به رنگ آبی ظاهر می‌شود.</p>
<div id="colorkeyword">
این المان div دارای پس‌زمینه‌ای رنگی بر اساس نام کلیدی رنگ ارسال شده است، به عنوان مثال aqua.
</div>
</body>
</html>
در این مثال، زمینه div به رنگ آبی مشخص شده است که با استفاده از نام کلیدی aqua مشخص شده است.
کدهای شانزده‌گانه (Hexadecimal Codes)
کدهای شش‌گانه دهدهی (Hexadecimal Codes) یکی از روش‌های معمول برای نمایش رنگ در CSS است. این کدها شامل 6 حرف یا اعداد دهدهی هستند که با یک علامت هشتر (#) شروع می‌شوند. هر دو رقم یا حرف از این کدها مربوط به یکی از سه رنگ اصلی RGB (قرمز، سبز، آبی) می‌باشند.
در این کدها، دو رقم اول مربوط به میزان قرمز، دو رقم دوم مربوط به میزان سبز، و دو رقم سوم مربوط به میزان آبی است. هر رقم یا حرف می‌تواند مقادیری از 0 تا F را داشته باشد، که 0 نشان دهنده کمترین میزان و F نشان دهنده بیشترین میزان ممکن است. به عنوان مثال، مقدار FF0000 به رنگ قرمز مطابق می‌شود، زیرا میزان قرمز حداکثر است و سایر رنگ‌ها (سبز و آبی) صفر هستند.
این روش به شما امکان می‌دهد رنگ‌های دقیقی را بر اساس میزان سه رنگ اصلی RGB کنترل کنید. این یکی از روش‌های معمول برای انتخاب رنگ در طراحی وب است، زیرا امکان محاسبه دقیق رنگ مورد نیاز را فراهم می‌کند.
مثال:
<html>
<head>
<style>
.red-background {
background-color: #FF0000; /* Red */
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="red-background"></div>
</body>
</html>
در این مثال، یک مستطیل با عرض و ارتفاع 100 پیکسل و پس‌زمینه رنگ قرمز با استفاده از کد هشتگانه دهدهی #FF0000 تعریف شده است.
کدهای شانزده‌گانه کوتاه (Short Hexadecimal Codes)
کدهای شش‌گانه دهدهی کوتاه (Short Hexadecimal Codes) یک فرمت مختصرتر از کدهای شش‌گانه دهدهی معمولی در CSS است. این کدها شامل سه رقم یا حرف دهدهی هستند که با یک علامت هشتگانه (#) شروع می‌شوند.
در این کدها، هر رقم یا حرف معادل با دو رقم یا حرف در کدهای شش‌گانه دهدهی معمولی است. بنابراین، هر رقم یا حرف نماینده یک مقدار دو بایتی می‌باشد.
به عنوان مثال، کد #F00 برابر با #FF0000 است که رنگ قرمز را نشان می‌دهد. این کد کوتاهتر است و به ویژه در مواقعی که تنها یک رنگ از میزان قرمز استفاده می‌شود، مفید است.
استفاده از کدهای کوتاه به شما امکان می‌دهد که کدهای CSS خود را کوتاهتر کنید و کد بهتری را برای رنگ‌های مشخص که تنها یک میزان RGB غیر صفر دارند، ایجاد کنید.
مثال:
<html>
<head>
<style>
.green-text {
color: #0F0; /* Green */
}
</style>
</head>
<body>
<p class="green-text">This text is green.</p>
</body>
</html>
در این مثال، متنی با رنگ سبز با استفاده از کد هشتگانه دهدهی کوتاه #0F0 تعریف شده است.
مقادیر RGBA
مقادیر RGBA یک روش برای تعیین رنگ در CSS هستند که از چهار پارامتر تشکیل شده‌اند: قرمز (Red)، سبز (Green)، آبی (Blue) و آلفا (Alpha). سه پارامتر اول (RGB) به تعیین رنگ می‌پردازند و پارامتر چهارم (آلفا) به تعیین شفافیت رنگ می‌پردازد.
- مقدار قرمز (Red): این پارامتر میزان رنگ قرمز را تعیین می‌کند و می‌تواند بین 0 و 255 باشد.
- مقدار سبز (Green): این پارامتر میزان رنگ سبز را تعیین می‌کند و می‌تواند بین 0 و 255 باشد.
- مقدار آبی (Blue): این پارامتر میزان رنگ آبی را تعیین می‌کند و می‌تواند بین 0 و 255 باشد.
- مقدار آلفا (Alpha): این پارامتر میزان شفافیت رنگ را تعیین می‌کند و می‌تواند بین 0 و 1 باشد، که 0 بیانگر کاملاً شفاف و 1 بیانگر کاملاً مات است.
استفاده از مقادیر RGBA به شما اجازه می‌دهد تا رنگ دلخواه خود را با در نظر گرفتن شفافیت مورد نظر تعیین کنید. این بسیار مفید است برای ایجاد انواع اثرات شفافیت در وب سایت‌ها.
مثال:
<html>
<head>
<style>
.transparent-box {
background-color: rgba(255, 0, 0, 0.5); /* Red with 50% opacity */
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="transparent-box"></div>
</body>
</html>
در این مثال، یک مستطیل با عرض و ارتفاع 200 پیکسل و پس‌زمینه با رنگ قرمز (RGB: 255, 0, 0) و شفافیت 50% (آلفا: 0.5) تعریف شده است. این باعث می‌شود مستطیل قرمزی با شفافیت نیمه‌ای بسازد.
مقادیر HSL
مقادیر HSL در CSS یک روش دیگر برای تعیین رنگ‌ها هستند. HSL مخفف “Hue, Saturation, Lightness” است و این سه پارامتر را برای تعیین رنگ استفاده می‌کند:
- رنگ (Hue): این پارامتر مقدار زاویه از مدار رنگ را بر اساس یک مقیاس 360 درجه‌ای مشخص می‌کند. به عبارت دیگر، زاویه بر روی مدار رنگ مشخص می‌کند که رنگ مورد نظر در کجا قرار دارد. این زاویه می‌تواند از 0 تا 360 درجه باشد و هر مقدار متناظر با یک رنگ مشخص است (مانند قرمز، آبی، سبز و غیره).
- اشباع (Saturation): این پارامتر میزان اشباع رنگ را تعیین می‌کند. مقادیر بیشتر از 0 به معنی اشباع بیشتر و مقادیر نزدیک به 0 به معنی اشباع کمتر می‌باشند.
- روشنایی (Lightness): این پارامتر میزان روشنایی رنگ را تعیین می‌کند. مقادیر بیشتر از 50 به معنی روشن‌تر و مقادیر کمتر از 50 به معنی تاریک‌تر می‌باشند.
استفاده از مقادیر HSL به شما امکان می‌دهد تا رنگ‌های مختلف با در نظر گرفتن جنبه‌های مختلفی از رنگ مانند روشنایی و اشباع را تعیین کنید. این بسیار مفید است برای ایجاد انواع اثرات و انتخاب رنگ‌های هماهنگ در طراحی وب.
مثال:
<html>
<head>
<style>
.blue-background {
background-color: hsl(240, 100%, 50%); /* Blue with full saturation and 50% lightness */
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="blue-background"></div>
</body>
</html>
در این مثال، یک مستطیل با عرض و ارتفاع 200 پیکسل و پس‌زمینه با رنگ آبی (زاویه 240 درجه در مدار رنگ)، اشباع 100% و روشنایی 50% تعریف شده است. این باعث می‌شود یک مستطیل آبی با روشنایی متوسط و اشباع کامل ایجاد شود.
مقادیر HSLA
مقادیر HSLA در CSS مشابه مقادیر HSL هستند، با این تفاوت که یک پارامتر اضافی به نام “آلفا” (Alpha) اضافه شده است که شفافیت رنگ را تعیین می‌کند. این پارامتر آلفا مقداری بین 0 و 1 دارد که 0 نشان‌دهنده شفافیت کامل و 1 نشان‌دهنده عدم شفافیت (مات) است.
پارامترهای HSLA به شما امکان می‌دهند تا رنگ‌های مختلف با در نظر گرفتن جنبه‌های مختلفی از رنگ مانند روشنایی، اشباع و شفافیت را تعیین کنید. این بسیار مفید است برای ایجاد انواع اثرات و انتخاب رنگ‌های هماهنگ با طراحی وب.
مثال:
<html>
<head>
<style>
.semi-transparent-red {
background-color: hsla(0, 100%, 50%, 0.5); /* Red with full saturation, 50% lightness, and 50% opacity */
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="semi-transparent-red"></div>
</body>
</html>
در این مثال، یک مستطیل با عرض و ارتفاع 200 پیکسل و پس‌زمینه با رنگ قرمز (زاویه 0 درجه در مدار رنگ)، اشباع 100%، روشنایی 50% و شفافیت 50% تعریف شده است. این باعث می‌شود یک مستطیل با رنگ قرمز و شفافیت نصف ایجاد شود.
کلمه کلیدی currentcolor
کلمه کلیدی currentcolor به معنای مقدار ویژگی رنگ (color) یک عنصر است. این کلمه کلیدی می‌تواند به هر ویژگی استایل دیگری با استفاده از کلمه کلیدی currentcolor انتقال داده شود.
<html>
<head>
<style>
#currcolor {
color: red;
border: 5px solid currentcolor;
}
</style>
</head>
<body>
<h2>The currentcolor Keyword</h2>
<p>As the currentcolor keyword is used for border after color property is set as red, the border will also appear red.</p>
<div id="currcolor">
This div element has a red text color and a red border.
</div>
</body>
</html>در مثال ارائه شده، ابتدا رنگ متن به قرمز تنظیم شده است. سپس، ویژگی border با استفاده از کلمه کلیدی currentcolor تعیین شده است. در اینجا، currentcolor به عنوان رنگ خود متن که قرمز است، به ویژگی border منتقل شده است. بنابراین، حاشیه دایره قرمزی خواهد بود.
به عبارت دیگر، currentcolor که مقدار رنگ متن است، به عنوان مقدار رنگ حاشیه در نظر گرفته شده و به همین دلیل، رنگ متن و حاشیه دایره هر دو قرمز خواهند بود.
ویژگی‌های مرتبط (Related Properties)
در جدول زیر تمام ویژگی‌های مرتبط با رنگ در CSS آمده است:
- opacity: این ویژگی میزان شفافیت یک عنصر را تعیین می‌کند.
- hue: این ویژگی زاویه رنگ یک عنصر را نمایش می‌دهد.
- color: این ویژگی رنگ پیش‌زمینه متن و تزئینات متنی یک عنصر را تعیین می‌کند.
- background-color: این ویژگی رنگ پس‌زمینه یک عنصر را تعیین می‌کند.
- border-color: این ویژگی رنگ حاشیه یک عنصر را تعیین می‌کند.
- box-shadow: این ویژگی یک اثر سایه را دور یک عنصر ایجاد می‌کند.
- outline-color: این ویژگی رنگ خارجی یک عنصر را تعیین می‌کند.
- text-shadow: این ویژگی سایه به متن یک عنصر اضافه می‌کند.
این ویژگی‌ها به شما امکان می‌دهند تا رنگ‌های مختلفی را برای اجزای مختلف طراحی وب خود اعمال کنید و اثرات مختلفی از جمله سایه، شفافیت و رنگ‌های متفاوت را ایجاد کنید.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام