رنگ ها در CSS



در بسیاری از مواقع در قسمت های مختلف سایت از رنگ ها استفاده می کنیم مانند رنگ پس زمینه، حاشیه، متون و … این به زیبایی و جذابیت سایت کمک زیادی می کند. از رنگ ها در قسمت های مختلف سایت استفاده می شود. بنابراین رنگ ها در CSS بسیار مهم هستند. اکنون می خواهیم بدانیم که چگونه می توان از رنگ ها استفاده کرد. روش های مختلف استفاده از رنگ ها در HTML و CSS. روش اول این است که می توانیم مستقیماً از نام رنگ استفاده کنیم. (آبی) روش دوم استفاده از قالب های رنگی است. انواع قالب های رنگی. اکنون باید بدانیم که چگونه از هر یک از آنها استفاده کنیم. توجه داشته باشید که ما می توانیم با توجه به سلیقه خود از هر یک از این فرمت ها استفاده کنیم، اما HEX رایج ترین آنهاست. قبل از آشنایی با ساختار قالب ها باید بگوییم که به طور کلی هر رنگی که وجود دارد از ترکیب سه رنگ اصلی قرمز، سبز و آبی به دست می آید. کاهش یا افزایش مقدار هر یک از این سه رنگ رنگ جدیدی می دهد. ساختار RGB ساختار فرمت RGB به این صورت است: rgb (قرمز، سبز، آبی) هر یک از رنگ‌های قرمز، سبز، آبی، میزان استفاده آنها میزان خروج آن رنگ را تعیین می‌کنند. مقدار عددی هر یک از این رنگ ها عددی بین 0 تا 255 است به عنوان مثال rgb(180,180,180) نوعی رنگ خاکستری ایجاد می کند. و rgb(0,255,0) نشان دهنده رنگ سبز است. ساختار هگز این فرمت به این صورت است: #rrggbb همانطور که می بینید در این حالت باید رنگ ها را به صورت عددی بر اساس 16 انتخاب کنیم در واقع به جای هر یک از rr و gg و … می توانیم از حروف a، b،… تا بالاترین حد استفاده کنید، مثلاً #ff0000 رنگ قرمز را به ما نشان می دهد. برای آشنایی با رنگ های ایجاد شده می توانید مقادیر مختلفی را امتحان کنید. فرمت hslhsl مخفف اصطلاحاتی مانند hue، saturation و lightness است. برای استفاده از این فرمت باید ساختار زیر را دنبال کنیم. hsl (رنگ، ​​اشباع، روشنایی) پارامتر اول که به معنی رنگ است، مقداری بین 0 درجه تا 360 درجه می گیرد. پارامتر دوم که مربوط به اشباع رنگ است از 0% تا 100% قابل تنظیم است. توجه داشته باشید که 100% به معنای پر رنگ و 0% به معنای کم رنگ است. در نهایت مقدار روشنایی یا میزان نور رنگ را مشخص می کند که می توانیم 0% یا 100% بدهیم. مقدار 0% به این معنی است که نور در آن وجود ندارد، بنابراین رنگ ما سیاه خواهد شد و مشخص است که اگر مقدار آن را 100% قرار دهیم، سفید می شود. فرمت rgba اگر دقت کنید متوجه می شوید که این فرمت همان فرمت rgb است که a به آن اضافه شده است. اما این به چه معناست؟ a که مخفف کانال آلفا است، سطح شفافیت رنگ را مشخص می کند. می توانیم به مقدار آن عددی بین صفر و یک بدهیم. ساختار آن به این صورت است: rgba (قرمز، سبز، آبی، آلفا) به عنوان مثال: rgba (255، 99، 71، 0.4) توجه کنید که چقدر شفافیت پشت رنگ قابل مشاهده است و زمانی که یک رنگ کم رنگ است، متفاوت است. فرمت hsla فرمت hsla نیز مانند فرمت hsl با شفافیت اضافه است. برای آشنایی بیشتر با این موضوع می توانید ویدیوی مربوطه را مشاهده کنید.

دیدگاهتان را بنویسید