تکنیک های پیشرفته رنگ آمیزی در CSS — از صفر تا صد

شما که این مقاله را برای مطالعه انتخاب کرده‌اید، احتمالاً با قالب‌های مختلف رنگی موجود در CSS مانند کلیدواژه‌ها، سیستم مختصات مکعبی RGB یعنی hexadecimal() ،#-rgb و ()rgba و سیستم مختصات استوانه‌ای HSL یعنی ()hsl و ()hsla آشنا هستید. در این مقاله با تکنیک های پیشرفته رنگ آمیزی در CSS آشنا خواهیم شد. بدین ترتیب ساختارهای جدیدتر رنگی و تکنیک‌های انسجام در مقیاس را برای ایجاد رنگ‌های مستقل از دستگاه بررسی می‌کنیم.

نسخه‌های مختلف ساختارهای موجود

شما به احتمال زیاد با واریاسیون‌های ساختارهای زیر برای استفاده از رنگ‌ها آشنا هستید.

فیلم آموزش ساخت انیمیشن در سی اس اس CSS در فرادرس

کلیک کنید

کلیدواژه‌ها

color: transparent;
color: dodgerblue;
color: royalblue;

# Hexadecimal

#RGB[A] - R/G/B are hexadecimal values between 0-9, A-F with optional A (alpha value)
color: #05f;

color: #05f0; // (Fully transparent)
color: #05ff; // (Fully opaque)
#RRGGBB[AA] - RR/GG/BB are hexadecimal values between 0-9, A-F with optional AA (alpha value)

color: #0055ff;
color: #0055ff00; // (Fully transparent)
color: #0055ffff; // (Fully opaque)

RGBA

rgb[a]() - r/g/b values between 0-255 or 0%-100% and an optional a (alpha value) between 0-1 or 0%-100%
color: rgb(0, 85, 255);

color: rgba(0, 85, 255, 0);
color: rgba(0, 85, 255, 1);
color: rgba(0, 85, 255, 0%);
color: rgba(0, 85, 255, 100%);
color: rgb(0%, 33.3%, 100%);
color: rgba(0%, 33.3%, 100%, 0%);
color: rgba(0%, 33.3%, 100%, 100%);

HSL[A]

hsl[a]() - h value between 0-360, s value between 0%-100%, l value between 0%-100%, and an optional a (alpha value) between 0-1 or 0-100%

color: hsl(220, 100%, 50%);
color: hsla(220, 100%, 50%, 0);
color: hsla(220, 100%, 50%, 1);
color: hsla(220, 100%, 50%, 0%);
color: hsla(220, 100%, 50%, 100%);

واریاسیون‌های ساختار جدیدتر

در این بخش برخی بهینه‌سازی‌های ساختاری که روی تابع color در CSS انجام یافته است را بررسی می‌کنیم.

مقدار آلفا در تابع‌های RGB و HSL

امروزه برای افزودن مقدار آلفا به رنگ‌ها دیگر نیازی به تابع‌های ()rgba یا ()hsla نداریم.

color: rgb(0, 85, 255, 1);
color: rgb(0, 85, 255, 100%)
color: hsl(220, 100%, 50%, 1);
color: hsl(220, 100%, 50%, 100%);

عدم الزامی بودن استفاده از کاما

در نسخه‌های جدیدتر از تابع‌های رنگی کافی است بین مقادیر از فاصله استفاده کنید و دیگر لزومی به استفاده از کاما وجود ندارد. اگر در فضای رنگی نیاز به شفافیت دارید، کافی است بین رنگ و مقدار آلفا از کاراکتر / استفاده کنید.

color: rgb(0 85 255);
color: hsl(220 100% 50%);
color: rgb(0 85 255 / 1);
color: rgb(0 85 255 / 100%);
color: hsl(220 100% 50% / 1);
color: hsl(220 100% 50% / 100%);

نمایه‌های رنگی برای رنگ‌های مستقل از دستگاه

آیا می‌دانید آن رنگی که در CSS می‌نویسید ممکن است آن رنگی که کاربران می‌بینند نباشد؟

رنگ‌ها در CSS از چیزی به نام «نمایه رنگی» (color profile) استفاده می‌کنند. در مدل رنگی RGB می‌توانیم 16.7 میلیون رنگ مختلف را نمایش دهیم. اغلب کاربران نمایشگرهایی با نمایه رنگی sRGB دارند، اما اگر از دستگاه‌های مک یا نمایشگرهای مدرن استفاده کنید، ممکن است نمایه‌هایی مانند Display P3 یا Adobe RGB استفاده کنند که از طیف رنگی بیشتری نسبت به sRGB پشتیبانی می‌کنند و به کاربران امکان مشاهده رنگ‌های درخشان‌تر و براق‌تر نسبت به نمایشگر sRGB معمولی را می‌دهند.

چندین نمایه رنگی وجود دارند که گاموت‌های وسیع‌تری از رنگ را پشتیبانی می‌کند و از آن جمله Adobe RGB, Prophoto RGB, Rec-2020 و غیره هستند. بنابراین رنگ‌هایی که در زمان توسعه اپلیکیشن‌ها در CSS می‌نویسید دقیقاً همان رنگ‌هایی نیستند که کاربران می‌بینند و همه چیز به نمایه رنگی مورد استفاده از سوی نمایشگر کاربر بستکی دارد. CSS از نمایه‌های رنگی پشتیبانی نمی‌کند و از این رو توسعه‌دهندگان مجبور هستند خود را به طیف رنگی sRGB محدود کنند. اما این اوضاع در آینده تغییر خواهد یافت.

معرفی تابع ()color

تابع ()color امکان می‌دهد که نمایه رنگی را قبل از یک رنگ تعریف کنیم و به این ترتیب توسعه‌دهندگان می‌توانند رنگ‌های مستقل از دستگاه را تعریف کنند. طرز کار به صورت زیر است:

color(profile r g b) - profile takes in the color profile name, followed by r/g/b values between 0-1

color: color(display-p3 0 0 0);

در ادامه فهرستی از نمایه‌های رنگی که در CSS سطح 4 پشتیبانی می‌شود را می‌بینید:

• srgb (Default)
• display-p3
• a98-rgb
• prophoto-rgb
• rec-2020

اگر می‌خواهید از یک نمایه رنگی مدرن استفاده کنید، می‌توانید از color-profile@ برای ایمپورت نمایه و بقیه کارها استفاده کنید. روش کار به صورت زیر است:

1color: color(--swopc 0.0134 0.8078 0.7451 0.3019);
2// Add the profile URL to import the color profile and name the 
3// profile starting with --
4@color-profile --swopc {
5  src: url('http://example.org/swop-coated.icc');
6}

به خاطر بسپارید که تابع ()color در حال حاضر تنها در مرورگرهای Safari پشتیبانی می‌شود و شاید به زودی شاهد پشتیبانی آن در مرورگرهای کروم و فایرفاکس نیز باشیم. اگر می‌خواهید از ()color استفاده کنید و یک fallback نیز داشته باشید، می‌توانید به صورت زیر عمل کنید:

color: rgb(0, 0, 0);
color: color(display-p3 0 0 0);

اگر می‌خواهید با استفاده از جاوا اسکریپت تشخیص دهید که آیا نمایشگرتان از نمایه رنگی پشتیبانی می‌کند یا نه می‌توانید از کد زیر بهره بگیرید:

1if (window.matchMedia("(color-gamut: p3)").matches) {
2  // Code to color up your app
3}

چه لزومی به استفاده از نمایه رنگی در CSS وجود دارد؟

در واقع شما الزامی برای این کار ندارید. نمایه‌های رنگی یک قابلیت جدید CSS هستند و در حال حاضر تنها در سافاری (و نه حتی کروم) پشتیبانی می‌شوند. نمایه‌های رنگی به شما امکان می‌دهند که از مزیت نمایشگرهای مدرن که از گاموت وسیع‌تری پشتیبانی می‌کنند بهره‌مند شوید و تجربه کاربری بهتری رقم بزنید.

فیلم مجموعه آموزش طراحی سایت با HTML و CSS – مقدماتی تا پیشرفته در فرادرس

کلیک کنید

گاهی اوقات تفاوت رنگ‌ها به زحمت قابل تشخیص است و گاهی اوقات این تفاوت زیاد است. این مقایسه تعاملی (+) تفاوت بین نمایه‌های رنگی مختلف را روی نمایشگرها به شما نشان می‌دهد.

سخن پایانی

امیدواریم این مقاله با عنوان معرفی تکنیک‌های پیشرفته رنگ‌آمیزی در CSS به شما کمک کرده باشد با تازه‌های این حوزه آشنا شوید و بتوانید از آن‌ها در پروژه‌های خود بهره بگیرید.