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

این سند بخشی از راهنمای رنگ CSS با کیفیت بالا است.

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

خلاصه فضاهای رنگی کلاسیک را بخوانید.

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

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

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

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

تابع color()

تابع 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 از طریق رنگ ()

این 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 خطی از طریق color() {#linear-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

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

این فضای رنگی بر اساس دید انسان مدل‌سازی شده است و نحوی را برای تعیین هر یک از آن رنگ‌ها و موارد دیگر ارائه می‌دهد. کانال های LCH سبک، رنگ و رنگ هستند. Hue یک زاویه است، مانند HSL و HWB. سبکی یک مقدار بین 0 تا 100 است. این یک سبک خاص "از لحاظ خطی ادراکی" انسان محور است. کروما مشابه اشباع است. می تواند از 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);
}

آزمایشگاه

فضای رنگی دیگری که برای دسترسی به وسعت 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

این فضای رنگی به 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

این فضا برای 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

وسعت صفحه نمایش 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

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 {#a98-rgb}

مخفف 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

این فضای گستره وسیع که توسط کداک ایجاد شده است، به‌طور منحصربه‌فرد رنگ‌های اصلی با طیف گسترده‌ای را ارائه می‌کند و دارای حداقل تغییر رنگ در هنگام تغییر سبکی است. همچنین ادعا می کند که 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

فضای رنگی 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);
}

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

.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%));
}

خوشبختانه برای شما، مشخصات 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، این را ایجاد می کند:

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

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

در حالی که این ابزار کار فوق العاده ای انجام می دهد، چه می شود اگر بتوانید کنترل مشابه یا بیشتری را مستقیماً از 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 توقف رنگ تغییر دهید و تأثیرات انتخاب درون یابی رنگ و همچنین نحوه تغییر فضاهای رنگی نتایج گرادیان را مشاهده کنید. اثرات می تواند بسیار متفاوت باشد. این را به عنوان چهار ترفند جدید در نظر بگیرید که به تازگی وارد کمربند رنگ شما شده است.

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

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

برخی از شیب ها در این فضاها پر جنب و جوش تر از سایرین هستند یا کمتر در مناطق مرده حرکت می کنند. فضاهایی مانند 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%));
}

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

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

بستن گاموت

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

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 مهاجرت کنید .

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

منابع رنگ بیشتر را از راهنما بخوانید.