خانه / آموزش CSS / بخش چهارم-آموزش رنگ ها در CSS یا آموزش CSS Colors

مهندس فاطمه درخشان

تاریخ بروزرسانی: ۲۳ بهمن ۱۳۹۷ تعداد بازدید : 18 بازدید بدون دیدگاه

بخش چهارم-آموزش رنگ ها در CSS یا آموزش CSS Colors

قدم قبلی >

< قدم بعدی

CSS Colors

رنگ ها در CSS با استفاده از نام رنگ های پیش تعریف شده یا RGB، HEX، HSL، RGBA، HSLA مشخص می شوند.

نام رنگ

در HTML، رنگ با استفاده از نام رنگ مشخص می شود.

Tomato
Orange
Dodger Blue
Medium Sea Green
Gray
Slate Blue
Violet
Light Gray

HTML از ۱۴۰ نام رنگ استاندارد پشتیبانی می کند.

رنگ پس زمینه

شما می توانید رنگ پس زمینه برای عناصر HTML را تنظیم کنید به مثال زیر توجه کنید:

مثال:

<html>
<body>

<h1 style="background-color:DodgerBlue;">سلام روزتون بخیر</h1>

<p style="background-color:Tomato;">
روزتون پر انرژی و سرشار از احساسات زیبا </p>

</body>
</html>

<html>

<body>

<h1 style="background-color:DodgerBlue;">سلام روزتون بخیر</h1>

روزتون پر انرژی و سرشار از احساسات زیبا </p>

</body>

</html>

با اجرا کردن کد بالا نتیجه زیر را در خروجی خواهید دید:

رنگ متن

شما می توانید رنگ متن را تنظیم کنید به مثال زیر توجه کنید:

مثال:

<html>
<body>

<h3 style="color:Tomato;">نیمی از زندگی مان میشود صرفِ اینکه به آدمهای دیگر ثابت کنیم، ما چقدر خوشبختیم…

</h3>

<p style="color:DodgerBlue;">به آدمهایی که شاید خوشبختی برایشان تعریفِ دیگری دارد،حتی اگر واقعاً هم خوشبخت باشیم،

</p>

<p style="color:MediumSeaGreen;">اما همین خودنمایی، ما را تبدیل میکند به بدبخت ترین آدمِ روی زمین!

</p>

</body>
</html>

<html>

<body>

<h3 style="color:Tomato;">نیمی از زندگی مان میشود صرفِ اینکه به آدمهای دیگر ثابت کنیم، ما چقدر خوشبختیم…

</h3>

<p style="color:DodgerBlue;">به آدمهایی که شاید خوشبختی برایشان تعریفِ دیگری دارد،حتی اگر واقعاً هم خوشبخت باشیم،

</p>

<p style="color:MediumSeaGreen;">اما همین خودنمایی، ما را تبدیل میکند به بدبخت ترین آدمِ روی زمین!

</p>

</body>

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

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

با اجرا کردن کد بالا نتیجه زیر را در خروجی خواهید دید:

ارزش گزاری رنگ ها

در HTML، رنگ ها می توانند با استفاده از مقادیر RGB، مقادیر HEX، مقادیر HSL، مقادیر RGBA و مقادیر HSLA مشخص شوندبه مثال زیر توجه کنید:

<html>
<body>

<p>Same as color name "Tomato":</p>

<h1 style="background-color:rgb(255, 99, 71);">rgb(255, 99, 71)</h1>
<h1 style="background-color:#ff6347;">#ff6347</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">hsl(9, 100%, 64%)</h1>

<p>Same as color name "Tomato", but 50% transparent:</p>
<h1 style="background-color:rgba(255, 99, 71, 0.5);">rgba(255, 99, 71, 0.5)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">hsla(9, 100%, 64%, 0.5)</h1>

<p>In addition to the predefined color names, colors can be specified using RGB, HEX, HSL, or even transparent colors using RGBA or HSLA color values.</p>

</body>
</html>

<html>

<body>

<p>Same as color name "Tomato":</p>

<p>Same as color name "Tomato", but 50% transparent:</p>

<p>In addition to the predefined color names, colors can be specified using RGB, HEX, HSL, or even transparent colors using RGBA or HSLA color values.</p>

</body>

</html>

با اجرا کردن کد بالا نتیجه زیر را در خروجی خواهید دید:

ارزش RGB

در HTML، یک رنگ را می توان به عنوان یک مقدار RGB تعریف کرد، با استفاده از این فرمول:

**rgb(red, green, blue)**

هر پارامتر (قرمز، سبز و آبی) شدت رنگ را بین ۰ تا ۲۵۵ تعریف می کند.

به عنوان مثال، rgb (255، ۰، ۰) به صورت قرمز نمایش داده می شود، چرا که قرمز به بالاترین مقدار آن (۲۵۵) و دیگران به ۰ تنظیم شده است.

برای نمایش رنگ سیاه، تمام پارامترهای رنگ باید به ۰ تنظیم شود، مانند این: rgb (0، ۰، ۰).

برای نمایش رنگ سفید، تمام پارامترهای رنگ باید به ۲۵۵ تنظیم شود، مانند این: rgb (255، ۲۵۵، ۲۵۵).

سایه خاکستری اغلب با استفاده از مقادیر برابر برای تمام ۳ منبع نور تعریف می شود

ارزش HEX

در HTML، یک رنگ را می توان با استفاده از مقدار هگزادسیمال آن در فرم مشخص کرد: #rrggbb

جایی که rr (قرمز)، gg (سبز) و bb (آبی) مقادیر هگزادسیم بین ۰۰ و ff هستند (همانند decimal 0-255).

به عنوان مثال، # ff0000 به صورت قرمز نمایش داده می شود، زیرا قرمز به بالاترین مقدار (ff) تنظیم شده است و دیگران به کمترین مقدار (۰۰) تنظیم می شوند.

سایه خاکستری اغلب با استفاده از مقادیر برابر برای تمام ۳ منبع نور تعریف می شود

ارزش HSL

در HTML، رنگ را می توان با استفاده از رنگ، اشباع و سبک (HSL) در فرم مشخص کرد:

**hsl(hue, saturation, lightness)**

سایه یک رنگ در چرخه رنگ از ۰ تا ۳۶۰ است. ۰ قرمز است، ۱۲۰ رنگ سبز است و ۲۴۰ آبی است.

اشباع یک رنگ مقداری بر اساس درصد است، ۰٪ به معنای سایه خاکستری است و ۱۰۰٪ رنگ کامل است.

روشنایی نیز یک مقدار بر اساس درصد است، ۰٪ سیاه است، ۵۰٪ چیزی بین نور و تاریکی است، ۱۰۰٪ سفید است.

اشباع

اشباع را می توان به عنوان شدت یک رنگ توصیف کرد.

۱۰۰٪ رنگ خالص است، بدون سایه خاکستری.

۵۰٪ یعنی که ۵۰٪ خاکستری است، اما شما هنوز هم می توانید رنگ را ببینید.

۰٪ به طور کامل خاکستری است، شما دیگر نمی توانید رنگ را ببینید.

روشنایی

Lightness یا روشنایی رنگ ها در CSS را می توان به عنوان مقدار نور مورد نظر برای رنگ نشان داد، که ۰٪ به معنای بدون نور (سیاه )، ۵۰٪ به معنای ۵۰٪ نور (نه تاریک و نه روشن) ۱۰۰٪ به معنی نور کامل (سفید) است.

سایه خاکستری اغلب با تنظیم رنگ و اشباع به ۰ و تنظیم نور از ۰٪ به ۱۰۰٪ برای تیره شدن / روشن تر شدن سایه ها تعریف می شود.