راهنمای رنگ CSS با وضوح بالا

CSS Color 4 ابزارها و قابلیت‌های رنگی گسترده‌ای را به وب می‌آورد: رنگ‌های بیشتر، عملکردهای دستکاری، و گرادیان‌های بهتر.

Adam Argyle

برای بیش از 25 سال ، sRGB (استاندارد قرمز سبز آبی) تنها طیف رنگی برای شیب ها و رنگ های CSS بوده است، با ارائه فضای رنگی در آن مانند rgb() ، hsl() و hex. این رایج ترین قابلیت وسعت رنگ در بین نمایشگرها است. یک مخرج مشترک ما به تعیین رنگ ها در این محدوده بسیار عادت کرده ایم.

https://almanac.httparchive.org/fa/2022/css#colors

همانطور که نمایشگرها توانایی بیشتری برای نشان دادن طیف گسترده ای از رنگ ها پیدا می کنند، CSS به راهی برای تعیین رنگ ها از درون این محدوده های وسیع تر نیاز دارد. فرمت‌های رنگی فعلی هیچ زبانی برای محدوده‌های رنگی گسترده ندارند.

اگر CSS هرگز به روز نمی شد، برای همیشه در محدوده رنگ های دهه 90 گیر می کرد و مجبور می شد هرگز با طیف گسترده ای که در تصاویر و ویدیوها وجود دارد مطابقت نداشته باشد. به دام افتاده ، تنها 30 درصد از رنگ هایی را که چشم انسان می تواند ببیند نشان می دهد. از CSS Color Level 4 برای کمک به ما برای فرار از این تله تشکر می کنیم. در درجه اول توسط لی ورو و کریس لیلی نوشته شده است.

Chrome 111 از طیف رنگی 4 و فضاهای رنگی CSS پشتیبانی می‌کند و به Safari می‌پیوندد که از سال 2016 از display-p3 پشتیبانی می‌کند. CSS اکنون می‌تواند از نمایشگرهای HD (با وضوح بالا) پشتیبانی کند، رنگ‌ها را از طیف‌های HD مشخص می‌کند و در عین حال فضاهای رنگی با تخصص‌ها را نیز ارائه می‌دهد. این راهنما توضیح می دهد که چگونه می توانید از این دنیای جدید رنگ استفاده کنید.

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

در مرورگرهای پشتیبانی کننده، 50 درصد رنگ های بیشتری برای انتخاب وجود دارد! شما فکر کردید که 16 میلیون رنگ بسیار زیاد است، صبر کنید تا ببینید برخی از این فضاهای جدید می توانند چند رنگ را نشان دهند. همچنین، به تمام آن گرادیان هایی فکر کنید که باند شدند ، زیرا عمق بیت کافی وجود نداشت، این نیز حل شده است.

علاوه بر رنگ‌های بیشتر، مسلماً زنده‌ترین رنگ‌هایی که نمایشگر می‌تواند داشته باشد ، فضاهای رنگی جدید ابزارها و روش‌های منحصربه‌فردی را برای مدیریت و ایجاد سیستم‌های رنگی فراهم می‌کنند. به عنوان مثال، قبلا HSL و کانال "سبک" آن را داشتیم که بهترین توسعه دهندگان وب بود. اکنون در CSS، "سبکی ادراکی " LCH را داریم.

برای خودتان پیش‌نمایش: https://codepen.io/web-dot-dev/pen/poZgXxy

علاوه بر این، گرادیان ها و مخلوط کردن برخی ارتقاها را دریافت می کنند: پشتیبانی از فضای رنگی، گزینه های درون یابی رنگ، و باند کمتر. تصویر زیر برخی از ارتقاء میکس را نشان می دهد. دو ترکیب رنگ برتر در sRGB هستند. دو ترکیب رنگ پایین در صفحه نمایش p3 هستند. صفحه نمایش p3 رنگ زنده تری دارد و ترکیب ها منجر به سیاه و سفید کامل در وسط می شود. جایی که sRGB کمی غیراشباع به نظر می رسد و ترکیبات در وسط نتایج کامل سیاه یا سفید نیستند.

دو ترکیب رنگ برتر در sRGB با رنگ های sRGB هستند. دو ترکیب رنگ پایین در صفحه نمایش p3 هستند. صفحه نمایش p3 رنگ‌های زنده‌تری دارد و ترکیب‌ها باعث سیاه و سفید در وسط می‌شوند، جایی که sRGB کمی غیراشباع به نظر می‌رسد و ترکیب‌های وسط نتایج سیاه و سفید نیستند.
https://codepen.io/web-dot-dev/pen/poZgXQb

این راهنما توضیح می‌دهد که رنگ کجا بوده است، کجا می‌رود و چگونه CSS توسعه‌دهندگان وب را قادر می‌سازد و از آن برای مدیریت رنگ پشتیبانی می‌کند.

بررسی اجمالی

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

خیلی بیشتر از "رنگ های بیشتر" نیز وجود دارد. در پایان این مقاله می‌توانید رنگ‌های بیشتری را مشخص کنید، شیب‌ها را افزایش دهید و بهترین فضاهای رنگی و طیف رنگی را برای هر کار انتخاب کنید.

طیف رنگ چیست؟

وسعت نشان دهنده اندازه چیزی است. عبارت «میلیون‌ها رنگ» نظری در مورد گستره نمایشگر یا طیف رنگ‌هایی است که باید از بین آن انتخاب کرد. در تصویر زیر سه گام با هم مقایسه شده اند و هر چه اندازه بزرگتر باشد رنگ های بیشتری ارائه می دهد.

طیف رنگی نیز می تواند یک نام داشته باشد. مانند بسکتبال در مقابل بیسبال یا فنجان قهوه ونته در مقابل گراند. یک نام برای اندازه می تواند به افراد در برقراری ارتباط کمک کند. یادگیری این نام های طیف رنگی به شما کمک می کند تا ارتباط برقرار کنید و به سرعت طیفی از رنگ ها را درک کنید.

این مقاله شما را با هفت گستره جدید آشنا می‌کند که همگی دارای دامنه وسیع‌تری نسبت به sRGB هستند و ویژگی‌های مختلف آن‌ها را شرح می‌دهد تا به شما کمک کند انتخاب کنید از کدام یک استفاده کنید:

• sRGB
• RGB 98
• نمایش p3
• Rec2020
• ProPhoto
• CIE
• HVS (گستره بینایی انسان)

توجه: شاید بدانید که لپ تاپ یا تلویزیون شما کدام یک از این طیف ها را ارائه می دهد؟

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

وسعت رنگ اغلب با طیف بینایی انسان مقایسه می شود. تمام رنگی که ما معتقدیم چشم انسان می تواند ببیند. HVS اغلب با یک نمودار رنگی به تصویر کشیده می شود، مانند:

منبع: ویکی پدیا

بیرونی ترین شکل چیزی است که ما به عنوان انسان می توانیم ببینیم، و مثلث داخلی محدوده توابع rgb() است که به فضای رنگی sRGB نیز معروف است.

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

فضای رنگی چیست؟

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

RGB مانند یک فضای رنگی مستطیلی است که در آن رنگ ها با تعیین مختصات در 3 محور قابل دسترسی هستند. HSL یک فضای رنگی استوانه‌ای است که در آن رنگ‌ها با زاویه رنگ و مختصات روی دو محور قابل دسترسی هستند.

https://en.wikipedia.org/wiki/HSL_and_HSV

مشخصات سطح 4، 12 فضای رنگی جدید را برای جستجوی رنگ ها از 7 طیف جدید که قبلاً به اشتراک گذاشته بودند، معرفی می کند:

• sRGB خطی
• LCH
• okLCH
• آزمایشگاه
• okLAB
• نمایش p3
• Rec2020
• a98 RGB
• ProPhoto RGB
• XYZ
• XYZ d50
• XYZ d65

اینها علاوه بر 4 فضای رنگی که قبلاً موجود بود هستند:

• هگز
• RGB
• HSL
• HWB

خلاصه طیف رنگ و فضای رنگی

فضای رنگی نقشه برداری از رنگ ها است که در آن وسعت رنگ طیفی از رنگ ها است. یک طیف رنگی را به عنوان مجموع ذرات و یک فضای رنگی را به عنوان بطری ساخته شده برای نگهداری آن محدوده از ذرات در نظر بگیرید.

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

• از طیف رنگی برای صحبت در مورد طیفی از رنگ ها استفاده کنید، مانند محدوده کم یا وسعت باریک در مقابل طیف زیاد یا وسعت گسترده.
• از فضاهای رنگی برای صحبت در مورد ترتیب رنگ ها، نحوی که برای تعیین رنگ استفاده می شود، دستکاری رنگ و درون یابی از طریق رنگ استفاده کنید.

در بالا، طیف sRGB ذرات متناسب با فضای رنگی مکعب RGB منبع تصویر است.

نحوه دسترسی به رنگ های بیشتر، فضاهای جدید و نتایج اشکال زدایی

CSS Color 4 مجموعه ای از ویژگی ها و ابزارهای جدید برای CSS و رنگ را مشخص می کند. ابتدا، خلاصه ای از جایی که رنگ قبل از این ویژگی های جدید بود. سپس مروری بر فضاهای رنگی جدید، نحوها و ابزارها.

کدپن زیر تمام دستورات رنگی جدید و قدیمی را با هم نشان می دهد:

مروری بر فضاهای رنگی کلاسیک

از دهه 2000، می‌توانید از موارد زیر برای هر ویژگی CSS که رنگ را به عنوان یک مقدار می‌پذیرد استفاده کنید: هگزادسیمال (اعداد هگز)، rgb() , rgba() با نام مانند hotpink یا با کلمات کلیدی مانند currentColor . در حدود سال 2010، بسته به مرورگر شما، CSS می تواند از رنگ های hsl() استفاده کند. سپس در سال 2017، هگز با آلفا ظاهر شد. آخرین، اخیراً، hwb() شروع به پشتیبانی در مرورگرها کرد.

همه این فضاهای رنگی کلاسیک به رنگ در محدوده یکسان، sRGB اشاره می کنند.

HEX

پشتیبانی مرورگر

• 1
• 12
• 1
• 1

منبع

فضای رنگ هگز R، G، B و A را با اعداد هگزادسیمال مشخص می کند. نمونه‌های کد زیر تمام روش‌هایی را که این نحو می‌تواند قرمز، سبز و آبی را به اضافه کدورت مشخص کند، نشان می‌دهد.

.valid-css-hex-colors {
  /* classic */
  --3-digits: #49b;
  --6-digits: #4499bb;

  /* hex with opacity */
  --4-digits-opaque: #f9bf;
  --8-digits-opaque: #ff99bbff;
  --4-digits-with-opacity: #49b8;
  --8-digits-with-opacity: #4499bb88;
}

RGB

پشتیبانی مرورگر

• 1
• 12
• 1
• 1

منبع

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

.valid-css-rgb-colors {
  --classic: rgb(64, 149, 191);
  --modern: rgb(64 149 191);
  --percents: rgb(25% 58% 75%);

  --classic-with-opacity-percent: rgba(64, 149, 191, 50%);
  --classic-with-opacity-decimal: rgba(64, 149, 191, .5);

  --modern-with-opacity-percent: rgb(64 149 191 / 50%);
  --modern-with-opacity-decimal: rgb(64 149 191 / .5);

  --percents-with-opacity-percent: rgb(25% 58% 75% / 50%);
  --percents-with-opacity-decimal: rgb(25% 58% 75% / 50%);

  --empty-channels: rgb(none none none);
}

HSL

پشتیبانی مرورگر

• 1
• 12
• 1
• 3.1

منبع

یکی از اولین فضاهای رنگی که خود را به سمت زبان و ارتباطات انسانی هدایت می کند، HSL (اشباع رنگ و روشنایی) همه رنگ ها را در حیطه sRGB ارائه می دهد در حالی که مغز شما نیازی به دانستن نحوه تعامل قرمز، سبز و آبی ندارد. مانند RGB، ابتدا دارای کاما در نحو بود، اما با حرکت رو به جلو، دیگر نیازی به کاما نیست.

.valid-css-hsl-colors {
  --classic: hsl(200deg, 50%, 50%);
  --modern: hsl(200 50% 50%);

  --classic-with-opacity-percent: hsla(200deg, 50%, 50%, 50%);
  --classic-with-opacity-decimal: hsla(200deg, 50%, 50%, .5);

  --modern-with-opacity-percent: hsl(200 50% 50% / 50%);
  --modern-with-opacity-decimal: hsl(200 50% 50% / .5);

  /* hueless and no saturation */
  --empty-channels-white: hsl(none none 100%);
  --empty-channels-black: hsl(none none 0%);
}

HWB

پشتیبانی مرورگر

• 101
• 101
• 96
• 15

منبع

یکی دیگر از فضای رنگی sRGB که به نحوه توصیف رنگ توسط انسان ها می پردازد، HWB (رنگ، ​​سفیدی، سیاهی) است. نویسندگان می توانند رنگی را انتخاب کرده و سفید یا سیاه را با هم ترکیب کنند تا رنگ مورد نظر خود را پیدا کنند.

.valid-css-hwb-colors {
  --modern: hwb(200deg 25% 25%);
  --modern2: hwb(200 25% 25%);

  --modern-with-opacity-percent: hwb(200 25% 25% / 50%);
  --modern-with-opacity-decimal: hwb(200 25% 25% / .5);

  /* hueless and no saturation */
  --empty-channels-white: hwb(none 100% none);
  --empty-channels-black: hwb(none none 100%);
}

با فضاهای رنگی جدید وب آشنا شوید

فضاهای رنگی زیر دسترسی به گستره های بزرگتر از sRGB را ارائه می دهند. فضای رنگی display-p3 تقریباً دو برابر RGB رنگ ارائه می دهد، در حالی که Rec2020 تقریباً دو برابر بیشتر از display-p3 ارائه می دهد. این خیلی رنگ است!

تابع color()

پشتیبانی مرورگر

• 111
• 111
• 113
• 15

منبع

تابع new color() می تواند برای هر فضای رنگی که رنگ ها را با کانال های R، G و B مشخص می کند، استفاده شود. color() ابتدا یک پارامتر فضای رنگ، سپس یک سری از مقادیر کانال برای RGB و در صورت تمایل مقداری آلفا می گیرد.

خواهید دید که بسیاری از فضاهای رنگی جدید از این تابع استفاده می کنند، زیرا داشتن توابع تخصصی مانند rgb ، srgb ، hsl ، hwb ، و غیره، در حال افزایش به فهرست طولانی بود، که ساده تر بودن پارامتر بودن فضای رنگی.

طرفداران

• یک فضای عادی برای دسترسی به فضاهای رنگی که از کانال های RGB استفاده می کنند.
• می تواند تا هر فضای رنگی مبتنی بر وسعت RGB را افزایش دهد.

منفی

• با HSL، HWB، LCH، okLCH، یا okLAB کار نمی کند

.valid-css-color-function-colors {
  --srgb: color(srgb 1 1 1);
  --srgb-linear: color(srgb-linear 100% 100% 100% / 50%);
  --display-p3: color(display-p3 1 1 1);
  --rec2020: color(rec2020 0 0 0);
  --a98-rgb: color(a98-rgb 1 1 1 / 25%);
  --prophoto: color(prophoto-rgb 0% 0% 0%);
  --xyz: color(xyz 1 1 1);
}

توجه: رنگ ها می توانند در sRGB Gamut ، Display P3 Gamut ، یا Rec2020 Gamut باشند. تا 77.6 درصد از طیف مرئی.

sRGB از طریق رنگ ()

این colorspace همان ویژگی‌های rgb() را ارائه می‌دهد. علاوه بر این اعداد اعشاری بین 0 و 1 را ارائه می دهد که دقیقاً مانند 0٪ تا 100٪ استفاده می شود.

طرفداران

• تقریباً همه نمایشگرها از محدوده این فضای رنگی پشتیبانی می کنند.
• پشتیبانی از ابزار طراحی

منفی

• از نظر ادراکی خطی نیست (مانند lch()
• بدون طیف وسیع رنگ.
• گرادیان ها اغلب از یک منطقه مرده عبور می کنند.

.valid-css-srgb-colors {
  --percents: color(srgb 34% 58% 73%);
  --decimals: color(srgb .34 .58 .73);

  --percents-with-opacity: color(srgb 34% 58% 73% / 50%);
  --decimals-with-opacity: color(srgb .34 .58 .73 / .5);

  /* empty */
  --empty-channels-black: color(srgb none none none);
  --empty-channels-black2: color(srgb);
}

sRGB خطی از طریق رنگ ()

این جایگزین خطی برای RGB، شدت کانال قابل پیش بینی را ارائه می دهد.

طرفداران

• دسترسی مستقیم به کانال های RGB، مفید برای چیزهایی مانند موتورهای بازی یا نمایش های نور.

منفی

• از نظر ادراکی خطی نیست.
• سیاه و سفید در لبه ها بسته بندی شده است.

.valid-css-srgb-linear-colors {
  --percents: color(srgb-linear 34% 58% 73%);
  --decimals: color(srgb-linear .34 .58 .73);

  --percents-with-opacity: color(srgb-linear 34% 58% 73% / 50%);
  --decimals-with-opacity: color(srgb-linear .34 .58 .73 / .5);

  /* empty */
  --empty-channels-black: color(srgb-linear none none none);
  --empty-channels-black2: color(srgb-linear);
}

گرادیان‌ها بعداً به تفصیل مورد بحث قرار می‌گیرند، اما به سرعت دیدن یک گرادیان سیاه به سفید srgb و linear-srgb برای نشان دادن تفاوت‌های آنها معنادار است:

LCH

پشتیبانی مرورگر

• 111
• 111
• 113
• 15

منبع

اولین فضای این پست برای معرفی سینتکس برای دسترسی به رنگ های خارج از محدوده RGB! همچنین اولین موردی است که ایجاد رنگ های خارج از محدوده برای نمایشگر را بسیار آسان می کند. این به این دلیل است که هر رنگ فضایی CIE (lch، oklch، lab، oklab) قادر به نمایش کل طیف رنگی قابل مشاهده انسان است .

این فضای رنگی بر اساس دید انسان مدل‌سازی شده است و نحوی را برای تعیین هر یک از آن رنگ‌ها و موارد دیگر ارائه می‌دهد. کانال های LCH سبک، رنگ و رنگ هستند. Hue یک زاویه است، مانند HSL و HWB. سبک بودن مقداری بین 0 تا 100 است، اما نه مانند سبکی HSL، یک سبک خاص، "از لحاظ ادراکی خطی" و انسان محور است. کروما مشابه اشباع است. می تواند از 0 تا 230 باشد اما از نظر فنی نیز نامحدود است.

طرفداران

• دستکاری رنگ قابل پیش بینی به لطف خطی بودن ادراکی، عمدتاً (به oklch مراجعه کنید).
• از کانال های آشنا استفاده می کند.
• اغلب دارای شیب های پر جنب و جوش است.

منفی

• به راحتی از محدوده خارج می شود.
• در موارد نادر، گرادیان ممکن است نیاز به یک نقطه میانی تنظیم داشته باشد تا از تغییر رنگ جلوگیری شود.

.valid-css-lch-colors {
  --percent-and-degrees: lch(58% 32 241deg);
  --just-the-degrees: lch(58 32 241deg);
  --minimal: lch(58 32 241);

  --percent-opacity: lch(58% 32 241 / 50%);
  --decimal-opacity: lch(58% 32 241 / .5);

  /* chromaless and hueless */
  --empty-channels-white: lch(100 none none);
  --empty-channels-black: lch(none none none);
}

هشدار: Chroma می تواند مشکل ساز باشد و به نویسندگان این امکان را می دهد که به راحتی از گستره نمایشگر فراتر روند. مراقب مقادیر بالای کروم C باشید.

آزمایشگاه

پشتیبانی مرورگر

• 111
• 111
• 113
• 15

منبع

فضای رنگی دیگری که برای دسترسی به وسعت CIE ساخته شده است، دوباره با بعد سبکی خطی ادراکی (L). A و B در LAB نشان دهنده محورهای منحصر به فرد بینایی رنگ انسان است: قرمز-سبز و آبی-زرد. وقتی به A یک مقدار مثبت داده می‌شود، قرمز اضافه می‌کند، و زمانی که زیر 0 باشد سبز اضافه می‌کند. وقتی B یک عدد مثبت داده می‌شود، زرد اضافه می‌کند، جایی که مقادیر منفی به سمت آبی هستند.

طرفداران

• گرادیان های ادراکی سازگار.
• محدوده دینامیکی بالا

منفی

• پتانسیل تغییر رنگ
• دست نویسنده یا حدس زدن رنگ هنگام خواندن مقادیر دشوار است.

.valid-css-lab-colors {
  --percent-and-degrees: lab(58% -16 -30);
  --minimal: lab(58 -16 -30);

  --percent-opacity: lab(58% -16 -30 / 50%);
  --decimal-opacity: lab(58% -16 -30 / .5);

  /* chromaless and hueless */
  --empty-channels-white: lab(100 none none);
  --empty-channels-black: lab(none none none);
}

OKLCH

پشتیبانی مرورگر

• 111
• 111
• 113
• 15.4

منبع

این فضای رنگی به LCH اصلاح می شود. و مانند LCH، (L) همچنان سبکی خطی ادراکی، C برای رنگ و H برای رنگ را نشان می دهد.

اگر با HSL یا LCH کار کرده باشید، این فضا آشنا به نظر می رسد. یک زاویه در چرخه رنگ برای H انتخاب کنید، مقدار روشنی یا تاریکی را با تنظیم L انتخاب کنید، اما سپس به جای اشباع، کروما داریم. آنها تقریباً یکسان هستند با این تفاوت که تنظیمات روشنایی و رنگی معمولاً به صورت جفت انجام می شوند، یا در غیر این صورت می توان به راحتی درخواست رنگ های کروم بالا که خارج از محدوده هدف هستند، انجام شود.

طرفداران

• هنگام کار با رنگ های آبی و بنفش هیچ شگفتی وجود ندارد.
• سبکی خطی ادراکی.
• از کانال های آشنا استفاده می کند.
• محدوده دینامیکی بالا
• دارای انتخابگر رنگ مدرن - توسط Evil Martians.

منفی

• به راحتی از محدوده خارج می شود.
• جدید و نسبتا ناشناخته.
• چند انتخاب کننده رنگ

.valid-css-oklch-colors {
  --percent-and-degrees: oklch(64% .1 233deg);
  --just-the-degrees: oklch(64 .1 233deg);
  --minimal: oklch(64 .1 233);

  --percent-opacity: oklch(64% .1 233 / 50%);
  --decimal-opacity: oklch(64% .1 233 / .5);

  /* chromaless and hueless */
  --empty-channels-white: oklch(100 none none);
  --empty-channels-black: oklch(none none none);
}

OKLAB

پشتیبانی مرورگر

• 111
• 111
• 113
• 15.4

منبع

این فضا برای LAB اصلاح می شود. ادعا می‌شود که فضایی بهینه‌شده برای کیفیت پردازش تصویر نیز هست، که برای ما در CSS به معنای شیب‌ها و کیفیت دستکاری تابع رنگ است.

طرفداران

• فضای پیش فرض برای انیمیشن ها و درون یابی ها.
• سبکی خطی ادراکی.
• بدون تغییر رنگ مانند LAB.
• گرادیان های ادراکی سازگار.

منفی

• جدید و نسبتا ناشناخته.
• چند انتخاب کننده رنگ

.valid-css-oklab-colors {
  --percent-and-degrees: oklab(64% -.1 -.1);
  --minimal: oklab(64 -.1 -.1);

  --percent-opacity: oklab(64% -.1 -.1 / 50%);
  --decimal-opacity: oklab(64% -.1 -.1 / .5);

  /* chromaless and hueless */
  --empty-channels-white: oklab(100 none none);
  --empty-channels-black: oklab(none none none);
}

صفحه نمایش P3

پشتیبانی مرورگر

• 111
• 111
• 113
• 15

منبع

توجه: رنگ ها در Display P3 Gamut هستند. 45.5 درصد از طیف مرئی.

وسعت صفحه نمایش P3 و فضای رنگی از زمانی که اپل از سال 2015 از آنها در iMac خود پشتیبانی کرد، محبوب شده است. اپل همچنین از سال 2016 از display-p3 در صفحات وب از طریق CSS پشتیبانی می کند، پنج سال جلوتر از هر مرورگر دیگری. اگر از sRGB می آید، این یک فضای رنگی عالی برای شروع کار با حرکت استایل ها به محدوده دینامیکی بالاتر است.

طرفداران

• پشتیبانی عالی، پایه ای برای نمایشگرهای HDR در نظر گرفته می شود.
• 50٪ رنگ بیشتر از sRGB.
• DevTools یک انتخابگر رنگ عالی ارائه می دهد.

منفی

• در نهایت توسط فضاهای Rec2020 و CIE پیشی خواهد گرفت.

.valid-css-display-p3-colors {
  --percents: color(display-p3 34% 58% 73%);
  --decimals: color(display-p3 .34 .58 .73);

  --percent-opacity: color(display-p3 34% 58% 73% / 50%);
  --decimal-opacity: color(display-p3 .34 .58 .73 / .5);

  /* chromaless and hueless */
  --empty-channels-black: color(display-p3 none none none);
  --empty-channels-black2: color(display-p3);
}

Rec2020

پشتیبانی مرورگر

• 111
• 111
• 113
• 15

منبع

توجه: رنگ ها در Rec2020 Gamut قرار دارند. 77.6 درصد از طیف مرئی.

Rec2020 بخشی از حرکت به سمت UHDTV (تلویزیون با کیفیت فوق العاده بالا) است که طیف گسترده ای از رنگ ها را برای استفاده در رسانه های 4k و 8k ارائه می دهد. Rec2020 یک گستره دیگر مبتنی بر RGB است که بزرگتر از display-p3 است، اما تقریباً به اندازه Display P3 در بین مصرف کنندگان رایج نیست.

طرفداران

• رنگ های Ultra HD.

منفی

• در بین مصرف کنندگان (هنوز) رایج نیست.
• معمولاً در تبلت ها یا دستی ها یافت نمی شود.

.valid-css-rec2020-colors {
  --percents: color(rec2020 34% 58% 73%);
  --decimals: color(rec2020 .34 .58 .73);

  --percent-opacity: color(rec2020 34% 58% 73% / 50%);
  --decimal-opacity: color(rec2020 .34 .58 .73 / .5);

  /* chromaless and hueless */
  --empty-channels-black: color(rec2020 none none none);
  --empty-channels-black2: color(rec2020);
}

A98 RGB

پشتیبانی مرورگر

• 111
• 111
• 113
• 15

منبع

توجه: رنگ ها در RGB 98 Gamut هستند. 52.1 درصد از طیف مرئی.

مخفف Adobe 1998 RGB، A98 RGB توسط Adobe ساخته شد تا بیشتر رنگ های قابل دستیابی از چاپگرهای CMYK را ارائه دهد. رنگ های بیشتری نسبت به sRGB ارائه می دهد، به ویژه در رنگ های فیروزه ای و سبز.

طرفداران

• بزرگتر از فضاهای رنگی sRGB و Display P3.

منفی

• فضای مشترکی نیست که طراحان دیجیتال در آن کار کنند.
• افراد زیادی پالت ها را از CMYK منتقل نمی کنند.

.valid-css-a98-rgb-colors {
  --percents: color(a98-rgb 34% 58% 73%);
  --decimals: color(a98-rgb .34 .58 .73);

  --percent-opacity: color(a98-rgb 34% 58% 73% / 50%);
  --decimal-opacity: color(a98-rgb .34 .58 .73 / .5);

  /* chromaless and hueless */
  --empty-channels-black: color(a98-rgb none none none);
  --empty-channels-black2: color(a98-rgb);
}

ProPhoto RGB

پشتیبانی مرورگر

• 111
• 111
• 113
• 15

منبع

توجه: رنگ ها در ProPhoto Gamut هستند. 90 درصد از طیف مرئی.

این فضای گستره وسیع که توسط کداک ایجاد شده است، به‌طور منحصربه‌فرد رنگ‌های اصلی با طیف گسترده‌ای را ارائه می‌کند و دارای حداقل تغییر رنگ در هنگام تغییر سبکی است. همچنین ادعا می کند که 100٪ رنگ های سطح دنیای واقعی را همانطور که توسط مایکل پوینتر در سال 1980 مستند شده است، پوشش می دهد.

طرفداران

• حداقل تغییر رنگ هنگام تغییر روشنایی.
• رنگ های اصلی پر جنب و جوش

منفی

• حدود 13 درصد از رنگ های ارائه شده آن تخیلی هستند، به این معنی که آنها در طیف قابل مشاهده انسان نیستند.

.valid-css-prophoto-rgb-colors {
  --percents: color(prophoto-rgb 34% 58% 73%);
  --decimals: color(prophoto-rgb .34 .58 .73);

  --percent-opacity: color(prophoto-rgb 34% 58% 73% / 50%);
  --decimal-opacity: color(prophoto-rgb .34 .58 .73 / .5);

  /* chromaless and hueless */
  --empty-channels-black: color(prophoto-rgb none none none);
  --empty-channels-black2: color(prophoto-rgb);
}

XYZ، XYZ-d50، XYZ-d65

پشتیبانی مرورگر

• 111
• 111
• 113
• 15

منبع

توجه: رنگ ها در HVS Gamut هستند. 100٪ از طیف مرئی انسان (HVS).

فضای رنگی CIE XYZ شامل تمام رنگ هایی است که برای یک فرد با بینایی متوسط ​​قابل مشاهده است. به همین دلیل است که از آن به عنوان مرجع استاندارد برای سایر فضاهای رنگی استفاده می شود. Y درخشندگی است، X و Z کروماهای ممکن در درخشندگی Y هستند.

تفاوت بین d50 و d65 نقطه سفید است، جایی که d50 از نقطه سفید d50 و d65 از نقطه سفید d65 استفاده می کند.

اصطلاح کلیدی: نقطه سفید یک ویژگی یک فضای رنگی است، جایی است که سفید واقعی در فضا وجود دارد. برای صفحه نمایش های الکترونیکی، D65 رایج ترین نقطه سفید است و کوتاه تر از 6500 کلوین است. در تبدیل رنگ مهم است که نقاط سفید مطابقت داشته باشند تا دمای رنگ (گرمی یا خنکی) تحت تأثیر قرار نگیرد.

طرفداران

• دسترسی به نور خطی دارای موارد استفاده مفید است.
• برای ترکیب رنگ فیزیکی عالی است.

منفی

• مانند lch، oklch، lab و oklab از لحاظ ادراکی خطی نیستند.

.valid-css-xyz-colors {
  --percents: color(xyz 22% 26% 53%);
  --decimals: color(xyz .22 .26 .53);

  --percent-opacity: color(xyz .22 .26 .53 / 50%);
  --decimal-opacity: color(xyz .22 .26 .53 / .5);

  /* chromaless and hueless */
  --empty-channels-black: color(xyz none none none);
  --empty-channels-black2: color(xyz);
}

.valid-css-xyz-d50-colors {
  --percents: color(xyz-d50 22% 26% 53%);
  --decimals: color(xyz-d50 .22 .26 .53);

  --percent-opacity: color(xyz-d50 .22 .26 .53 / 50%);
  --decimal-opacity: color(xyz-d50 .22 .26 .53 / .5);

  /* chromaless and hueless */
  --empty-channels-black: color(xyz-d50 none none none);
  --empty-channels-black2: color(xyz-d50);
}

.valid-css-xyz-d65-colors {
  --percents: color(xyz-d65 22% 26% 53%);
  --decimals: color(xyz-d65 .22 .26 .53);

  --percent-opacity: color(xyz-d65 .22 .26 .53 / 50%);
  --decimal-opacity: color(xyz-d65 .22 .26 .53 / .5);

  /* chromaless and hueless */
  --empty-channels-black: color(xyz-d65 none none none);
  --empty-channels-black2: color(xyz-d65);
}

فضاهای رنگی سفارشی

مشخصات CSS Color 5 همچنین دارای مسیری برای آموزش فضای رنگی سفارشی به مرورگر است. این یک نمایه ICC است که به مرورگر می‌گوید چگونه رنگ‌ها را حل کند.

@color-profile --foo {
  src: url(path/to/custom.icc);
}

پس از بارگیری، با تابع color() از این نمایه سفارشی به رنگ ها دسترسی پیدا کنید و مقادیر کانال را برای آن مشخص کنید.

.valid-css-color-from-a-custom-profile {
  background: color(--foo 1 0 0);
}

درون یابی رنگ

انتقال از یک رنگ به رنگ دیگر در انیمیشن، گرادیان و ترکیب رنگ یافت می شود. این انتقال معمولاً به عنوان یک رنگ شروع و یک رنگ پایانی مشخص می شود، جایی که انتظار می رود مرورگر بین آنها درون یابی کند. Interpolate در این مورد به معنای تولید یک سری رنگ های بینابینی برای ایجاد یک انتقال صاف به جای آنی است.

با یک گرادیان، درون یابی مجموعه ای از رنگ ها در امتداد یک شکل است. با انیمیشن، یک سری رنگ در طول زمان است.

@keyframes bg {
  0%, 100% {
    background: orange;
  }
  25% {
    background: magenta;
  }
  50% {
    background: lime;
  }
  75% {
    background: cyan;
  }
}

.circle {
  animation: bg 5s ease-in-out infinite;
}

با یک گرادیان، رنگ‌های میانی به یکباره نشان داده می‌شوند:

چه چیزی در درون یابی رنگ جدید است

با اضافه شدن طیف های جدید و فضاهای رنگی، گزینه های اضافی جدیدی برای درون یابی وجود دارد. انتقال یک رنگ in hsl از آبی به سفید منجر به چیزی بسیار متفاوت از sRGB می شود.

.classic-gradient-in-srgb {
  background: linear-gradient(to right, blue, white);
}

.new-gradient-in-hsl {
  background: linear-gradient(in hsl to right, blue, white);
}

نمی توانید نسخه ی نمایشی Codepen را ببینید؟

سپس اگر از رنگی در یک فضا به رنگی در فضایی کاملاً متفاوت تبدیل شوید، چه اتفاقی می‌افتد:

.gradient {
  /* oklab will be the common space */
  background: linear-gradient(to right, lch(29.6 131 301), hsl(330 100% 50%));
}

.lch {
  /* lch is specified */
  background: linear-gradient(in lch to right, lch(29.6 131 301), hsl(330 100% 50%));
}

نمی توانید نسخه ی نمایشی Codepen را ببینید؟

خوشبختانه برای شما، مشخصات Color 4 دستورالعمل هایی برای مرورگرها در مورد نحوه مدیریت این درونیابی های فضای رنگی متقاطع دارد. در مورد بالا برای .gradient ، مرورگرها متوجه فضاهای رنگی متمایز می شوند و از فضای رنگی پیش فرض oklab استفاده می کنند. ممکن است فکر کنید مرورگر از lch به عنوان فضای رنگی استفاده می کند، زیرا اولین رنگ است، اما اینطور نیست و به همین دلیل است که من یک گرادیان مقایسه دوم .lch را نشان می دهم. شیب .lch یک گرادیان از فضای رنگی lch است.

باند کمتر به لطف رنگ 16 بیتی

قبل از این کار رنگی، همه رنگ ها در یک عدد صحیح 32 بیتی ذخیره می شدند تا هر چهار کانال را نشان دهند. قرمز، سبز، آبی و آلفا. این 8 بیت در هر کانال و 2^ 24 رنگ ممکن است (بدون توجه به آلفا). 2 ^ 24 = 16777216، "میلیون ها رنگ."

پس از این کار رنگی، چهار مقدار ممیز شناور 16 بیتی ، هر کانال به جای اینکه با هم جمع شود، شناور مخصوص به خود را دارد. این کل داده 64 بیتی است که منجر به بیش از میلیون ها رنگ می شود.

این کار برای پشتیبانی از رنگ HD مورد نیاز است. این مقدار اطلاعات رنگی را که می‌توان ذخیره کرد افزایش می‌دهد، که یک اثر جانبی خوب دارد به این معنی که مرورگر رنگ‌های بیشتری برای استفاده در گرادیان دارد.

باند شیب زمانی است که رنگ های کافی برای ایجاد یک گرادیان صاف وجود ندارد و "نوار" رنگ قابل مشاهده می شود. با ارتقاء به رنگ وضوح بالاتر، نواربندی به شدت کاهش می یابد.

منبع تصویر

کنترل درون یابی

کوتاه ترین فاصله بین دو نقطه همیشه یک خط مستقیم است. با درون یابی رنگ، مرورگرها به طور پیش فرض مسیر کوتاه را طی می کنند. سناریویی را در نظر بگیرید که در آن دو نقطه در یک سیلندر رنگی HSL وجود دارد. یک گرادیان مراحل رنگی خود را با حرکت در امتداد خط بین دو نقطه به دست می آورد.

linear-gradient(to right, #94e99c, #e06242)

(تظاهرات ساختگی)
نمای بالا به پایین، از یک استوانه HSL با یک خط بین توقف رنگ

خط گرادیان بالا مستقیماً بین رنگ مایل به سبز به رنگ قرمز می رود و از مرکز فضای رنگی عبور می کند. در حالی که موارد بالا برای کمک به درک اولیه عالی هستند، دقیقاً اینطور نیست. این شیب در کدپن زیر است، و به وضوح در وسط سفید نیست، همانطور که نمایش ساختگی نشان داد.

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

تعیین توقف های گرادیان بیشتر برای جلوگیری از منطقه مرده

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

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

linear-gradient(90deg, #94e99c, #99e789, #ace67d, #c4e472, #e2e366, #e2bf5a, #e1934e, #e06242);

(تظاهرات ساختگی)
نمای بالا به پایین یک استوانه HSL با یک خط منحنی دارای 9 توقف رنگ

با نقاط توقف هدایت شونده، درون یابی دیگر یک خط مستقیم نیست، اما به نظر می رسد که در اطراف منطقه مرده منحنی می شود، به حفظ اشباع کمک می کند، و در نتیجه شیب بسیار پر جنب و جوش بیشتری ایجاد می کند.

در حالی که این ابزار کار فوق العاده ای انجام می دهد، چه می شود اگر بتوانید کنترل مشابه یا بیشتری را مستقیماً از CSS داشته باشید؟

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

در Color 4، توانایی کنترل استراتژی درون یابی رنگ اضافه شد و راهی جدید برای دور زدن (:wink:) منطقه مرده است. در مورد یک زاویه رنگ فکر کنید و شیب 2 توقف را در نظر بگیرید که فقط زاویه را تغییر می دهد، برای مثال تغییر رنگ از 140deg به 240deg .

درونیابی رنگ کوتاهتر در مقابل طولانی تر

گرادیان به طور پیش‌فرض مسیر shorter را طی می‌کند، مگر اینکه شما تعیین کنید که مسیر longer را طی کند. گزینه های درون یابی رنگ، چرخش زاویه را هدایت می کنند، مانند اینکه به کسی بگویید به جای راست به چپ بپیچد (هه، Zoolander):

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

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

دو استراتژی درون یابی رنگ دیگر در رنگ 4 وجود دارد، اما آنها برای فضاهای رنگی استوانه ای منحصر به فرد هستند. با ماندن با دو رنگ از نمونه های قبلی، تصویری اکنون نشان می دهد که چگونه افزایش و کاهش کار می کند.

کدپن فوق از ColorJS برای نشان دادن نتیجه مورد انتظار استفاده کرد. سی اس اسی که برای دستیابی به همان اثر بدون کتابخانه جاوا اسکریپت می نویسید این خواهد بود:

.longer-hue-interpolation-in-css {
  background: linear-gradient(
    to right in hsl longer hue,
    hsl(180deg 100% 75%),
    hsl(240deg 100% 75%)
  );
}

.decreasing-hue-interpolation-in-css {
  background: linear-gradient(
    to right in hsl decreasing hue,
    hsl(180deg 100% 75%),
    hsl(240deg 100% 75%)
  );
}

برای پایان دادن به درونیابی رنگ، در اینجا یک زمین بازی سرگرم کننده وجود دارد که در آن می توانید رنگ را بین 2 توقف رنگ تغییر دهید و تأثیرات انتخاب درون یابی رنگ و همچنین نحوه تغییر فضاهای رنگی نتایج گرادیان را مشاهده کنید. اثرات می تواند بسیار متفاوت باشد. این را به عنوان چهار ترفند جدید در نظر بگیرید که به تازگی وارد کمربند رنگ شما شده است.

گرادیان در فضاهای رنگی مختلف

هر فضای رنگی با توجه به شکل و ترتیب رنگ منحصر به فرد خود، شیب متفاوتی را به همراه خواهد داشت. به مثال های زیر نگاه کنید، به خصوص به «آبی تا سفید». نگاه کنید که چگونه هر فضای رنگی با آن رفتار متفاوتی دارد. توجه کنید که چه تعداد در وسط به رنگ بنفش در می آیند، که به آن "تغییر رنگ" در طول درونیابی می گویند.

نمی توانید نسخه ی نمایشی Codepen را ببینید؟

تصویر نشان داده شده تنها 1 نمونه از بسیاری از نمونه های Codepen است. ارزش دارد که Canary یا Safari Tech Preview را امتحان کنید تا خودتان این موارد را ببینید.

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

.hwb {
  background: linear-gradient(to right, hwb(250 10% 10%), hwb(150 10% 10%));
}
.lab {
  background: linear-gradient(to right, lab(30 59.4 -96), lab(80 -64 36.2));
}

نسخه ی نمایشی بالا، اگرچه در نتایج ظریف است، اما درون یابی سازگارتر با آزمایشگاه را نشان می دهد. با این حال، نحو آزمایشگاه ساده نیست، اما اعداد منفی وجود دارد که وقتی از rgb یا hsl می آیند بسیار ناآشنا هستند. خبر خوب، ما می‌توانیم از hwb برای یک نحو آشنا استفاده کنیم، اما بخواهیم گرادیان به طور کامل در فضای رنگی دیگری، مانند oklab، درون‌یابی شود.

.hwb {
  background: linear-gradient(in hwb to right, hwb(250 10% 10%), hwb(150 10% 10%));
}
.lab {
  background: linear-gradient(in oklab to right, hwb(250 10% 10%), hwb(150 10% 10%));
}

نمی توانید نسخه ی نمایشی Codepen را ببینید؟

این مثال از همان رنگ‌ها در hwb استفاده می‌کند اما فضای رنگی را برای درونیابی به hwb یا oklab مشخص می‌کند. hwb یک فضای رنگی عالی برای ارتعاش بالا اما مناطق مرده یا نقاط روشن احتمالی است (نقطه داغ فیروزه‌ای را در مثال بالا ببینید). oklab برای شیب های خطی ادراکی که اشباع باقی می مانند عالی است. این ویژگی بسیار سرگرم کننده است زیرا می توانید چند فضای رنگی مختلف را امتحان کنید تا ببینید کدام گرادیان را بیشتر دوست دارید.

در اینجا یک کدپن است که با گرادیان ها و فضاهای رنگی، ترکیب و تطبیق استراتژی ها برای کشف احتمالات آزمایش می کند. حتی انتقال از سیاه به سفید در هر فضای رنگی متفاوت است!

نمی توانید نسخه ی نمایشی Codepen را ببینید؟

بستن گاموت

سناریوهایی وجود دارد که در آن یک رنگ ممکن است چیزی خارج از یک محدوده درخواست کند. رنگ زیر را در نظر بگیرید:

rgb(300 255 255)

حداکثر برای یک کانال رنگ در فضای رنگ rgb 255 است، اما در اینجا 300 برای قرمز مشخص شده است. چه اتفاقی می افتد؟ بستن گاموت.

بستن زمانی است که اطلاعات اضافی به سادگی حذف شوند. 300 در داخل موتور رنگی 255 می شود. رنگ اکنون در فضای خود چسبانده شده است.

انتخاب فضای رنگی

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

اگر یکی از بهترین فضاها وجود داشت، آن قدر فضاهای جدید معرفی نمی شد.

با این حال، می توانم بگویم که فضاهای CIE - lab ، oklab ، lch و oklch - مکان شروع من هستند. اگر نتیجه آنها آن چیزی نیست که من به دنبال آن هستم، سپس می روم فضاهای دیگر را آزمایش می کنم. برای ترکیب رنگ ها و ایجاد گرادیان، من با انتخاب مشخصات پیش فرض oklab موافقم. برای سیستم های رنگی و رنگ های کلی رابط کاربری، من oklch دوست دارم.

در اینجا چند مقاله وجود دارد که در آن افراد با توجه به این فضاها و ویژگی های رنگی جدید، استراتژی های رنگی به روز خود را به اشتراک گذاشته اند. به عنوان مثال، آندری سیتنیک روی oklch همه چیز را وارد کرده است، شاید آنها شما را متقاعد کنند که همین کار را انجام دهید:

1. OKLCH در CSS: چرا از RGB و HSL توسط آندری سیتنیک نقل مکان کردیم
2. فرمت های رنگی توسط Josh W. Comeau
3. OK، OKLCH توسط کریس کویر

انتقال به رنگ HD CSS

دو استراتژی اصلی برای به روز رسانی رنگ پروژه وب برای پشتیبانی از نمایشگرهای گسترده وجود دارد:

1. افت شدید
   از فضاهای رنگی جدید استفاده کنید و به مرورگر و سیستم عامل اجازه دهید تا بر اساس قابلیت های نمایشگر رنگی را نشان دهد.

2. افزایش پیشرونده
   از @supports و @media برای ارزیابی قابلیت‌های مرورگر کاربر استفاده کنید و در صورت رعایت شرایط، رنگ‌های گسترده‌ای را ارائه دهید.

اگر مرورگر رنگ display-p3 را درک نمی کند:

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

اگر مرورگر رنگ display-p3 را درک کند:

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

هر کدام مزایا و معایبی دارند. در اینجا یک لیست سریع از مزایا و معایب آورده شده است:

افت شدید

• طرفداران
  • ساده ترین مسیر
  • اگر نمایشگر وسعت گسترده نباشد، مرورگر به sRGB نگاشت یا گیره می‌دهد، بنابراین مسئولیت بر عهده مرورگر است.
• منفی
  • ممکن است مرورگر به رنگی که شما دوست ندارید گاموت گیره یا گاموت کند.
  • ممکن است مرورگر درخواست رنگ را درک نکند و به طور کامل شکست بخورد. با این حال، می توان با دو بار مشخص کردن رنگ، این امر را کاهش داد، و اجازه داد که آبشار به رنگ قبلی که درک می کند بازگردد.

افزایش پیشرونده

• طرفداران
  • کنترل بیشتر با وفاداری رنگ مدیریت شده.
  • یک استراتژی افزایشی که بر رنگ های فعلی تأثیر نمی گذارد.
• منفی
  • شما باید دو نحو رنگ جداگانه را مدیریت کنید.
  • شما باید دو طیف رنگ جداگانه را مدیریت کنید.

بررسی پشتیبانی از وسعت و فضای رنگ

این مرورگر امکان بررسی پشتیبانی از قابلیت‌های گستره وسیع و پشتیبانی از نحو رنگ از CSS و جاوا اسکریپت را فراهم می‌کند. طیف دقیق رنگ هایی که کاربر دارد در دسترس نیست، یک پاسخ کلی ارائه شده است تا حریم خصوصی کاربر حفظ شود. با این حال، پشتیبانی از فضای رنگ دقیق در دسترس است، زیرا به قابلیت‌های سخت‌افزار کاربر مانند گستره خاص نیست.

پرس و جوهای پشتیبانی از طیف رنگ

نمونه‌های کد زیر محدوده رنگ‌های کاربر بازدیدکننده را در نمایشگرشان بررسی می‌کنند.

چک کردن از CSS

کمترین درخواست پشتیبانی خاص، پرس و جو رسانه dynamic-range است:

پشتیبانی مرورگر

• 98
• 98
• 100
• 13.1

منبع

@media (dynamic-range: high) {
  /* safe to use HD colors */
}

پشتیبانی تقریبی یا بیشتر را می توان با پرس و جو رسانه color-gamut جویا شد:

پشتیبانی مرورگر

• 58
• 79
• 110
• 10

منبع

@media (color-gamut: srgb) {
  /* safe to use srgb colors */
}

@media (color-gamut: p3) {
  /* safe to use p3 colors */
}

@media (color-gamut: rec2020) {
  /* safe to use rec2020 colors */
}

دو پرسش رسانه دیگر برای بررسی پشتیبانی وجود دارد:

1. @media (color)
2. @media (color-index)

بررسی از جاوا اسکریپت

برای JavaScript ، عملکرد window.matchMedia() را می توان فراخوانی کرد و یک پرس و جو رسانه ای برای ارزیابی منتقل کرد.

پشتیبانی مرورگر

• 9
• 12
• 6
• 5.1

منبع

const hasHighDynamicRange = window
.matchMedia('(dynamic-range: high)')
.matches;

console.log(hasHighDynamicRange); // true || false

const hasP3Color = window
.matchMedia('(color-gamut: p3)')
.matches;

console.log(hasP3Color); // true || false

الگوی فوق را می توان برای بقیه سؤالات رسانه ای کپی کرد.

نمایش داده های پشتیبانی از فضای رنگی

مثالهای کد زیر مرورگر کاربر بازدید کننده و انتخاب فضاهای رنگی را برای کار با آن بررسی می کند.

بررسی از CSS

پشتیبانی از فضای رنگی جداگانه را می توان با استفاده از یک پرس و جو @supports سؤال کرد:

پشتیبانی مرورگر

• 28
• 12
• 22
• 9

منبع

@supports (background: rgb(0 0 0)) {
  /* rgb color space supported */
}


@supports (background: color(display-p3 0 0 0)) {
  /* display-p3 color space supported */
}


@supports (background: oklch(0 0 0)) {
  /* oklch color space supported */
}

بررسی از JavaScript

برای JavaScript ، عملکرد CSS.supports() را می توان فراخوانی کرد و یک جفت خاصیت و ارزش منتقل کرد تا ببیند آیا مرورگر می فهمد یا خیر.

CSS.supports('background: rgb(0 0 0)')
CSS.supports('background: color(display-p3 0 0 0)')
CSS.supports('background: oklch(0 0 0)')

قرار دادن سخت افزار و چک های تجزیه شده

در حالی که منتظر اجرای هر مرورگر برای اجرای این ویژگی های جدید رنگ هستید ، ایده خوبی است که هم توانایی سخت افزاری و هم قابلیت تجزیه رنگ را بررسی کنید. این اغلب همان چیزی است که من هنگام تقویت تدریجی رنگ ها به کیفیت بالا از آن استفاده می کنم:

:root {
  --neon-red: rgb(100% 0 0);
  --neon-blue: rgb(0 0 100%);
}

/* is the display HD? */
@media (dynamic-range: high) {

  /* does this browser understand display-p3? */
  @supports (color: color(display-p3 0 0 0)) {

    /* safe to use display-p3 colors */
    --neon-red: color(display-p3 1 0 0);
    --neon-blue: color(display-p3 0 0 1);
  }
}

اشکال زدایی رنگ با Devtools Chrome

Chrome Devtools به روز شده و مجهز به ابزارهای جدید برای کمک به توسعه دهندگان رنگ HD است.

انتخاب کننده رنگ به روز شده

انتخاب کننده رنگ اکنون از تمام فضاهای رنگ جدید پشتیبانی می کند. اجازه دادن به نویسندگان برای تعامل با مقادیر کانال دقیقاً همانطور که می توانستند.

مرزهای GAMUT

یک خط مرزی Gamut نیز اضافه شده است ، و خطی بین SRGB و Gamuts Display-P3 ترسیم می شود. روشن کردن این که رنگ انتخاب شده در کدام گام است.

این به نویسندگان کمک می کند تا بصری بین رنگ های HD و رنگ های غیر HD تمایز قائل شوند. این امر به ویژه هنگام کار با عملکرد color() و فضاهای رنگی جدید مفید است زیرا آنها قادر به تولید رنگ های غیر HD و HD هستند. اگر می خواهید بررسی کنید که رنگ شما در کدام GAMUT قرار دارد ، انتخاب کننده رنگ را ظاهر کنید و ببینید!

تبدیل رنگ ها

Devtools توانسته است سالهاست که بین قالبهای پشتیبانی شده مانند HSL ، HWB ، RGB و HEX رنگ ها را تبدیل کند. برای انجام این تبدیل ، روی یک Swatch Color Swatch در قسمت Styles shift + click . ابزارهای رنگی جدید فقط از طریق تبدیل ها چرخه نمی گیرند ، بلکه یک پنجره بازشو به دست می آورند که نویسندگان می توانند آنها را ببینند و تبدیل خود را انتخاب کنند.

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

در اطلاعیه اخیر خود ، ویژگی های اشکال زدایی بیشتر CSS را در Devtools کشف کنید.

نتیجه

فضاهای رنگی غیر SRGB در روزهای ابتدایی آنها است اما معتقدم با گذشت زمان شاهد افزایش استفاده از طراحان و توسعه دهندگان خواهیم بود. به عنوان مثال ، دانستن فضای رنگی برای ساختن یک سیستم طراحی ، ابزاری قوی برای قرار گرفتن در یک ابزار ابزار سازندگان است. هر فضای رنگی ویژگی های منحصر به فردی را ارائه می دهد و دلیلی که به مشخصات CSS اضافه شده است ، و خوب است که با این موارد کوچک شروع کنید و در صورت لزوم اضافه کنید.

از بازی با این اسباب بازی های رنگی جدید لذت ببرید! ارتعاش بیشتر ، دستکاری های مداوم و درون یابی و به طور کلی تجربه رنگارنگ تری را به کاربران خود ارائه می دهد.

خواندن اضافی

• https://lea.verou.me/2020/04/lch-colors-in-css-what-why-wwhy-and-how/
• https://www.w3.org/graphics/color/workshop/slides/lilyey/lilyey.html
• https://darker.ink/writings/towards-richer-colors-on-the-web
• https://bottosson.github.io/posts/colorpicker/
• https://www.w3.org/graphics/color/workshop/slides/erias.pdf
• https://atmos.style/blog/lch-color-space
• https://stripe.com/blog/accessible-color-systems
• https://cran.r-project.org/web/packages/colordistance/vignettes/color-spaces.html
• https://afc163.github.io/color3d/
• https://github.com/nschloe/colorio#gamut-wisualization
• https://www.learnui.design/tools/gradient-generator.html
• https://webkit.org/blog/10042/wide-gamut-color-in-css-with-display-p3/
• https://www.w3.org/tr/css-color-4/
• https://www.w3.org/tr/css-color-5/
• https://en.wikipedia.org/wiki/CIE_1931_color_space
• https://www.joshwcomeau.com/css/color-formats/
• https://ciekanow.ski/color-spaces/

مقالات اضافی سطح 5 رنگ 5

• نحو رنگ نسبی CSS
• رنگ CSS