100% کامل شده تا

رنگ‌ها در اچ‌تی‌ام‌ال (HTML Colors)

از موتو کد، دانشنامهٔ برنامه‌نویسی


رنگ‌های HTML با استفاده از نام رنگ‌های از پیش تعیین شده، یا با مقادیر RGB ,HEX ,HSL ,RGBA ,HSLA مشخص می‌شوند.[۱]


نام رنگ‌ها (Color Names)

در اچ‌تی‌ام‌ال، رنگ را می‌توان با استفاده از نام یک رنگ تعیین کرد:

Responsive demo.svg
اچ‌تی‌ام‌ال از ۱۴۰ نام رنگ استاندارد پشتیبانی می‌کند.


رنگ پیش‌زمینه (Background Color)

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

Responsive demo.svg

مثال

<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>

مثال

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:DodgerBlue;">Hello World</h1>

<p style="background-color:Tomato;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</p>

</body>
</html>



رنگ متن (Text Color)

می‌توانید رنگ متن را مشخص کنید:

Responsive demo.svg

مثال

<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>

مثال

<!DOCTYPE html>
<html>
<body>

<h3 style="color:Tomato;">Hello World</h3>

<p style="color:DodgerBlue;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

<p style="color:MediumSeaGreen;">Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

</body>
</html>



رنگ کادر (Border Color)

می‌توانید رنگ کادرها را مشخص کنید:

Responsive demo.svg

مثال

<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>

مثال

<!DOCTYPE html>
<html>
<body>

<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>

</body>
</html>



مقادیر رنگ (Color Values)

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

سه عنصر <div> زیر رنگ پس زمینه خود را با مقادیر RGB , HEX و HSL تنظیم کرده‌اند:

Responsive demo.svg

دو عنصر <div> زیر دارای رنگ زمینه با مقادیر RGBA و HSLA هستند که یک کانال آلفا را به رنگ اضافه می‌کند (در اینجا ۵۰٪ شفافیت داریم):

Responsive demo.svg
Responsive demo.svg

دربارهٔ ارزش‌های رنگ بیشتر بیاموزید

در فصل‌های بعدی اطلاعات بیشتری در مورد RGB ,HEX و HSL کسب خواهید کرد.

منابع آموزشی




به‌روزرسانی شده: ۳۷ روز پیش