راهنماهای رنگ
راهنماهای کوتاه و کاربردی دربارهٔ رنگ برای صفحهنمایش: فرمتها، کنتراست، پالتها، حالت تاریک و CSS. همهٔ اعداد محاسبهشدهاند و همهٔ نمونهها قابل کپیاند.
- OKLCH به زبان ساده: فرمت رنگی که بالاخره با چشم شما هماهنگ استOKLCH هر رنگ را با سه چیز توصیف میکند: چقدر روشن به نظر میرسد، چقدر پررنگ است و چه فامی دارد. برخلاف HSL، یک مقدار روشنایی ثابت در همه فامها واقعاً به یک اندازه روشن دیده میشود. همین باعث میشود پالتها، حالتهای هاور و کنتراست دسترسپذیر قابل پیشبینی باشند.۶ مهر ۱۴۰۵3 دقیقه مطالعه
- APCA در برابر WCAG 2: به کدام بررسی کنتراست اعتماد کنیمنسبت کنتراست WCAG 2 همان چیزی است که قانون میخواهد. APCA مدلی جدیدتر است که خوانایی را خیلی دقیقتر پیشبینی میکند، بهخصوص در تم تیره و رنگهای اشباعشده. با بررسی هر دو، متنی دارید که هم با استانداردها منطبق است و هم واقعاً راحت خوانده میشود.۶ مهر ۱۴۰۵3 دقیقه مطالعه
- گاموت رنگ به زبان ساده: sRGB، Display P3 و رنگهای بیرون از گاموتگاموت مجموعه رنگهایی است که یک صفحهنمایش یا یک فضای رنگی میتواند نشان دهد. وب بر پایه sRGB ساخته شده، اما امروز بیشتر گوشیها و بسیاری از لپتاپها Display P3 را نشان میدهند که قرمزها، سبزها و نارنجیهای آن بهوضوح زندهترند.۶ مهر ۱۴۰۵2 دقیقه مطالعه
- فرمتهای رنگ به زبان ساده: HEX، RGB، HSL، OKLCH و بقیهیک رنگ را میشود به دهها شکل نوشت. اینجا میبینید هر فرمت چه معنایی دارد، کی باید از آن استفاده کنید و یک رنگ در همه آنها چطور نوشته میشود.۶ مهر ۱۴۰۵2 دقیقه مطالعه
- کد رنگ HEX به زبان ساده: #RRGGBB چطور کار میکندیک کد رنگ HEX مثل #1e90ff سه جفت رقم شانزدهشانزدهی است: میزان نور قرمز، سبز و آبی، هر کدام از 00 (هیچ) تا ff (کامل، یعنی 255). با یک جفت چهارم کدری را تعیین میکنید: 80 یعنی حدود 50% و ff یعنی کاملاً مات.۶ مهر ۱۴۰۵6 دقیقه مطالعه
- چگونه برای وبسایت یا اپلیکیشن پالت رنگ انتخاب کنیماز یک رنگ برند شروع کنید، از آن مقیاسی از 50 تا 950 بسازید، خاکستریهایی با تهرنگ ملایم و چهار رنگ معنایی اضافه کنید، بعد کنتراست و کوررنگی را برای هر جفت متن و پسزمینه بسنجید. درجهها را با روشنایی OKLCH انتخاب کنید، نه با چشم: روی پسزمینه سفید، متن وقتی روشنایی به حدود 0.55 برسد WCAG AA را پاس میکند، فام هر چه باشد.۶ مهر ۱۴۰۵7 دقیقه مطالعه
- رنگهای حالت تاریک: انتخاب پسزمینه، متن و رنگ تأکیدیبهجای سیاه خالص از پسزمینه خاکستری تیرهای مثل #121212 استفاده کنید، بهجای سفید خالص از متن سفید شکستهای مثل #e5e5e5، و از نسخههای روشنتر و کماشباعتر رنگهای برندتان. متن را علاوه بر WCAG 2 با APCA هم بسنجید، چون WCAG 2 کنتراست را روی پسزمینههای تیره بیش از واقع نشان میدهد.۶ مهر ۱۴۰۵6 دقیقه مطالعه
- هارمونی رنگ: مکمل، مشابه، سهگانه و بیشترهارمونی رنگ، فامها را با زاویههای ثابت روی چرخه رنگ انتخاب میکند: فاصله 180° برای مکمل، 30° برای مشابه و 120° برای سهگانه. اگر فام را بهجای HSL در OKLCH بچرخانید، رنگها به یک اندازه روشن میمانند و هیچ فامی ناخواسته بیرون نمیزند.۶ مهر ۱۴۰۵5 دقیقه مطالعه
- تابع color-mix() و رنگ نسبی در CSS: هاور، نسخه روشنتر و شفافیتتابع color-mix() دو رنگ را در فضای رنگی دلخواه شما ترکیب میکند و سینتکس رنگ نسبی اجازه میدهد یک کانال از رنگی موجود را تغییر دهید، مثلاً oklch(from var(--brand) calc(l - 0.1) c h). هر دو در مرورگر اجرا میشوند، با متغیرهای CSS کار میکنند و جای بیشتر توابع رنگ Sass را میگیرند. برای نسخههای روشنتر و هاور در oklab ترکیب کنید و برای شفافیت در srgb.۶ مهر ۱۴۰۵7 دقیقه مطالعه
- پالت رنگ مناسب افراد کوررنگ: چطور رنگها را بررسی و اصلاح کنیدپالت رنگ مناسب افراد کوررنگ هر جفت رنگ را در پروتانوپیا، دوترانوپیا، تریتانوپیا و حالت خاکستری قابل تشخیص نگه میدارد. مطمئنترین راهحل یک فام خاص نیست، بلکه فاصلهٔ روشنایی است: رنگهایی که روشنایی OKLCH آنها حدود 0.2 با هم فرق داشت، در همهٔ شبیهسازیهای ما از هم متمایز ماندند. این را با آیکون یا برچسب همراه کنید، چون رنگ بهتنهایی همیشه برای کسی کار نمیکند.۶ مهر ۱۴۰۵7 دقیقه مطالعه
- رنگهای Tailwind CSS: پالت OKLCH در v4، رنگهای سفارشی و درجههاTailwind CSS v4 شامل 26 مقیاس رنگی است که هر کدام 11 درجه از 50 تا 950 دارند؛ در مجموع 286 رنگ که در OKLCH و بهصورت متغیرهای CSS مثل --color-blue-500 تعریف شدهاند. رنگهای خودتان را با @theme { --color-brand-500: oklch(...) } اضافه میکنید. شمارهٔ درجهٔ یکسان به معنای روشنایی یکسان نیست: blue-600 روشنترین آبی است که روی سفید 4.5:1 را پاس میکند، اما زرد به 700 نیاز دارد.۶ مهر ۱۴۰۵7 دقیقه مطالعه