رنگ ها در CSS چه کاربردی دارند و چگونه باید از رنگ دلخواه خود در طراحی ها استفاده نمود؟ آموزش تبدیل رنگ ها به کد هگزادسیمال. امروز به شما آموزش کامل نحوه استفاده از رنگ ها در زبان CSS را آموزش(آموزش CSS) می دهیم.
رنگ ها در CSS چه کاربردی دارند؟
خوب خیلی واضح و ساده می توان گفت استفاده از رنگ ها در طراحی وب امری ملزوم می باشد. امکان ندارد در صفحه وب که طراحی می کنید. یا مشاهده می کنید از رنگ (Color) اسنفاده نشده باشد.
اگر در مورد زبان CSS مشکلی دارید پیشنهاد می کنم ابتدا مقاله CSS چیست و کاربرد آن در طراحی سایت را مطالعه کنید. این مقاله می تواند در آشنا کردن شما با زبان CSS بسیار مفید باشد.
برای نمایش رنگ ها در CSS می توان از روش های زیر استفاده نمود:
- Hexadecimal Color
- RGB Color
- RGBA Color
- HSL Color
- HSLA Color
- Color Name
Hexadecimal Color
یکی از پرکاربردترین شیوه استفاده از رنگ ها در طراحی وب، استفاده از رنگ ها به صورت هگزادسیمال می باشد. تمام مرورگرهای وب یا Browser ها از رنگ های هگزادسیمال پشتیبانی می کنند. در نتیجه گسترده ترین روش استفاده از رنگ در CSS، همین شیوه می باشد.
برای استفاده از کد رنگ هگزادسیمال به صورت زیر عمل می کنیم:
#RRGGBB
در الگوی بالا:
- R = Red (قرمز)
- G = Green (سبز)
- B = Blue (آبی)
می باشد. که همچنین می توانید به صورت RGB# نیز استفاده کنید. اما این روش زیاد مرسوم نیست.
مثال:
Color:#cc00cc; | Color#DFF0D8:
RGB Color
RGB Color نیز در تمام مرورگرهای وب پشتیبانی می شود. و نحوه استفاده از آن اینگونه می باشد که برای مثال:
color:rgb(red,green,blue)
به جای red,green,blue از اعداد بین 0 تا 255 استفاده می شود.
برای مثال: rgb(200,150,65). برای اینکه پیدا کردن این رنگ ها و همچنین به خاطر سپردن آنها مشکل می باشد. کمتر از آنها استفاده می شود.
RGBA Color
RGBA Color همان شکل RGB می باشد. البته با این تفاوت که می توان برای رنگی که استفاده می ود خاصیت Opacity یا میزان نمایان شدن رنگ، اضافه کرد. اگر می خواهید رنگی که استفاده می کنید را کم یا زیاد دیده شود از این حالا استفاده کنید. مثال:
Color:rgba(122,50,199,0.5)
در شکل کد بالا مقدار A که 0.5 وارد شده است می تواند از 0 تا 1 باشد. هر میزان که عدد به سمت یک نزدیک تر باشد، شفافیت یا Opacity رنگ بیشتر می شود. و هرچه قدر به عدد صفر نزدیک باشد شفافیت یا نمایی رنگ کمتر می گردد.
HSL Color
HSL Color روشی دیگر برای استفاده از رنگ ها در CSS می باشد. البته استفاده از این روش کمی غیر متداول می باشد. زیرا دارای پیچیدگی می باشد. اگر می خواهید یک رنگ را پر رنگ یا کم رنگ کنید استفاده از این روش پیشنهاد می شود.
HSL( hue, saturation, lightness );
Hue: یک درجه رنگی روی چرخه ی رنگه که از 0 تا 360 قابل تنظیم است. عدد 0 تا 360 تعریف کننده رنگ قرمز است. عدد 120 نشان تعریف کننده رنگ سبز است و عدد 240 هم نشان دهنده رنگ آبی است.
Saturation: بصورت درصدی تعیین می شود و حلقه ای از رنگ خاکستری به رنگ اصلی اضافه می کند. هرچه عدد این درصد کمتر باشد رنگ خاکستری بیشتری با رنگ اصلی ترکیب میشود و رنگ را تیره تر و مایل به خاکستری می کند.
lightnes: بصورت درصدی تعیین می شود و رنگ را متمایل به رنگ سیاه و یا سفید تبدیل میکند. هرچه این عدد کمتر باشد رنگ تیره تر میشود و به رنگ سیاه متمایل میشود و هرچه این عدد بیشتر باشد رنگ سفید بیشتری با رنگ اصلی ترکیب میشود و رنگ را روشن می کند.
مثال:
hsl(120,100%,50%) | hsl(170,100%,20%)
HSLA Color
HSLA Color نیز دقیقا همان HSL می باشد البته با این تفاوت که می توان میزان شفافیت را برای رنگ استفاده شده تنظیم نمود. روش استفاده از آن مانند مثال زیر می باشد.
hsl(120,100%,50%,0.5) | hsl(170,100%,20%,0.8)
Color Name
Color Name حالتی متداول از استفاده از رنگ ها می باشد. که توسط تمامی مرورگرها پشتیبانی می شود. همچنین خیلی عامیانه می توان نام رنگ خود را المنت یا عنصر مربوطه نسبت داد.
Color: red | Color: blue | Color: black | Color: green | Color: yellow
سایت های رنگ آنلاین
https://www.sessions.edu/color-calculator/
پیشنهاد می کنیم مقاله آموزش کامل Margin در CSS را مطالعه کنید. این آموزش شما به صورت کامل با مارجین در CSS آشنا می نماید.
با تشکر از همه دوستان عزیز که ما را با این آموزش همراهی کردند. وب سایت ویژوال کامپوزر فارسی به زودی هر آنچه را که در زمینه طراحی وب احتیاج دارید در اختیار شما قرا می دهد. با ما همراه باشید.