مهندس طراحی سایت - سابقه 10 سال تدریس در جهاددانشگاهی مشهد - مدرس نرم افزارها و برنامه های کامپیوتری - عضو تیم برنامه نویسی جی وب
رنگ ها در HTML با استفاده از نام رنگ های از پیش تعریف شده یا RGB ، HEX، HSL، RGBA، HSLA مشخص می شوند.
یکی از راههایی که برای استفاده از رنگها در HTML استفاده می‌شود ، ذکر نام رنگ می‌باشد. مانند Red ، Blue ، Green و…. به عنوان مثال ۸ رنگ زیر را می‌توانید با نام لاتین آن استفاده کنید.
اگر بخواهید نام فارسی رنگهای فوق را بدانید، در ادامه می‌توانید نام فارسی این رنگها را ببینید.
در اینجا شما می‌توانید لیست کامل نام رنگها را به دو زبان فارسی و انگلیسی داشته باشید. حال در اینجا استفاده‌های متفاوت Color در HTML را به صورت زیر بیان میکنم.
شما می توانید رنگ پس زمینه برای تگهای HTML را توسط این خصوصیت تنظیم کنید. این خصوصیت تقریباً یک خصوصیت عمومی می‌باشد .
و برای خیلی از تگهای HTML استفاده می‌شود.از جمله این تگها تگ <p> ، تگ <tabel> ، تگ<td> ، تگ<tr> ،تگ<th> ،تگهای <h>و …
برای درک بهتر چند مثال ذکر میکنم :
|
1 2 3 4 5 6 7 |
<h5 style="background-color:orange;">از روانشناسی رنگها چه میدانید؟</h5>
<p style="background-color:violet;">در سال ۱۶۶۶، اسحاق نیوتن، دانشمند نامدار انگلیسی، کشف کرد که چنانچه نور
خالص سفید از یک منشور عبور داده شود، به رنگهای قابل رؤیت تجزیه می‌شود. نیوتن همچنین کشف کرد که هر رنگ از یک طول
موج منحصر به فرد تشکیل شده و قابل تجزیه به رنگهای دیگر نیست.</p> |
نتیجه مثال فوق به صورت زیر است:
در سال ۱۶۶۶، اسحاق نیوتن، دانشمند نامدار انگلیسی، کشف کرد که چنانچه نور خالص سفید از یک منشور عبور داده شود، به رنگهای قابل رؤیت تجزیه می‌شود. نیوتن همچنین کشف کرد که هر رنگ از یک طول موج منحصر به فرد تشکیل شده و قابل تجزیه به رنگهای دیگر نیست.
شما می توانید رنگ متن خود را توسط خصوصیت فوق تنظیم کنید:این خصوصیت نیز مانند خصوصیت Background Color تقریباً یک خصوصیت عمومی می‌باشد .و برای خیلی از تگهای HTML استفاده می‌شود.از جمله این تگها تگ <p> ،تگ <tabel> ، تگ<td> ، تگ<tr> ، تگ<th> ، تگهای <h>و …
برای درک بهتر چند مثال ذکر میکنم :
|
1 2 3 4 5 6 7 |
<h5 style="color:orange;">از روانشناسی رنگها چه میدانید؟</h5>
<p style="color:violet;">در سال ۱۶۶۶، اسحاق نیوتن، دانشمند نامدار انگلیسی، کشف کرد که چنانچه نور
خالص سفید از یک منشور عبور داده شود، به رنگهای قابل رؤیت تجزیه می‌شود. نیوتن همچنین کشف کرد که هر رنگ
از یک طول موج منحصر به فرد تشکیل شده و قابل تجزیه به رنگهای دیگر نیست.</p> |
نتیجه مثال فوق به صورت زیر است:
در سال ۱۶۶۶، اسحاق نیوتن، دانشمند نامدار انگلیسی، کشف کرد که چنانچه نور خالص سفید از یک منشور عبور داده شود، به رنگهای قابل رؤیت تجزیه می‌شود. نیوتن همچنین کشف کرد که هر رنگ از یک طول موج منحصر به فرد تشکیل شده و قابل تجزیه به رنگهای دیگر نیست.
شما می توانید رنگ مرزها و خطوط و یا کادرها را در HTML توسط خصوصیت فوق تنظیم کنید. در واقع این خصوصیت جایی به کار می‌رود که خصوصیت Border استفاده شده باشد. در هنگام استفاده از خصوصیت Border در یک تگ سه مورد از چپ به راست تنظیم می‌شود:
یک – ضخامت کادر براساس واحد px .
دو – نوع خط موزد استفاده که پرکاربردترین آنها به صورت زیر می‌باشد:
solid : ایجاد خط ساده
dashed : ایجاد خط چین
dotted : ایجاد نقطه چین
double : ایچاد دو خط
سه – نام رنگ برای خط مورد نظر
نکته : این سه مورد توسط فاصله Space از هم جدا می‌شوند.
برای درک بهتر چند مثال ذکر میکنم :
|
1 2 3 4 5 |
<h3 style="border: 2px solid blue;">Hello World</h3>
<h4 style="border: 4px dashed red;">Hello World</h4>
<p style="border: 6px dotted green;">Hello World</p> |
نتیجه مثال فوق به صورت زیر است:
Hello World
همانطور که در بالا ذکر شد در HTML رنگها می توانند با استفاده از نام لاتین آنها ، مقادیر RGB، مقادیر HEX، مقادیرHSL،مقادیر RGBA و مقادیر HSLA مشخص شوند. به عنوان مثال رنگ Tomato ( گوجه‌ای ) را به ۶ صورت زیر می‌توان ایجاد نمود.
مثال ۱ : استفاده مستقیم از نام رنگ :
|
1 |
<p style="background-color: tomato; text-align: center; color: white;"><strong>Tomato</strong></p> |
نتیجه مثال فوق به صورت زیر است:
Tomato
مثال ۲ : استفاده از rgb :
|
1 |
<p style="background-color:rgb(255,99,71); text-align: center; color: white;"><strong>rgb(255,99,71)</strong></p> |
نتیجه مثال فوق به صورت زیر است:
(rgb(255,99,71
مثال ۳ : استفاده از HEX :
|
1 |
<p style="background-color:#ff6347; text-align: center; color: white;"><strong>#ff6347</strong></p> |
نتیجه مثال فوق به صورت زیر است:
#ff6347
مثال ۴ : استفاده از HSL :
|
1 |
<p style="background-color:hsl(9,100%,64%); text-align: center; color: white;"><strong>hsl(9,100%,64%)</strong></p> |
نتیجه مثال فوق به صورت زیر است:
(hsl(9,100%,64%
مثال ۵ : استفاده از RGBA با ۵۰% شفافیت :
|
1 |
<p style="background-color:rgba(255,99,71,0.5); text-align: center; color: white;"><strong>rgba(255,99,71,0.5)</strong></p> |
نتیجه مثال فوق به صورت زیر است:
(rgba(255,99,71,0.5
مثال ۶ : استفاده از HSLAبا ۵۰% شفافیت :
|
1 |
<p style="background-color:hsla(9,100%,64%,0.5); text-align: center; color: white;"><strong>hsla(9,100%,64%,0.5)</strong></p> |
نتیجه مثال فوق به صورت زیر است:
(hsla(9,100%,64%,0.5
توضیح کامل موارد فوق به صورت زیر می‌باشد:
در HTML، یک رنگ را می توان به عنوان یک مقدار RGB تعریف کرد، با استفاده از این فرمول:
rgb(red, green, blue)
هر پارامتر (قرمز، سبز و آبی) شدت رنگ را بین ۰ تا ۲۵۵ تعریف می کند.
به عنوان مثال، (rgb (255، ۰، ۰ رنگ قرمز را نمایش می‌دهد، زیرا قسمت مربوط به پارامتر قرمز کامل (۲۵۵) تعریف شده و قسمتهای دیگر ۰ می‌باشد.
برای نمایش رنگ سیاه، تمام پارامترهای رنگ باید با عدد ۰ تنظیم شوند، مانند: (rgb (0، ۰،۰٫
برای نمایش رنگ سفید، تمام پارامترهای رنگ بایدبا عدد ۲۵۵ تنظیم شود، مانند:( rgb (255، ۲۵۵، ۲۵۵٫
برای درک بهتر چند مثال ذکر میکنم :
رنگ خاکستری اغلب با استفاده از مقادیر برابر برای هر سه پارامتر rgb تعریف می شود . مانند:
در HTML، یک رنگ را می توان با استفاده از مقدار هگزادسیمال مشخص کرد:
#rrggbb
قرار دادن علامت # ابتدای مقدار هگزادسیمال الزامی است .
بدین صورت که rr (قرمز)، gg (سبز) و bb (آبی) مقادیر هگزادسیمال بین ۰۰ و ff هستند (مانند دهدهی ۰-۲۵۵). به عنوان مثال، ff0000 #به صورت قرمز نمایش داده می شود، زیرا قرمز به بالاترین مقدار (ff) و دیگران به پایین ترین مقدار(۰۰) تنظیم شده است.
برای درک بهتر چند مثال ذکر میکنم :
در اینجا هم رنگ خاکستری اغلب با استفاده از مقادیر برابر برای هر سه پارامتر rgb تعریف می شود . مانند:
در HTML، رنگ را می توان با استفاده از رنگ، میزان اشباع رنگ و میزان روشنی رنگ (HSL) مشخص کرد:
hsl (میزان روشنی رنگ ، میزان اشباع رتگ ، رنگ )
رنگ درجه ای بر روی چرخ رنگ از ۰ تا ۳۶۰ درجه است. عدد ۰ بیانگر رنگ قرمز است، عدد ۱۲۰ بیانگر رنگ سبز است و عدد ۲۴۰ بیانگر رنگ آبی است. میزان اشباع رنگ یک درصد است، ۰٪ به معنای یک سایه خاکستری است و ۱۰۰٪ رنگ کامل است. Lightness یا میزان روشنی رنگ نیز یک درصد است، ۰٪ سیاه است، ۵۰٪ نه روشن نه تاریک است، ۱۰۰٪سفید است.
برای درک بهتر چند مثال ذکر میکنم :
میزان اشباع رنگ :
میزان اشباع رنگ را می توان به عنوان شدت وجود یک رنگ توصیف کرد.
۱۰۰٪ : رنگ خالص است، بدون سایه خاکستری
۵۰٪ : خاکستری ۵۰٪ است، اما شما هنوز هم می توانید رنگ را ببینید.
۰٪ : به طور کامل خاکستری است، شما دیگر نمی توانید رنگ را ببینید.
برای درک بهتر چند مثال ذکر میکنم :
میزان روشنی رنگ :
Lightness یا میزان روشنی رنگ می توان توضیح داد:
به معنای شدت نوری است که شما به رنگ می‌تابانید ( مثل میزان تاباندن نور به یک شی):
۰٪ : به معنای تاباندن هیچ نوری به رنگ مورد نظر (سیاه)
۵۰٪ : به معنای تاباندن ۵۰٪ نور به رنگ مورد نظر (نه تاریک و نه روشن)
۱۰۰٪ : به معنی تاباندن نور کامل به رنگ مورد نظر (سفید) توصیف می شود.
برای درک بهتر چند مثال ذکر میکنم :
برای داشتن رنگ خاکستری اغلب با تنظیم رنگ و میزان اشباع رنگ به میزان %۰ و تنظیم میزان روشنی رنگ بین ۰٪ به ۱۰۰٪ استفاده می‌شود.این کار برای گرفتن سایه های تیره تر یا روشن تر نیز استفاده می‌شود:
برای درک بهتر چند مثال ذکر میکنم :
مقادیر رنگ RGBA یک فرمت ارزش رنگی RGB با یک پارامتر آلفا است که میزان وضوح ( کدری و یا تاری ) را برای یک رنگ مشخص می کند. مقدار رنگ RGBA به صورت زیر تعریف می‌شود:
rgba(red, green, blue, alpha)
پارامتر alpha یک عدد بین ۰٫۰ (نهایت شفافیت در آن رنگ) و ۱٫۰ است (نهایت کدری در آن رنگ) است .
برای درک بهتر چند مثال ذکر میکنم :
مقادیر رنگ HSLA یک فرمت از مقادیر رنگ HSL با یک پارامتر آلفا است که میزان وضوح ( کدری و یا تاری ) را برای یک رنگ مشخص می کند. یک مقدار رنگ HSLA به صورت زیر تعریف می‌شود:
hsla(hue, saturation, lightness, alpha)
hlsa (میزان روشنی رنگ ، میزان اشباع رتگ ، رنگ ، alpha )
رنگ درجه ای بر روی چرخ رنگ از ۰ تا ۳۶۰ درجه است. عدد ۰ بیانگر رنگ قرمز است، عدد ۱۲۰ بیانگر رنگ سبز است و عدد۲۴۰ بیانگر رنگ آبی است.
میزان اشباع رنگ یک درصد است، ۰٪ به معنای یک سایه خاکستری است و ۱۰۰٪ رنگ کامل است.
Lightness یا میزان روشنی رنگ نیز یک درصد است، ۰٪ سیاه است، ۵۰٪ نه روشن نه تاریک است، ۱۰۰٪ سفید است.
پارامتر alpha یک عدد بین ۰٫۰ (نهایت شفافیت در آن رنگ) و ۱٫۰ است (نهایت کدری در آن رنگ) است .
برای درک بهتر چند مثال ذکر میکنم :
چنانچه قصد برگزاری دوره ، مشاوره و یا سفارش پروژه را دارید ، درخواست خود را ارسال نمایید
ارسال درخواست دوره
از دوره های دورآموز و شرایط آن دیدن نمایید
خانم مهندس جلسه قبل من بعلت بیماری در کلاس حضور نداشتم .فقط در مورد رنگها درس دادین یا مورد دیگری هم بود؟
پاسخسلام . امیدوارم رفع کسالت شده باشه . نه فقط رنگها بود. اگر مشکلی دارین من توی انجمن در خدمتتون هستم.
خیلی عالی بود . من خیلی گشتم مشکلم حل بشه . خدا رو شکر این مطلب کاملا مشکلم رو حل کرد. ممنون
پاسخخواهش میکنم . خوشحالم که مفید واقع شده . هر سوالی بود در خدمتم...