پیشنهاد دوره:

CSS color() Function

تعریف و استفاده از CSS color() این عملکرد اجازه می‌دهد تا رنگ را در فضای رنگ خاصی مشخص کنید.

مثال

مثال 1

تعیین رنگ پس‌زمینه در فضای رنگ display-p3 (شفافیت 0.3):

div {
  padding: 15px;
  border: 2px solid black;
  background-color: color(display-p3 0.6 0.6 0 / .3);
}

آزمایش کنید

مثال 2

با استفاده از نحوه نوشتن مقادیر نسبی:

div {
  padding: 15px;
  border: 2px solid black;
  background-color: color(from blue srgb r g b / 0.4);
}

آزمایش کنید

نحوه نوشتن CSS

نحوه نوشتن مقادیر مطلق

color(colorspace c1 c2 c3 / A)
مقدار توضیح
colorspace

ضروری. یکی از فضاهای رنگ پیش‌تعریف شده را تعریف می‌کند:

  • srgb
  • srgb-linear
  • display-p3
  • a98-rgb
  • prophoto-rgb
  • rec2020
  • xyz
  • xyz-d50
  • xyz-d65
c1 c2 c3

ضروری. مقدار اجزای فضای رنگ را نشان می‌دهد.

هر مقدار می‌تواند به صورت عددی (بین 0 تا 1) نوشته شود، به عنوان درصد (بین 0% تا 100%) یا به عنوان کلمه‌کلیدی none.
/ A

اختیاری. مقدار کانال شفافیت رنگ را نشان می‌دهد (0 نشان‌دهنده شفافیت کامل و 100 نشان‌دهنده ناپایداری کامل است).

همچنین می‌توان از none (که نشان‌دهنده کانال شفافیت نیست) استفاده کرد.

مقدار پیش‌فرض 100 است.

نحوه نوشتن مقادیر نسبی

color(from color colorspace c1 c2 c3 / A)
مقدار توضیح
from color

با کلمه‌کلیدی from شروع می‌شود، پس از آن مقدار رنگ اصلی را نشان می‌دهد.

این رنگ اصلی است که رنگ‌های نسبی بر اساس آن تعریف می‌شوند.
colorspace

ضروری. یکی از فضاهای رنگ پیش‌تعریف شده را تعریف می‌کند:

  • srgb
  • srgb-linear
  • display-p3
  • a98-rgb
  • prophoto-rgb
  • rec2020
  • xyz
  • xyz-d50
  • xyz-d65
c1 c2 c3

ضروری. مقدار اجزای فضای رنگ را نشان می‌دهد.

هر مقدار می‌تواند به صورت عددی (بین 0 تا 1) نوشته شود، به عنوان درصد (بین 0% تا 100%) یا به عنوان کلمه‌کلیدی none.
/ A

اختیاری. مقدار کانال شفافیت رنگ را نشان می‌دهد (0 نشان‌دهنده شفافیت کامل و 100 نشان‌دهنده ناپایداری کامل است).

همچنین می‌توان از none (که نشان‌دهنده کانال شفافیت نیست) استفاده کرد.

مقدار پیش‌فرض 100 است.

جزئیات فنی

نسخه: مستند CSS Color Module Level 5

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

تعداد در جدول نشان‌دهنده نسخه‌ای است که اولین بار این عملکرد را پشتیبانی می‌کند.

Chrome Edge Firefox Safari Opera
111 111 113 15 97

صفحات مرتبط

ارجاع:رنگ CSS