رنگ در طراحی سایت

در این مقاله ، اسکات کلوم نکاتی را درباره کاربرد رنگ در طراحی سایت بیان می کند . در ذهن انسان ، هر رنگ به تناسب نامی که به آن نسبت داده می شود تفسیر می شود . همان طور که هر چیز مانند ابعاد یک شئ قابل اندازه گیری است ، رنگ در طراحی سایت نیز باید سنجیده شده به کار گرفته شوند .

کاربرد رنگ در طراحی سایت

رنگ ها در تایپوگرافی سایت و جذب کاربر نقش بسیار مهمی ایفا می کنند . پس از آزمایشات ایزاک نیوتون بر روی منشور ، انسان متوجه شد که نور از رنگ های متعددی تشکیل شده است . هنرمندان از رنگ های قرمز و زرد و آبی به عنوان رنگ های پایه استفاده می کنند و از زمان نیوتون تا به حال دید و علم انسان نسبت به رنگ ها تکامل یافته است . چشم هر فرد دارای گیرنده های مختلفی است که گیرنده هایی با نام “rod” برای تشخیص سیاه و سفید است و گیرنده هایی با نام “cone” سه رنگ پایه ای قرمز و سبز و آبی را تشخیص می دهند .
این رنگ ها برای طراحان وب سایت آشناست ، چرا که هر پیکسل از نمایشگر متشکل از این سه رنگ می باشد . هر رنگ دارای ۲۵۶ تنوع می باشد که در مجموع بیش از ۱۶ میلیون رنگ متنوع وجود دارد . می توان رنگ ها را با تابع رنگ (۲۵۵،۱۱۵،۰)rgb و یا در مبنای هشت#ff7300 تعریف کرد ، هر دو تابع رنگ یکسانی را از دو طریق کمی متفاوت تعریف می کنند .

توجه به تناسب رنگ در طراحی سایت

برای شروع به صحبت درباره تناسب رنگ در طراحی سایت ، از تابع رنگ hsl() در CSS استفاده می کنیم . این تابع رنگ ها را به صورت هیو (HUE) ، پر رنگی (Saturation) و روشنایی (Lightness) به کار می گیرد . هیو با واحد درجه (۰-۳۶۰) و پر رنگی و روشنایی با واحد درصد (۰-۱۰۰) بیان می شود .
بنابراین ، مقادیر هیو بر روی دایره رنگ (colour wheel) ترسیم می شوند . مثلا اگر رنگ قرمز(۰) را دارید و رنگ زرد را می خواهید ، کافی است هیو را به ۶۰ تغییر دهید . در کاربرد رنگ ها ، از اصل رنگ های مکمل استفاده می شود ؛ دو رنگ مکمل در دو سمت مخالف دایره رنگ . مثلا برای یافتن مکمل قرمز ، باید رنگی با مقدار ۱۸۰ درجه را بیابیم . در این مثال ، ۰ (قرمز) + ۱۸۰ ، رنگ حاصل فیروزه ای می باشد .
پر رنگی و روشنایی کم آسان تر است . رنگ با غلظت ۱۰۰ هیچ تیرگی ندارد ، اما غلظت ۰ کاملا تیره است . در روشنایی ، ۰ سیاه و ۱۰۰ سفید است . چون تفکر ما معمولا با هیو رنگ ها گره خورده است ، از نظر مقیاس رنگ ها بهتر است از پر رنگی و روشنایی استفاده کنیم .

استفاده از رنگ ها با ساس (SASS)

اکنون شما فهم کلی از کاربرد رنگ ها در طراحی وب سایت دارید . به هر حال ، فقط با سی اس اس نمی توان استفاده جامع و کاملی از رنگ ها داشت . ساس شامل توابع رنگ متعددی می باشد که می توانید به وسیله آن از جنبه های مختلف کاربرد رنگ ها استفاده کنید . از جمله توابع ساس ، توابع HSL است که برای تیرگی ، روشنی ، غلظت ، رقت و تنظیم هیو استفاده می شوند . مثال هایی از ساس :

SASS از نظر تکنیک های کاربری رنگ ها بسیار کامل تر از CSS است

مثالی از قرار دادن رنگ اولیه به وسیله ساس

مثالی از قرار دادن رنگ مکمل برای رنگ اولیه

مثالی از تابع mix برای ترکیب دو رنگ

مثالی از تابع lightness برای تمایز رنگ متن سایت از تم سایت

به کارگیری رنگ متناسب در عمل

تاکنون مطالب تقریبا انتزاعی بیان شدند ، حال وقت آن است که وارد عمل شویم . رنگ تم ها به سادگی قابل تغییر است . شما می توانید از یک رنگ فقط برای یک مکان و یا برای چندین صفحه وب سایت استفاده کنید . تیره و روشن تر و یا غلیظ و رقیق تر کردن رنگ ها در مکان های متفاوت ، می تواند جلوه سایت را منعطف و زیباتر کند . به هر حال با توجه به رنگ ها در طراحی صفحات وب سایت می توانید طرحی قوی تر برای سایت ارائه کنید .