رنگ متن HTML
افزودن رنگ به متن HTML آسان است! در این آموزش کوتاه نحوه تغییر رنگ متن HTML با استفاده از کدهای رنگی Hex ، نام های رنگ HTML ، مقادیر RGB و HSL را توضیح خواهیم داد.
رنگ متن با استفاده از کدهای رنگی Hex
متداول ترین روش برای رنگ آمیزی متن HTML استفاده از کدهای رنگی شش ضلعی است (کد کوتاه هگزا). به سادگی یک ویژگی سبک را به عنصر متنی که می خواهید رنگ کنید – یک پاراگراف در مثال زیر – اضافه کنید و با کد هگز خود از ویژگی رنگ استفاده کنید.
HTML
<body>
<p style = “color: # FF0000″؛> متن پاراگراف قرمز </p>
</body>
DEMO ON CODEPEN
کد Hex ندارید؟ نگران نباشید ، از انتخاب رنگ ما برای مرور میلیون ها رنگ
با کدهای رنگ Hex استفاده کنید و موارد دیگر.
روش دیگر برای رنگ آمیزی متن وب سایت شما استفاده از نام رنگی HTML است. کد HTML مشابه است ، کافی است کد Hex را از مرحله قبل با نام رنگ مورد نظر خود جایگزین کنید (در مثال ما قرمز است). 140 رنگ به نام های مختلف برای انتخاب وجود دارد ، و ما لیستی را گردآوری کرده ایم که می توانید در اینجا بررسی کنید.
HTML
<body>
<p style = “color: red؛”> متن پاراگراف قرمز </p>
</body>
DEMO ON CODEPEN
رنگ متن با استفاده از مقادیر رنگ RGB
استفاده از مقادیر RGB این روزها همه عصبانیت است ، اما به راحتی کدهای هگز یا نام های رنگی آسان است. مقادیر RGB خود را در پارامتر rgb () زیر ویژگی رنگ وارد کنید. می توانید علاوه بر کدهای Hex ، از مقادیر رنگ RGB برای دریافت مقادیر RGB نیز استفاده کنید.
HTML
<body>
<p style = “color: rgb (255،0،0)؛”> متن پاراگراف قرمز </p>
</body>
DEMO ON CODEPEN
هنگام استفاده از یک مقدار RGB در وب سایت خود ، می توانید opacity را نیز مشخص کنید. به جای rgb () از rgba () استفاده کنید – a برای آلفا ، کانال رنگی است که کدورت را کنترل می کند – و بعد از سه مقدار رنگ شما یک چهارم را برای کدورت اضافه می کنید ، در مقیاس 0 – 1 (0 برای کاملا شفاف ، 1 برای کاملاً مات)
HTML
<body>
<p style = “color: rgba (255،0،0،0.5)؛”> متن پاراگراف قرمز </p>
</body>
DEMO ON CODEPEN
رنگ متن با استفاده از مقادیر رنگ HSL
روش چهارم برای افزودن رنگ با استفاده از مقادیر HSL است. مشابه نحو RGB که در بالا توضیح داده شد ، HSL از پیشوند hsl () و سه مقدار برای رنگ ، اشباع و سبکی استفاده می کند. رنگ در مقیاس 0 – 360 نمایش داده می شود ، در حالی که اشباع و سبکی هر کدام بین 0 تا 100 درصد است.
HTML
<body>
<p style = “color: hsl (0،100٪، 50٪)؛”> متن پاراگراف قرمز </p>
</body>
DEMO ON CODEPEN
درست مانند RGB ، هنگام استفاده از HSL می توانید کدورت رنگ را درست در خاصیت رنگ تغییر دهید. از پیشوند hsla () استفاده کنید و مقدار چهارم بین 0 تا 1 را برای سطح کدورت مورد نیاز خود وارد کنید.