رنگ‌های CSS

مشخص کردن رنگ‌ها از طریق استفاده از نام‌های رنگ پیش‌تعریف شده، یا مقادیر RGB، HEX، HSL، RGBA، HSLA است.

نام‌های رنگ CSS

در CSS می‌توان از نام‌های رنگ برای مشخص کردن رنگ‌ها استفاده کرد:

Tomato
Orange
DodgerBlue
MediumSeaGreen
Gray
SlateBlue
Violet
LightGray

آزمایش کنید

CSS/HTML پشتیبانی می‌کند 140 نوع رنگ استاندارد。

رنگ پس‌زمینه CSS

می‌توانید رنگ پس‌زمینه HTML عناصر را تنظیم کنید:

به چین خوش آمدید
China is a great country!

مثال

<h1 style="background-color:DodgerBlue;">China</h1>
<p style="background-color:Tomato;">China is a great country!</p>

آزمایش کنید

رنگ متن CSS

می‌توانید رنگ متن را تنظیم کنید:

China

China is a great country!

China, officially the People's Republic of China, is a country in East Asia.

مثال

<h1 style="color:Tomato;">China</h1>
<p style="color:DodgerBlue;">China is a great country!</p>
<p style="color:MediumSeaGreen;">China, officially the People's Republic of China...</p>

آزمایش کنید

رنگ کناره CSS

می‌توانید رنگ لبه‌ها را تنظیم کنید:

Hello World
Hello World
Hello World

مثال

<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>

آزمایش کنید

مقدارهای رنگ CSS

در CSS می‌توان از مقادیر RGB، HEX، HSL، RGBA یا HSLA برای تعیین رنگ استفاده کرد:

با رنگ نام "Tomato" برابر است:

rgb(255, 99, 71)
#ff6347
hsl(9, 100%, 64%)

با رنگ نام "Tomato" برابر است اما شفافیت 50% دارد:

rgba(255, 99, 71, 0.5)
hsla(9, 100%, 64%, 0.5)
<h3>مثال</h3> 
<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>

آزمایش کنید

اطلاعات بیشتری درباره مقدارهای رنگ بدست آورید

در فصل بعد، شما خواهید آموخت که... RGBوHEX و HSL کمک بیشتری برای شما.