به دلیل حجم بالای مطالب و زمان بر بودن دسته بندی و ترجمه آن ها، بخش هایی از سایت به صورت موقت غیر فعال است.

W3Persian.com

معادل فارسی وب سایت W3Schools.com، تقدیم به فارسی زبانان جهان!

بزرگ ترین وب سایت برنامه نویسی در ایران

رنگ های HTML

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

نام رنگ ها

در HTML می توان یک رنگ را با استفاده از نام رنگ تعریف کرد.

Tomato

Orange

DodgerBlue

MediumSeaGreen

Gray

SlateBlue

Violet

LightGray


خودتان امتحان کنید >

HTML از 140 نام استاندارد رنگ ها پشتیبانی می کند.

رنگ پس زمینه

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

W3Persian.com

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.


مثال
<h1 style="background-color:DodgerBlue;">Hello World</h1> <p style="background-color:Tomato;">Lorem ipsum...</p>خودتان امتحان کنید >

رنگ متن

شما می توانید رنگ برای نوسته تعیین کنید:

W3Persian.com

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.

بزرگ ترین وب سایت آموزش برنامه نویسی در ایران. معادل فارسی وب سایت W3Schools.com، تقدیم به فارسی زبانان جهان!


مثال
<h1 style="color:Tomato;">Hello World</h1> <p style="color:DodgerBlue;">Lorem ipsum...</p> <p style="color:MediumSeaGreen;">Ut wisi enim...</p>خودتان امتحان کنید >

رنگ کادر

شما می توانید برای کادر ها رنگ تعیین کنید:

W3Persian.com

W3Persian.com

W3Persian.com


مثال
<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>خودتان امتحان کنید >

مقادیر رنگ ها

در HTML، برای تعریف رنگ ها، علاوه بر نام رنگ می توان از مقدار 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)


مثال
<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

در HTML، یک رنگ را می توان با مقدار RGB تعریف کرد. با فرمول زیر:
rgb(red, green, blue)
هر پارامتر (قرمز (red), سبز (green)و آبی (blue)) شدت رنگ را بین 0 تا 255 تعریف می کند.
به عنوان مثال، rgb (255، 0، 0) به صورت قرمز نمایش داده می شود، چرا که به قرمز بالاترین مقدار اختصاص یافته است در حالی که دو مقدار سبز و آبی 0 هستند.
برای نمایش رنگ سیاه باید مقدار هر سه پارامتر را برابر 0 قرار دهید. مانند: rgb(0, 0, 0).
برای نمایش رنگ سفید نیز باید مقادیر پارامتر ها را برابر 255 قرار دهید. مانند: rgb(255, 255, 255)
آزمایش زیر را برای فهم بهتر مقادیر RGB امتحان کنید:

rgb(255, 99, 71)

قرمز

255

سبز

99

آبی

71


مثال

rgb(255, 0, 0)

rgb(0, 0, 255)

rgb(60, 179, 113)

rgb(238, 130, 238)

rgb(255, 165, 0)

rgb(106, 90, 205)

خودتان امتحان کنید >

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

مثال

rgb(0, 0, 0)

rgb(60, 60, 60)

rgb(120, 120, 120)

rgb(180, 180, 180)

rgb(240, 240, 240)

rgb(255, 255, 255)

خودتان امتحان کنید >

مقدار HEX

در HTML، یک رنگ را می توان با استفاده از مقدار هگزادسیمال نیز تعریف کرد:
rrggbb#
در این اینجا rr همان قرمز، gg همان سبز و bb همان آبی است که مقادیر آن ها از 00 تا ff است.
در این نوع از مقادیر بعد از 99 به تربیب به جای 1010،1111،1212،1313،1414،1515 حروف انگلیسی aa,bb,cc,dd,ee,ff قرار می گیرید.
به عنوان مثال: #ff0000 رنگ قرمز را تولید می کند زیرا دو کاراکتر اول که مشخص کننده رنگ قرمز هستند بالا ترین مقدار را دارند و سایر کاراکتر ها پایین ترین مقدار را به خود اختصاص داده اند.

مثال

#ff0000

#0000ff

#3cb371

#ee82ee

#ffa500

#6a5acd

خودتان امتحان کنید >

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

مثال

#000000

#3c3c3c

#787878

#b4b4b4

#f0f0f0

#ffffff

خودتان امتحان کنید >

مقدار HSL

در HTML، علاوه بر مقادیر قبلی، رنگ را به مقدار HSL (hue: رنگ, saturation: اشباع, lightness: سبک) تعریف کرد:
hsl(hue, saturation, lightness)
hue چرخه ای از رنگ ها بین 0 و 360 است. 0 رنگ قرمز است، 120 سبز است و 240 آبی است.
saturation یک درصد است، 0٪ به معنای یک سایه خاکستری است و 100٪ رنگ کامل است.
lightness نیز یک درصد است، 0٪ سیاه است، 50٪ رنگی بین سیاه و سفید است، 100٪ سفید است.

مثال

hsl(0, 100%, 50%)

hsl(240, 100%, 50%)

hsl(147, 50%, 47%)

hsl(300, 76%, 72%)

hsl(39, 100%, 50%)

hsl(248, 53%, 58%)

خودتان امتحان کنید >

Saturation (اشباع)

اشباع را می توان به عنوان شدت یک رنگ توصیف کرد.
100٪ رنگ خالص است، بدون سایه خاکستری
50٪ خاکستری 50٪ است، اما شما هنوز هم می توانید رنگ را ببینید.
0٪ به طور کامل خاکستری است، شما دیگر نمی توانید رنگ را ببینید.

مثال

hsl(0, 100%, 50%)

hsl(0, 80%, 50%)

hsl(0, 60%, 50%)

hsl(0, 40%, 50%)

hsl(0, 20%, 50%)

hsl(0, 0%, 50%)

خودتان امتحان کنید >

Lightness (سبک)

سبک رنگ را می توان به عنوان نور یا مقدار روشنایی آن رنگ دانست؛ 0% به معنای تاریکی مطلق (سیاه)، 50% نه نور است و نه تاریکی، 100^% نیز روشنایی مطلق (سفید) است

مثال

hsl(0, 100%, 0%)

hsl(0, 100%, 25%)

hsl(0, 100%, 50%)

hsl(0, 100%, 75%)

hsl(0, 100%, 90%)

hsl(0, 100%, 100%)

خودتان امتحان کنید >

سایه خاکستری اغلب با تنظیم رنگ و اشباع به 0 و تنظیم نور از 0٪ تا 100٪ برای تیره شدن / روشن شدن سایه ها تعریف می شود:

مثال

hsl(0, 0%, 0%)

hsl(0, 0%, 24%)

hsl(0, 0%, 47%)

hsl(0, 0%, 71%)

hsl(0, 0%, 94%)

hsl(0, 0%, 100%)

خودتان امتحان کنید >

مقدار RGBA

مقدار رنگ RGBA مانند مقدار RGB است با این تفاوت که در این مقدار رنگ به جای سه پارامتر، چهار پارامتر وجود دارد و پارامتر چهارم شفافیت رنگ را مشخص می کند.
مقدار رنگ RGBA مانند مثال زیر تعریف می شود:
rgba(red, green, blue, alpha)
مقدار چهارم یک عدد بین 0.0 (شفافیت کامل) تا 1.0 (بدون شفافیت) است:

مثال

rgba(255, 99, 71, 0)

rgba(255, 99, 71, 0.2)

rgba(255, 99, 71, 0.4)

rgba(255, 99, 71, 0.6)

rgba(255, 99, 71, 0.8)

rgba(255, 99, 71, 1)

خودتان امتحان کنید >

مقدار HSLA

مقدار رنگ HSLA مانند مقدار HSL است با این تفاوت که در این مقدار رنگ به جای سه پارامتر، چهار پارامتر وجود دارد و پارامتر چهارم شفافیت رنگ را مشخص می کند.
مقدار رنگ HSLA مانند مثال زیر تعریف می شود:
hsla(hue, saturation, lightness, alpha)
مقدار چهارم یک عدد بین 0.0 (شفافیت کامل) تا 1.0 (بدون شفافیت) است:

مثال

hsla(9, 100%, 64%, 0)

hsla(9, 100%, 64%, 0.2)

hsla(9, 100%, 64%, 0.4)

hsla(9, 100%, 64%, 0.6)

hsla(9, 100%, 64%, 0.8)

hsla(9, 100%, 64%, 1)

خودتان امتحان کنید >