رنگها در HTML

 

 

رنگها در HTML

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

نام رنگها :

یکی از راههایی که برای استفاده از رنگها در HTML استفاده می‌شود ، ذکر نام رنگ می‌باشد. مانند Red ، Blue ، Green و…. به عنوان مثال ۸ رنگ زیر را می‌توانید با نام لاتین آن استفاده کنید.

 

اگر بخواهید نام فارسی رنگهای فوق را بدانید، در ادامه می‌توانید نام فارسی این رنگها را ببینید.

 

در اینجا شما می‌توانید لیست کامل نام رنگها را به دو زبان فارسی و انگلیسی داشته باشید. حال در اینجا استفاده‌های متفاوت Color در HTML را به صورت زیر بیان می‌کنم.

 

۱- رنگ پس زمینه ( Background Color ) : 

شما می توانید رنگ پس زمینه برای تگهای HTML را توسط این خصوصیت تنظیم کنید. این خصوصیت تقریباً یک خصوصیت عمومی می‌باشد .

و برای خیلی از تگهای HTML استفاده می‌شود.از جمله این تگها تگ <p> ، تگ <tabel> ، تگ<td> ، تگ<tr> ،تگ<th> ،تگهای <h>و …

برای درک بهتر چند مثال ذکر می‌کنم :

 

نتیجه مثال فوق به صورت زیر است:

از روانشناسی رنگها چه میدانید؟

در سال ۱۶۶۶، اسحاق نیوتن، دانشمند نامدار انگلیسی، کشف کرد که چنانچه نور خالص سفید از یک منشور عبور داده شود، به رنگ‌های قابل رؤیت تجزیه می‌شود. نیوتن همچنین کشف کرد که هر رنگ از یک طول موج منحصر به فرد تشکیل شده و قابل تجزیه به رنگ‌های دیگر نیست.

۲- رنگ متن ( Text Color ) :

شما می توانید رنگ متن خود را توسط خصوصیت فوق تنظیم کنید:این خصوصیت  نیز مانند  خصوصیت Background Color تقریباً یک خصوصیت عمومی می‌باشد .و برای خیلی از تگهای HTML استفاده می‌شود.از جمله این تگها تگ <p> ،تگ <tabel> ، تگ<td> ، تگ<tr> ، تگ<th> ، تگهای <h>و …

برای درک بهتر چند مثال ذکر می‌کنم :

 

نتیجه مثال فوق به صورت زیر است:

از روانشناسی رنگها چه میدانید؟

در سال ۱۶۶۶، اسحاق نیوتن، دانشمند نامدار انگلیسی، کشف کرد که چنانچه نور خالص سفید از یک منشور عبور داده شود، به رنگ‌های قابل رؤیت تجزیه می‌شود. نیوتن همچنین کشف کرد که هر رنگ از یک طول موج منحصر به فرد تشکیل شده و قابل تجزیه به رنگ‌های دیگر نیست.

رنگ خطوط و کادرها ( Border Color ) :

شما می توانید رنگ مرزها و خطوط و یا کادرها را در HTML توسط خصوصیت فوق تنظیم کنید. در واقع این خصوصیت جایی به کار می‌رود که خصوصیت Border استفاده شده باشد. در هنگام استفاده از خصوصیت Border در یک تگ سه مورد از چپ به راست تنظیم می‌شود:

یک – ضخامت کادر براساس واحد px .

دو – نوع خط موزد استفاده که پرکاربردترین آنها به صورت زیر می‌باشد:

solid : ایجاد خط ساده

dashed : ایجاد خط چین

dotted : ایجاد نقطه چین

double : ایچاد دو خط

سه – نام رنگ برای خط مورد نظر

نکته : این سه مورد توسط فاصله Space از هم جدا می‌شوند.

برای درک بهتر چند مثال ذکر می‌کنم :

 

 

نتیجه مثال فوق به صورت زیر است:

مدلهای مختلف استفاده از رنگها در HTML :

همانطور که در بالا ذکر شد در HTML رنگها می توانند با استفاده از نام لاتین آنها ، مقادیر RGB، مقادیر HEX، مقادیرHSL،مقادیر RGBA و مقادیر HSLA مشخص شوند. به عنوان مثال رنگ  Tomato ( گوجه‌ای ) را به ۶ صورت زیر می‌توان ایجاد نمود.

مثال ۱ : استفاده مستقیم از نام رنگ : 

 

نتیجه مثال فوق به صورت زیر است:

Tomato

مثال ۲ : استفاده از rgb  :

 

نتیجه مثال فوق به صورت زیر است:

(rgb(255,99,71

مثال ۳ : استفاده از HEX  :

 

نتیجه مثال فوق به صورت زیر است:

#ff6347

مثال ۴ : استفاده از HSL  :

 

نتیجه مثال فوق به صورت زیر است:

(hsl(9,100%,64%

مثال ۵ : استفاده از RGBA با ۵۰% شفافیت :

 

نتیجه مثال فوق به صورت زیر است:

(rgba(255,99,71,0.5

 مثال ۶ : استفاده از HSLAبا ۵۰% شفافیت :

 

نتیجه مثال فوق به صورت زیر است:

(hsla(9,100%,64%,0.5

توضیح کامل موارد فوق به صورت زیر می‌باشد:

 مقدار RGB :

در HTML، یک رنگ را می توان به عنوان یک مقدار RGB تعریف کرد، با استفاده از این فرمول:

rgb(red, green, blue)

 هر پارامتر (قرمز، سبز و آبی) شدت رنگ را بین ۰ تا ۲۵۵ تعریف می کند.

به عنوان مثال، (rgb (255، ۰، ۰  رنگ قرمز را نمایش می‌دهد، زیرا قسمت مربوط به پارامتر قرمز کامل (۲۵۵) تعریف شده و قسمتهای دیگر ۰ می‌باشد.

برای نمایش رنگ سیاه، تمام پارامترهای رنگ باید با عدد ۰ تنظیم شوند، مانند: (rgb (0، ۰،۰٫ 

برای نمایش رنگ سفید، تمام پارامترهای رنگ بایدبا عدد ۲۵۵ تنظیم شود، مانند:( rgb (255، ۲۵۵، ۲۵۵٫

برای درک بهتر چند مثال ذکر می‌کنم :

 

 

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

 

 

 مقدار HEX:

در HTML، یک رنگ را می توان با استفاده از مقدار هگزادسیمال  مشخص کرد:

#rrggbb

قرار دادن علامت # ابتدای مقدار  هگزادسیمال الزامی است .

بدین صورت که  rr (قرمز)، gg (سبز) و bb (آبی) مقادیر هگزادسیمال بین ۰۰ و ff هستند (مانند دهدهی ۰-۲۵۵). به عنوان مثال، ff0000 #به صورت قرمز نمایش داده می شود، زیرا قرمز به بالاترین مقدار (ff) و دیگران به پایین ترین مقدار(۰۰) تنظیم شده است.

برای درک بهتر چند مثال ذکر می‌کنم :

 

 

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

 

 

مقدار HSL:

در HTML، رنگ را می توان با استفاده از رنگ، میزان اشباع  رنگ و میزان روشنی رنگ (HSL) مشخص کرد:

hsl (میزان روشنی رنگ ، میزان اشباع رتگ ، رنگ )

رنگ درجه ای بر روی چرخ رنگ از ۰ تا ۳۶۰ درجه است.  عدد ۰ بیانگر رنگ  قرمز است، عدد ۱۲۰ بیانگر رنگ سبز است و عدد ۲۴۰ بیانگر رنگ آبی است. میزان اشباع  رنگ یک درصد است، ۰٪ به معنای یک سایه خاکستری است و ۱۰۰٪ رنگ کامل است.  Lightness یا میزان روشنی رنگ نیز یک درصد است، ۰٪ سیاه است، ۵۰٪ نه روشن نه تاریک است، ۱۰۰٪سفید است.

برای درک بهتر چند مثال ذکر می‌کنم :

 

 

 میزان اشباع  رنگ :

میزان اشباع  رنگ را می توان به عنوان شدت وجود یک رنگ توصیف کرد.

۱۰۰٪ : رنگ خالص است، بدون سایه خاکستری

۵۰٪ : خاکستری ۵۰٪ است، اما شما هنوز هم می توانید رنگ را ببینید.

۰٪  : به طور کامل خاکستری است، شما دیگر نمی توانید رنگ را ببینید.

برای درک بهتر چند مثال ذکر می‌کنم :

 

 

میزان روشنی رنگ :

Lightness  یا میزان روشنی رنگ  می توان توضیح داد:

به معنای شدت نوری است که شما به رنگ می‌تابانید ( مثل میزان تاباندن نور به یک شی):

۰٪ : به معنای تاباندن  هیچ نوری به رنگ مورد نظر (سیاه)

۵۰٪ : به معنای تاباندن  ۵۰٪ نور به رنگ مورد نظر (نه تاریک و نه روشن)

۱۰۰٪ : به معنی تاباندن نور کامل به رنگ مورد نظر (سفید) توصیف می شود.

برای درک بهتر چند مثال ذکر می‌کنم :

 

 

برای داشتن رنگ خاکستری اغلب با تنظیم رنگ و  میزان اشباع  رنگ به میزان %۰ و تنظیم میزان روشنی رنگ بین ۰٪ به ۱۰۰٪ استفاده می‌شود.این کار برای گرفتن سایه های تیره تر یا روشن تر  نیز استفاده می‌شود:

برای درک بهتر چند مثال ذکر می‌کنم :

 

 

مقدار RGBA:

مقادیر رنگ RGBA یک فرمت ارزش رنگی RGB با یک پارامتر آلفا است که میزان وضوح ( کدری و یا تاری ) را برای یک رنگ مشخص می کند. مقدار رنگ RGBA به صورت زیر تعریف می‌شود:

rgba(red, green, blue, alpha)

پارامتر alpha یک عدد بین ۰٫۰ (نهایت شفافیت در آن رنگ) و ۱٫۰ است (نهایت کدری در آن رنگ) است .

برای درک بهتر چند مثال ذکر می‌کنم :

 

 

مقدار HSLA:

مقادیر رنگ HSLA یک فرمت از مقادیر رنگ HSL با یک پارامتر آلفا است که میزان وضوح ( کدری و یا تاری ) را برای یک رنگ مشخص می کند. یک مقدار رنگ HSLA به صورت زیر تعریف می‌شود:

hsla(hue, saturation, lightness, alpha)

hlsa (میزان روشنی رنگ ، میزان اشباع رتگ ، رنگ ، alpha )

رنگ درجه ای بر روی چرخ رنگ از ۰ تا ۳۶۰ درجه است.  عدد ۰ بیانگر رنگ  قرمز است، عدد ۱۲۰ بیانگر رنگ سبز است و عدد۲۴۰ بیانگر رنگ آبی است.

میزان اشباع  رنگ یک درصد است، ۰٪ به معنای یک سایه خاکستری است و ۱۰۰٪ رنگ کامل است.

Lightness یا میزان روشنی رنگ نیز یک درصد است، ۰٪ سیاه است، ۵۰٪ نه روشن نه تاریک است، ۱۰۰٪ سفید است.

پارامتر alpha یک عدد بین ۰٫۰ (نهایت شفافیت در آن رنگ) و ۱٫۰ است (نهایت کدری در آن رنگ) است .

برای درک بهتر چند مثال ذکر می‌کنم :