آموزش رنگ ها در CSS
آموزش رنگ ها در CSS
در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش رنگ ها در CSS خواهیم پرداخت.
CSS از مقادیر رنگ برای تعیین رنگ استفاده می کند. به طور معمول، اینها برای تنظیم یک رنگ یا برای پیش زمینه یک عنصر (به عنوان مثال،متن ) یا دیگری برای پس زمینه عنصر استفاده می شوند. همچنین می توان از آنها برای تأثیر بر رنگ حاشیه ها و سایر جلوه های تزئینی استفاده کرد.
می توانید مقادیر رنگی خود را در قالب های مختلف مشخص کنید. جدول زیر تمام لیست های ممکن را لیست می کند
| فرمت | نحو | مثال |
|---|---|---|
| Hex Code | #RRGGBB | p{color:#FF0000;} |
| Short Hex Code | #RGB | p{color:#6A7;} |
| RGB % | rgb(rrr%,ggg%,bbb%) | p{color:rgb(50%,50%,50%);} |
| RGB Absolute | rgb(rrr,ggg,bbb) | p{color:rgb(0,0,255);} |
| keyword | aqua, black, etc. | p{color:teal;} |
این قالبها در بخشهای زیر با جزئیات بیشتری توضیح داده شده اند –
رنگ ها در CSS – کدهای Hex
هگزادسیمال یک نمایش 6 رقمی از یک رنگ است. دو رقم اول (RR) یک مقدار قرمز نشان می دهد ، دو رقم بعدی یک مقدار سبز (GG) و آخرین آنها مقدار آبی (BB) هستند.
از هر نرم افزار گرافیکی مانند Adobe Photoshop ، Jasc Paintshop Pro یا حتی با استفاده از Advanced Paint Brush می توان مقدار هگزادسیمال دریافت کرد.
قبل از هر کد هگزادسیمال یک علامت پوند یا هش “#” وجود دارد. در زیر مثالهایی برای استفاده از نماد هگزادسیمال آورده شده است.
| رنگ | رنگ HEX |
|---|---|
| #000000 | |
| #FF0000 | |
| #00FF00 | |
| #0000FF | |
| #FFFF00 | |
| #00FFFF | |
| #FF00FF | |
| #C0C0C0 | |
| #FFFFFF |
رنگ ها در CSS – کدهای Hex کوتاه
این فرم کوتاه تر از نماد شش رقمی است. در این قالب، هر رقم تکرار می شود تا به یک مقدار شش رقمی معادل برسد. به عنوان مثال: # 6A7 # 66AA77 می شود.
از هر نرم افزار گرافیکی مانند Adobe Photoshop ، Jasc Paintshop Pro یا حتی با استفاده از Advanced Paint Brush می توان مقدار هگزادسیمال دریافت کرد.
قبل از هر کد هگزادسیمال یک علامت پوند یا هش “#” وجود دارد. در زیر مثالهایی برای استفاده از نماد هگزادسیمال آورده شده است
| رنگ | رنگ HEX |
|---|---|
| #000 | |
| #F00 | |
| #0F0 | |
| #0FF | |
| #FF0 | |
| #0FF | |
| #F0F | |
| #FFF |
رنگهای CSS – مقادیر RGB
این مقدار رنگ با استفاده از ویژگی () rgb مشخص می شود. این ویژگی سه مقدار دارد، هر کدام برای قرمز، سبز و آبی. این مقدار می تواند یک عدد صحیح بین 0 تا 255 یا یک درصد باشد.
توجه – همه مرورگرها از ویژگی ()rgb رنگ پشتیبانی نمی کنند بنابراین توصیه می شود از آن استفاده نکنید.
در زیر مثالی برای نمایش چند رنگ با استفاده از مقادیر RGB آورده شده است
| رنگ | رنگ RGB |
|---|---|
| rgb(0,0,0) | |
| rgb(255,0,0) | |
| rgb(0,255,0) | |
| rgb(0,0,255) | |
| rgb(255,255,0) | |
| rgb(0,255,255) | |
| rgb(255,0,255) | |
| rgb(192,192,192) | |
| rgb(255,255,255) |
ساخت کد رنگ
با استفاده از Color Code Builder می توانید میلیون ها کد رنگ ایجاد کنید. سازنده کد رنگ HTML ما را بررسی کنید. برای استفاده از این ابزار ، به یک مرورگر فعال شده جاوا نیاز دارید.
مرورگرهای رنگ ایمن
در اینجا لیستی از 216 رنگ وجود دارد که تصور می شود بی خطرترین و رنگ های مستقل رایانه هستند. این رنگ ها از هگزا کد 000000 تا FFFFFF متفاوت است. استفاده از این رنگ ها ایمن است زیرا اطمینان حاصل می کند که همه رایانه ها هنگام اجرای یک پالت رنگ 256 به درستی رنگ ها را نمایش می دهند –
| 000000 | 000033 | 000066 | 000099 | 0000CC | 0000FF |
| 003300 | 003333 | 003366 | 003399 | 0033CC | 0033FF |
| 006600 | 006633 | 006666 | 006699 | 0066CC | 0066FF |
| 009900 | 009933 | 009966 | 009999 | 0099CC | 0099FF |
| 00CC00 | 00CC33 | 00CC66 | 00CC99 | 00CCCC | 00CCFF |
| 00FF00 | 00FF33 | 00FF66 | 00FF99 | 00FFCC | 00FFFF |
| 330000 | 330033 | 330066 | 330099 | 3300CC | 3300FF |
| 333300 | 333333 | 333366 | 333399 | 3333CC | 3333FF |
| 336600 | 336633 | 336666 | 336699 | 3366CC | 3366FF |
| 339900 | 339933 | 339966 | 339999 | 3399CC | 3399FF |
| 33CC00 | 33CC33 | 33CC66 | 33CC99 | 33CCCC | 33CCFF |
| 33FF00 | 33FF33 | 33FF66 | 33FF99 | 33FFCC | 33FFFF |
| 660000 | 660033 | 660066 | 660099 | 6600CC | 6600FF |
| 663300 | 663333 | 663366 | 663399 | 6633CC | 6633FF |
| 666600 | 666633 | 666666 | 666699 | 6666CC | 6666FF |
| 669900 | 669933 | 669966 | 669999 | 6699CC | 6699FF |
| 66CC00 | 66CC33 | 66CC66 | 66CC99 | 66CCCC | 66CCFF |
| 66FF00 | 66FF33 | 66FF66 | 66FF99 | 66FFCC | 66FFFF |
| 990000 | 990033 | 990066 | 990099 | 9900CC | 9900FF |
| 993300 | 993333 | 993366 | 993399 | 9933CC | 9933FF |
| 996600 | 996633 | 996666 | 996699 | 9966CC | 9966FF |
| 999900 | 999933 | 999966 | 999999 | 9999CC | 9999FF |
| 99CC00 | 99CC33 | 99CC66 | 99CC99 | 99CCCC | 99CCFF |
| 99FF00 | 99FF33 | 99FF66 | 99FF99 | 99FFCC | 99FFFF |
| CC0000 | CC0033 | CC0066 | CC0099 | CC00CC | CC00FF |
| CC3300 | CC3333 | CC3366 | CC3399 | CC33CC | CC33FF |
| CC6600 | CC6633 | CC6666 | CC6699 | CC66CC | CC66FF |
| CC9900 | CC9933 | CC9966 | CC9999 | CC99CC | CC99FF |
| CCCC00 | CCCC33 | CCCC66 | CCCC99 | CCCCCC | CCCCFF |
| CCFF00 | CCFF33 | CCFF66 | CCFF99 | CCFFCC | CCFFFF |
| FF0000 | FF0033 | FF0066 | FF0099 | FF00CC | FF00FF |
| FF3300 | FF3333 | FF3366 | FF3399 | FF33CC | FF33FF |
| FF6600 | FF6633 | FF6666 | FF6699 | FF66CC | FF66FF |
| FF9900 | FF9933 | FF9966 | FF9999 | FF99CC | FF99FF |
| FFCC00 | FFCC33 | FFCC66 | FFCC99 | FFCCCC | FFCCFF |
| FFFF00 | FFFF33 | FFFF66 | FFFF99 | FFFFCC | FFFFFF |
لیست جلسات قبل آموزش CSS
.svg)
دیدگاه شما