فضاهای رنگی جدید CSS و عملکردها در همه موتورهای اصلی

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

راشل اندرو

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

از CSS به فضاهای رنگی دسترسی پیدا کنید

ما قبلاً تعدادی توابع داریم که به ما امکان دسترسی به رنگ‌ها در محدوده sRGB را می‌دهند rgb() , hsl() و hwb() . اکنون تابع color() در مرورگرها پشتیبانی می شود، روشی عادی برای دسترسی به رنگ ها در هر فضای رنگی RGB. این شامل sRGB، Display P3 و Rec2020 است. می توانید چند نمونه را در CSS زیر مشاهده کنید:

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

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

  • کروم: 111.
  • لبه: 111.
  • فایرفاکس: 113.
  • سافاری: 15.

منبع

چندین توابع نیز پشتیبانی می شوند که با استفاده از lch() ، lab() ، oklch() و oklab() امکان دسترسی به فضاهای رنگی غیر از sRGB را فراهم می کنند.

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

  • کروم: 111.
  • لبه: 111.
  • فایرفاکس: 113.
  • سافاری: 15.

منبع

شما می توانید در مورد همه این فضاهای رنگی مختلف در راهنمای رنگ CSS با وضوح بالا بیاموزید.

تابع color-mix()

علاوه بر این فضاهای رنگی جدید، همه موتورها اکنون از تابع color-mix() پشتیبانی می کنند. این تابع ترکیب یک رنگ به رنگ دیگر را در هر یک از فضاهای رنگی امکان پذیر می کند. در CSS زیر، 25 درصد رنگ آبی در فضای رنگی srgb با رنگ سفید مخلوط می شود.

.example {
  background-color: color-mix(in srgb, blue 25%, white);
}

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

  • کروم: 111.
  • لبه: 111.
  • فایرفاکس: 113.
  • سافاری: 16.2.

منبع

درباره color-mix() بیشتر بیاموزید

این توابع جدید و فضاهای رنگی نوید ارائه رنگ HD پر جنب و جوش را به وب می دهند. برای الهام گرفتن، با ایجاد چند شیب زیبا با استفاده از مولد گرادیان HD در gradient.style شروع کنید.