چرا یک پالت رنگی خوب کل طراحی را نگه میدارد
رنگهای اشتباه را انتخاب کنید و مردم آن را قبل از اینکه بتوانند توضیح دهند احساس میکنند. یک صفحه ارزان به نظر میرسد، یک لوگو گلآلود میشود، یک نمودار به نویز تبدیل میشود. رنگهای درست را انتخاب کنید و کار کلیک میکند: هدفمند، آرام، و آسان برای خواندن به نظر میرسد. رنگ کار آرامی انجام میدهد: حال و هوا را تعیین میکند، چشم را هدایت میکند، و به خواننده میگوید چه چیزی بیشتر اهمیت دارد. پس یک پالت تزئینی نیست که در آخر اضافه میکنید. تصمیمی است که زود میگیرید و تقریباً همه چیز به آن تکیه میکند.
خبر خوب این است که برای داشتن یک طرح محکم نیاز به مدرک هنرهای زیبا ندارید. به چند قانون از نظریه رنگ و یک روش سریع برای امتحان ایدهها نیاز دارید. دقیقاً همین کار یک مولد است: به شما اجازه میدهد دهها ترکیب را در مدتی که قبلاً صرف یک مورد میکردید بگذرانید.
نظریه رنگ، بدون اصطلاحات فنی
اکثر هماهنگیها از یک ایده ساده میآیند: اینکه رنگها نسبت به هم روی چرخه کجا قرار دارند. چهار الگو یاد بگیرید و میتوانید تقریباً هر طرحی را بخوانید یا بسازید.
- مکمل از دو رنگ مستقیماً روبروی هم استفاده میکند، مثل آبی و نارنجی. پرانرژی است و برای جلب توجه عالی است، اگرچه خیلی زیاد از هر دو برای تمرکز رقابت میکند، پس بگذارید یکی رهبری کند و دیگری را به عنوان تاکید استفاده کنید.
- آنالوگ از سه رنگ کنار هم استفاده میکند، مثل قرمز، نارنجی و زرد. کنتراست پایین، آرام، و نوعی هماهنگی است که در طبیعت میبینید. برای چشم راحت است، اما ممکن است نیاز باشید کنتراستی اضافه کنید تا چیزها صاف نشوند.
- سهگانه از سه رنگ با فاصله مساوی در اطراف چرخه استفاده میکند، مثل قرمز، زرد و آبی. روشن و متعادل است، وقتی یک رنگ غالب باشد و دو تای دیگر پشتیبانی کنند بهترین کار را میکند.
- تکرنگ یک رنگ را نگه میدارد و روشنایی و اشباع آن را تغییر میدهد. سادهترین طرحی است که وجود دارد، تمیز و منسجم، و یک پشتوانه خوب وقتی چیز دیگری درست حس نمیشود.
یک مولد تصادفی برای الهامگیری سرگرمکننده است، اما حالتهای هماهنگی جایی است که ارزش واقعی قرار دارد. رنگهایتان را از نظر ریاضی مرتبط نگه میدارند، پس قبل از هر تنظیمی به نظر میرسد به هم تعلق دارند.
HEX، RGB و HSL به زبان ساده
هر رنگی که کپی میکنید در چند نماد میآید، و همه آنها یک چیز را به شکلهای مختلف توصیف میکنند.
HEX کد شش کاراکتری است که بیشتر میبینید، مثل #3A7BD5. فقط قرمز، سبز و آبی است که در یک رشته بسته شدهاند، دو کاراکتر برای هر کدام. فشرده است و چیزی است که در CSS یا یک ابزار طراحی paste میکنید.
RGB همان سه کانال را به صورت اعداد ۰ تا ۲۵۵ مینویسد، مثل rgb(58, 123, 213). همان رنگ، خواندنیتر، و وقتی یک کانال alpha برای شفافیت میخواهید مفید است.
HSL رنگ را به روشی که مردم واقعاً فکر میکنند توصیف میکند: رنگدهنده (کدام رنگ، ۰ تا ۳۶۰ درجه در اطراف چرخه)، اشباع (چقدر زنده)، و روشنایی (چقدر روشن). راحتترین فرمت برای تنظیم دستی است، چون تغییر روشنایی یا اشباع دقیقاً کاری میکند که انتظار دارید بدون حدس زدن. اگر هرگز نیاز به تبدیل بین فرمتها داشتید، یک تبدیل HEX به RGB سریع آن را بدون دردسر انجام میدهد.
کنتراست و دسترسیپذیری را فراموش نکنید
یک پالت میتواند زیبا به نظر برسد و در لحظهای که کسی میخواهد متن را روی آن بخواند شکست بخورد. کنتراست جایی است که زیبایی با قابلیت استفاده تلاقی میکند. دستورالعملهای دسترسیپذیری محتوای وب (WCAG) یک سقف مشخص تعیین میکند: متن اصلی بدنه باید حداقل نسبت کنتراست ۴.۵ به ۱ در مقابل پسزمینهاش داشته باشد، و متن بزرگ حداقل ۳ به ۱. این بوروکراسی نیست؛ تفاوت بین خوانندهای است که به راحتی صفحه را میخواند و کسی که اخم میکند، تسلیم میشود و میرود.
اقدام عملی این است که جفتهای پیشزمینه و پسزمینه را هنگام ساخت آزمایش کنید، نه بعد. خاکستری روشن روی سفید ممکن است در یک موکاپ زیبا به نظر برسد و در روز روشن روی گوشی غیرقابل دید شود. وقتی یک ترکیب شکست میخورد، معمولاً فقط نیاز است یک رنگ را تیرهتر یا روشنتر کنید، نه کل طرح را دور بیندازید. رنگهای تاکیدی روشن را برای دکمهها، لینکها و برجستهسازیها نگه دارید نه بخشهای طولانی متن، و اکثر مشکلات کنتراست قبل از شروع برطرف میشوند.
یک جریان کار عملی
یک روش وجود دارد که در پروژهها جواب میدهد. با یک رنگ لنگر که از آن مطمئن هستید شروع کنید، اغلب یک رنگ برند یا رنگدهندهای که با حال و هوای مورد نظرتان مطابقت دارد. آن را قفل کنید، سپس بگذارید مولد یک هماهنگی اطراف آن بسازد. مکمل، آنالوگ و سهگانه را بچرخانید تا چیزی درست حس شود، و در دور اول خیلی فکر نکنید؛ دنبال یک جهت میگردید، نه جواب نهایی.
بعد از داشتن یک کاندیدا، نقشها را تعیین کنید. یک رنگ غالب برای پسزمینهها و مناطق بزرگ، یکی ثانویه برای ساختار، و یک تاکید پررنگ برای بیتهایی که باید بدرخشند انتخاب کنید. یک تقسیم ۶۰-۳۰-۱۰ تقریبی، از غالب به ثانویه به تاکید، چیزها را بدون احساس سختگیری متعادل نگه میدارد. سپس کنتراست را روی هر جفت متنی بررسی کنید، کدهای هگزادسیمال را کپی کنید و تمام. آنهایی که کار میکنند را ذخیره کنید، چون پالتی که برای یک پروژه درست کردهاید اغلب دانهای برای پروژه بعدی است. وقتی آماده ادامه بودید، بقیه مجموعه همه مولدها میتواند قطعات دیگر را مدیریت کند.
سوالات متداول
آیا این مولد پالت رنگی رایگان است؟
بله. کاملاً در مرورگر شما اجرا میشود، ثبتنامی نیست، و میتوانید هر تعداد پالت که دوست دارید بدون هزینهای تولید کنید.
تفاوت پالت تصادفی و هماهنگ چیست؟
پالت تصادفی پنج رنگ نامرتبط برای الهامگیری میدهد. یک طرح هماهنگ، مثل مکمل یا سهگانه، رنگها را از نظر ریاضی روی چرخه رنگ مرتبط نگه میدارد تا با هم متعادل و هدفمند به نظر برسند.
چطور یک کد رنگ را کپی کنم؟
روی کد هگزادسیمال زیر هر نمونه کلیک کنید تا در کلیپبورد کپی شود. سپس میتوانید آن را مستقیماً در CSS، یک ابزار طراحی، یا هر جای دیگری که نیاز دارید paste کنید.
کنتراست WCAG به چه معنی است و چرا باید اهمیت بدهم؟
WCAG استاندارد دسترسیپذیری وب است. یک نسبت کنتراست حداقل ۴.۵ به ۱ بین متن معمولی و پسزمینهاش میخواهد تا افراد، از جمله کسانی با بینایی ضعیف، بتوانند محتوای شما را راحت بخوانند.
کدام هماهنگی رنگ را انتخاب کنم؟
بستگی به حال و هوا دارد. مکمل جسورانه و پرانرژی است، آنالوگ آرام و طبیعی، سهگانه زنده و متعادل، و تکرنگ تمیز و بدون خطاست. چند تا امتحان کنید و ببینید کدام با پروژهتان مناسب است.
میتوانم رنگها را به RGB یا HSL تبدیل کنم؟
بله. هر رنگی به HEX، RGB و HSL نگاشت میشود چون همه آنها همان مقدار را توصیف میکنند. اگر نیاز دارید فرمت را سریع تغییر دهید از ابزار HEX به RGB ما استفاده کنید.