این آموزش در تاریخ ۱۴۰۲/۰۶/۲۱ آپدیت شده است.
آموزش کار با کدهگزادسیمال رنگ ها در طراحی وب
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کار با کدهگزادسیمال رنگ ها در طراحی وب با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
کدهگزادسیمال رنگ ها در طراحی وب
کد هگزادسیمال یا به انگلیسی Hexadecimal و یا بطور خلاصه Hex به یک کد ۶ مقداری یا ۸ مقداری که از ترکیب ۳ رنگ اصلی ( قرمز، سبز و آبی ) ایجاد شده است گفته می شود.
یعنی در واقع کد ۶ رقمی از ۳ بخش تشکیل می شود و هر بخش از ۲ مقدار که این مقدارها از ترکیب رنگ های قرمز و سبز و آبی بدست می آیند ، و کد ۸ رقمی نیز ۶ رقم اولش یک مقدار از ترکیب رنگ های قرمز و سبز و آبی می باشد و ۲ رقم آخر میزان شفافیت ( کانال آلفا یا Alpha ) رنگ را مشخص میکند.
Free-Learn
کد هگزادسیمال ۶ رقمی
شکل کلی یک کدهگزادسیمال ۶ رقمی بصورت زیر می باشد :
|
1 |
#RRGGBB |
اول از هرچیز باید یک علامت شارپ یا # گذاشته سپس : rr یعنی محدوده رنگ (قرمز) – gg یعنی محدوده رنگ (سبز) و bb یعنی محدوده رنگ (آبی) که هر از این مقدارها میتوانند از ۰۰ تا FF باشند.
این کد هم میتونه عدد باشه و هم حرف ، یعنی عدد از ۰ تا ۹ و حرف از A تا F ، همچنین میتوان از ترکیب عدد و حرف نیز استفاده کرد.
مثال : مشخص کردن رنگ زمینه و رنگ متن با استفاده از کدهگزادسیمال ۶ رقمی
|
1 2 3 4 5 6 7 |
<body> <p style="background-color:#5046CD; color:#ffffff;"> Salam Khobi? </p> </body> |
Free-Learn
کد هگزادسیمال ۸ رقمی
این کد هم همون ۶ رقمی هست و در کل هیچ فرقی ندارند فقط در این حالت ۸ رقم باید مشخص کرد و ۲ رقم آخر میشه همون کانال آلفا ( برای تنظیم میزان شفافت ) که این کانال آلفا هم از AA تا FF یا از ۰۰ تا ۹۹ مقدار میگیره.
یعنی ۰۰ میزان شفافیت کامل می باشد ( کاملا شفاف ) و FF یعنی رنگ کاملا مات ( شفافیت ۰ ) می باشد.
شکل کلی یک کدهگزادسیمال ۸ رقمی بصورت زیر می باشد :
|
1 |
#RRGGBB[alpha] |
مثال : استفاده از کدهگزادسیمال ۸ رقمی ( از شفافیت کم تا زیاد )
|
1 2 3 4 5 6 7 8 9 10 |
<body> <p style="background-color:#9B8B6611;">سایت آموزشی فری لرن</p> <p style="background-color:#9B8B6633;">سایت آموزشی فری لرن</p> <p style="background-color:#9B8B6655;">سایت آموزشی فری لرن</p> <p style="background-color:#9B8B6677;">سایت آموزشی فری لرن</p> <p style="background-color:#9B8B6699;">سایت آموزشی فری لرن</p> <p style="background-color:#9B8B66;">سایت آموزشی فری لرن</p> </body> |
با استفاده از کدرنگ rgba نیز میتونیم از کانال آلفا برای مشخص کردن میزان شفافیت رنگ استفاده کنیم.
Free-Learn
تولید رنگ سیاه و سفید توسط کدهگزادسیمال
برای تولید رنگ سیاه باید از کد ۰ استفاده کرد و برای تولید رنگ سفید از کد f ، حال چون ما ۶ مقدار باید وارد کنیم پس میتونیم به اینصورت رنگ سیاه و سفید رو ایجاد نماییم :
|
1 2 |
#000000 #ffffff |
اگه فقط ۳ مقدار از کدهای زیر را بنویسیم بازم خروجی بهمون میده. لطفا به مثال زیر توجه نمایید
مثال : تنظیم رنگ زمینه سیاه و رنگ متن سفید ( ۳ رقم از کدهارو بنویسیم هم جواب میده )
|
1 2 3 4 5 6 7 |
<body> <p style="background-color:#000; color:#fff;"> Salam Khobi? </p> </body> |
Free-Learn
کدها به حروف بزرگ و کوچک انگلیسی حساس نیستند پس میتونیم هم از حروف بزرگ و هم کوچک و هم ترکیبی استفاده کنیم.
مثال : استفاده از کدهگزادسیمال با حروف بزرگ و کوچک بصورت ترکیبی
|
1 2 3 4 5 6 7 |
<body> <p style="background-color:#9b8B66; color:#fFf;"> Salam Khobi? </p> </body> |
Free-Learn
مجموعه ای از کد رنگ های هگزادسیمال
