رنگ ها در html

سپتامبر 22, 2017adminskآموزش html1

در html می‌توان به ۴ طریق رنگ را به متن، کادر یا پس زمینه بخشید:

استفاده از نام رنگ مانند: blue
استفاده از کد رنگ rgb مانند: (۰,۰,۲۵۵) کد رنگ آبی در rgb
استفاده از سیستم هگزادسیمال ۰۰۰۰ff# کد رنک آبی در hexadecimal
استفاده از hsl برای رنگ دهی : hsl(240, 100%, 50%) کد رنگ آبی در hsl

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

نام چند رنگ را در زیر مشاهده می نمایید:

رنگ ها در html

<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:DodgerBlue">تیتر با بک گراند آبی</h1>
<p style="background-color:Tomato;">
متن با بک گراند قرمز گوجه ای
</p>
<p style="color:MediumSeaGreen">پاراگراف با رنگ متن سبز</p>
<h1 style="border: 2px solid DodgerBlue;">تیتر با کادر آبی</h1>
</body>
</html>

خروجی کد بالا:

نام رنگ در html

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

رنگ دهی با مقادیر RGB

مقادیر rgb شامل ۳ مولفه بوده که هر کدام از مولفه ها مقداری بین ۰ تا ۲۵۵ میتوانند داشته باشند به این ترتیب امکان تولید بیش از ۱۶ میلیون رنگ میسر می‌گردد مولفه اول مربوط به رنگ قرمز، مولفه دوم مربوط به رنگ سبز و مولفه آخر مربوط به رنگ آبی میباشد همچنین یک مولفه آلفا در انتها میتوان در نظر گرفت که مقداری بین ۰ تا ۱ را به خود می گیرد و میزان شفافیت را میتواند تعیین کند. قطعه کد زیر به چگونگی نحوه رنگ دهی با مقادیر rgb میپردازد.

<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:rgb(255, 0, 0)">rgb(255, 0, 0)</h1>
<h1 style="background-color:rgb(0, 0, 255)">rgb(0, 0, 255)</h1>
<h1 style="background-color:rgb(60, 179, 113)">rgb(60, 179, 113)</h1>
<h1 style="background-color:rgb(238, 130, 238)">rgb(238, 130, 238)</h1>
<h1 style="background-color:rgb(255, 165, 0)">rgb(255, 165, 0)</h1>
<h1 style="background-color:rgb(106, 90, 205)">rgb(106, 90, 205)</h1>
<p>In HTML, you can specify colors using RGB values.</p>
</body>
</html>

خروجی کد بالا:

اموزش rgb در html

رنگ دهی با مقادیر hex

در این مقدار دهی ۶ مولفه هستند که مقادیری بین ۰ تا f را میگیرند(اعداد در مبنای ۱۶ پس از ۹ بجای ۱۰ ، ۱۱ ، … a,b,c,d,e,f میشوند) مقدار دهی hex همانند rgb بوده با این تفاوت که ما از هر مولفه rgb دو عدد داریم و مقادیر بجای مبنای ۱۰ در مبنای ۱۶ هستند. به این شکل: rrggbb# به قطعه کد زیر با رنگ دهی به مقادیر hex توجه نمایید:

<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:#ff0000">#ff0000</h1>
<h1 style="background-color:#0000ff">#0000ff</h1>
<h1 style="background-color:#3cb371">#3cb371</h1>
<h1 style="background-color:#ee82ee">#ee82ee</h1>
<h1 style="background-color:#ffa500">#ffa500</h1>
<h1 style="background-color:#6a5acd">#6a5acd</h1>
<p>In HTML, you can specify colors using Hex values.</p>
</body>
</html>

خروجی کد بالا:

hex