لوگو دویکس
ورود / ثبت نام
تغییر رنگ HTML

تغییر رنگ HTML:

دسته بندی : آموزش HTML سطح مقاله : متوسط زمان مطالعه : 3 دقیقه آخرین بروز رسانی: 04 آذر 1399

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

تعریف تغییر رنگ HTML

هیچ تگ ویژه رنگ HTML وجود ندارد ، زیرا طراحی عملکرد اصلی HTML نیست. رنگ آمیزی وب سایت شما بخشی از یک ظاهر طراحی شده CSS است. این بدان معنی است که شما باید از ویژگی style در تگ بازی که می خواهید رنگ HTML را به آن اضافه کنید استفاده کنید.

شما می توانید از ویژگی رنگ برای تغییر رنگ متن خود ، یا background-color برای تغییر رنگ پس زمینه استفاده کنید. هر دوی این خصوصیات نام رنگی دارند ، مقادیر RGB ، RGBA ، HEX ، HSL یا HSLA.

متن یا پس زمینه HTML color

دو ویژگی وجود دارد که می توانید برای تعریف رنگ استفاده کنید – رنگ پس زمینه HTML و رنگ HTML. همانطور که از نامش پیداست ، اولین مورد برای تغییر رنگ پس زمینه استفاده می شود. با استفاده از ویژگی رنگ ساده ، رنگ متن را تغییر می دهید.

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

توجه: به این نکته مهم است که ویژگی background-color یک رنگ برای پس زمینه متن فراهم می کند ، اما نه برای کل سند. اگر می خواهید رنگ HTML را برای کل صفحه تغییر دهید ، باید از مشخصه bgcolor در تگ باز قسمت <body> استفاده کنید:

<body bgcolor="#def28d">

<h2 style="color: #731768;">
 I am using HEX codes to assign colors to this text and to the whole document
</h2>

توجه: در بخش <body> اضافه شده ، ویژگی bgcolor از مقادیر RGB پشتیبانی نمی کند. از یک نام رنگ یا یک مقدار HEX استفاده کنید.

راه های تعریف رنگ HTML

نام

نام رنگ نام خاص رنگ HTML را نشان می دهد. 140 نام رنگی در CSS پشتیبانی می شوند و می توانید از هر یک از آن ها برای عناصر خود استفاده کنید. به عنوان مثال ، شما می توانید به راحتی از قرمز برای تعریف قرمز HTML استفاده کنید:

<h2 style="color: pink;">
I am using a color name to assign a color to this text
</h2>

<h2 style="background-color: steelblue;">
I am using a color name to assign a color to this background
</h2>

<h2 style="background-color: brown; color: bisque;">
I am using a color name to assign a color to this background and text
</h2>

مقادیر RGB و RGBA

مقدار RGB با مخلوط کردن مقادیر قرمز ، سبز و آبی ، رنگ HTML را تعریف می کند. عدد اول ورودی رنگ قرمز را توصیف می کند ، دومی – ورودی رنگ سبز و عدد سوم – ورودی رنگ آبی.

مقدار هر رنگ می تواند از 0 تا 255 باشد. به عنوان مثال ، برای بدست آوردن همان قرمز HTML که در بخش قبلی مشاهده کردید ، ما باید از (RGB (255،0،17استفاده کنیم:

<h2 style="color: rgb(252, 156, 249);">
I am using RGB codes to assign a color to this text
</h2>

<h2 style="background-color: rgb(255, 236, 139);">
I am using RGB codes to assign a color to this background
</h2>

<h2 style="color: rgb(255, 236, 139); background-color: rgb(143, 188, 143);">
I am using RGB codes to assign a color to this background and text
</h2>

در حالی که مقادیر RGBA بسیار شبیه به هم هستند ، اما یک مقدار بیشتر در ترکیب دارند. مقدار چهارم اضافی A مخفف آلفا است و میزان کدری را نشان می دهد. می توان آن را در عددی از 0 (شفاف نیست) تا 1 (کاملاً شفاف) تعریف کرد:

<h2 style="color: rgba(252, 156, 249, 0.25);">
RGBA values let you set custom opacity - compare these two lines
</h2>

<h2 style="color: rgba(252, 156, 249, 0.75);">
RGBA values let you set custom opacity - compare these two lines
</h2>

مقدار HEX

مقدار رنگ HEX تقریباً مشابه RGB عمل می کند اما متفاوت به نظر می رسد. وقتی HEX را تعریف می کنید ، کد شامل هر دو عدد از 0 تا 9 و حروف A تا F برای توصیف شدت رنگ است. دو علامت اول شدت قرمز را تعیین می کنند ، دو علامت در وسط – شدت سبز و دو علامت آخر شدت آبی را تعیین می کنند.

به عنوان مثال ، برای بدست آوردن یک HTML آبی ساده ، از کد # 0000fe استفاده می کنیم:

<h2 style="color: #FC9CF9;">
I am using HEX codes to assign a color to this text
</h2>

<h2 style="background-color: #FFEC8B;">
I am using HEX codes to assign a color to this background
</h2>

<h2 style="color: #B0E0E6; background-color: #ACAFFF;">
I am using HEX codes to assign a color to this background and text
</h2>

مقادیر HSL و HSLA

در HTML ، رنگ ها همچنین می توانند در مقادیر HSL تعریف شوند. HSL مخفف hue، اشباع و سبک بودن است:

  • Hue در درجه های 0 تا 360 تعریف می شود. در چرخ رنگی ، قرمز در حدود 0/360 ، سبز در 120 و آبی در 240 است.
  • اشباع بر حسب درصد از 0 (سیاه و سفید) تا 100 (تمام رنگ) تعریف می شود.
  • سبکی بر حسب درصد از 0 (سیاه) تا 100 (سفید) تعریف می شود.

به عنوان مثال ، برای رنگ آمیزی پس زمینه با رنگ آبی HTML ، می توانید از hsl (240 ، 100٪) ، 50٪استفاده کنید:

<h2 style="color: hsl(217, 97%, 57%);">
I am using HSL codes to assign a color to this text
</h2>

<h2 style="background-color: hsl(218, 77%, 88%);">
I am using HSL codes to assign a color to this background
</h2>

<h2 style="color: hsl(38, 95%, 25%); background-color: hsl(38, 77%, 88%);">
I am using HSL codes to assign a color to this background and text
</h2>

درست مانند RGBA ، مقدار چهارم A در مقادیر HSLA مخفف آلفا است و نشان دهنده تیرگی است که در یک عدد از 0 تا 1 تعریف شده است:

<h2 style="color: hsla(128, 95%, 25%, 0.25);">
HSLA values let you set custom opacity - compare these two lines
</h2>

<h2 style="color: hsla(128, 95%, 25%, 0.75);">
HSLA values let you set custom opacity - compare these two lines
</h2>

نکات مهم تغییر رنگ HTML:

  • استفاده از یک انتخابگر ساده رنگ به شما کمک می کند مقادیر دقیق RGB یا HEX از رنگ HTML مورد نیاز خود را بدست آورید.
  • حدس زدن نام رنگ ها را در یک بازی ساده سرگرم کنید: برخی از آن ها ممکن است آنطور که فکر می کنید بصری نباشند.

در دوره آموزش HTML وCSS بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید.

این مقاله چقدر براتون مفید بود؟

میانگین رتبه : 5/5 - تعداد رای : 1