این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.

رنگ های HD و غیر HD را با انتخابگر رنگ بررسی و اشکال زدایی کنید

Jecelyn Yeen

Sofia Emelianova

انتخابگر رنگ یک رابط کاربری گرافیکی (GUI) برای تغییر اعلان‌های color و *-color ارائه می‌دهد و به شما امکان می‌دهد رنگ‌های غیر HD و HD را با یک کلیک ایجاد، تبدیل و اشکال‌زدایی کنید.

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

انتخابگر رنگ را باز کنید و رنگ‌ها را تغییر دهید

از Color Picker برای تغییر مقادیر رنگ با یک کلیک استفاده کنید:

1. یک عنصر را در پنل عناصر انتخاب کنید.

2. در پنل استایل‌ها ، color یا عبارت *-color مورد نظر برای تغییر را پیدا کنید.

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

   

برای بررسی مقدار محاسبه‌شده، از پنجره Computed استفاده کنید .

1. برای باز کردن Color Picker، روی مربع پیش‌نمایش کنار هر رنگ کلیک کنید.
2. برای تغییر رنگ، از هر یک از عناصر رابط کاربری Color Picker استفاده کنید.

عناصر انتخاب رنگ

در اینجا توضیحی از هر یک از عناصر رابط کاربری Color Picker آورده شده است:

1. سایه‌ها
2. قطره‌چکان . به بخش نمونه‌برداری از رنگ در هر نقطه با قطره‌چکان مراجعه کنید.
3. کپی در کلیپ‌بورد . مقدار نمایش را در کلیپ‌بورد خود کپی کنید.
4. مقدار نمایش . آرگومان‌های فضای رنگی انتخاب شده.
5. نسبت کنتراست . فقط برای مقادیر color موجود است. این تفاوت بین color و background-color است.
6. پالت رنگ . برای تغییر رنگ به رنگ مربع، روی یک مربع کلیک کنید.
7. مرز گاموت . این خط فقط برای فضاهای رنگی جدید و تابع color() در دسترس است. آنها می‌توانند هم رنگ‌های HD و هم رنگ‌های غیر HD تولید کنند. این خط به شما امکان می‌دهد بین HD و غیر HD تمایز قائل شوید.
8. دایره رنگ . این دایره را روی سایه‌ها بکشید تا مقدار نمایش تغییر کند.
9. اسلایدر رنگ .
10. نوار لغزنده کدورت .
11. تغییر دهنده‌ی مقدار نمایش . یک فضای رنگی را از لیست کشویی انتخاب کنید. به تبدیل رنگ‌ها مراجعه کنید.
12. نسبت کنتراست را افزایش دهید . بخش مربوطه را باز می‌کند که به شما امکان می‌دهد کنتراست را اصلاح کنید .

13. تغییر دهنده پالت رنگ . برای تغییر بین موارد زیر، روی آن کلیک کنید:

    • پالت طراحی متریال .
    • پالت سفارشی . برای افزودن دستی رنگ فعلی به این پالت، کلیک کنید .
    • پالت متغیرهای CSS . تمام متغیرهای CSS سفارشی (که با -- اضافه شده‌اند) را در صفحه شما فهرست می‌کند.
    • پالت رنگ‌های صفحه . برای تولید این پالت، DevTools تمام رنگ‌های موجود در stylesheet های شما را جستجو می‌کند.

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

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

1. کلید Shift را نگه دارید و روی آیکون پیش‌نمایش کنار مقدار رنگ کلیک کنید . یک لیست کشویی باز می‌شود.

   

2. یکی از فضاهای رنگی زیر را انتخاب کنید:

   • #<hex-color>
   • rgb(XXX / .X) .
   • hsl(XXX / X) .
   • hwb(XXX / .X) .

   یا یکی از فضاهای جدید:

   • lch(XXX / .X)
   • oklch(XXX / .X)
   • lab(XXX / .X)
   • oklab(XXX / .X)

   یا فضایی که توسط تابع color(<color_space> XXX) تعریف شده است.

تبدیل رنگ‌ها

وقتی با استفاده از ابزار تغییر مقدار Display بین فضاهای رنگی جابه‌جا می‌شوید، DevTools به‌طور خودکار مقادیر را تبدیل می‌کند.

برای مشاهده مقدار اصلی، نشانگر ماوس را روی آیکون نگه دارید.

ویدیوی بعدی تبدیل‌ها را در عمل نشان می‌دهد.

کنتراست را اصلاح کنید

برای رفع مشکل کنتراست برای اعلام color :

1. کادر انتخاب رنگ (Color Picker) کنار مقدار color را باز کنید.
2. نسبت کنتراست را افزایش دهید بخش

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

   • کلیک در کنار راهنما.
   • در پیش‌نمایش Shades در بالا، دایره Color را زیر خط مربوطه بکشید.

به طور پیش‌فرض، انتخابگر رنگ، مقادیری را پیشنهاد می‌دهد که با APCA سازگار هستند.

از طرف دیگر، می‌توانید آن را طوری تنظیم کنید که مقادیری مطابق با دستورالعمل‌های WebAIM پیشنهاد دهد. تنظیمات > تنظیمات برگزیده > عناصر ، موارد زیر را پاک کنید کادر انتخاب الگوریتم پیشرفته کنتراست ادراکی (APCA)...

برای دریافت فهرستی از تمام مشکلات کنتراست به صورت یکجا، راهنمای «وب‌سایت خود را خواناتر کنید» را دنبال کنید.

با استفاده از قطره‌چکان، از هر جایی از رنگ نمونه‌برداری کنید

قطره‌چکان می‌تواند رنگ‌ها را هم از صفحه و هم از هر کجای صفحه نمونه‌برداری کند.

برای انتخاب رنگ از هر کجای صفحه:

1. Color Picker را باز کنید و یکی از موارد زیر را انجام دهید:
   • کلیک کنید دکمه
   • برای فعال کردن قطره‌چکان، کلید C را فشار دهید. برای غیرفعال کردن، کلید Escape را فشار دهید.
2. با فعال بودن قطره‌چکان ، نشانگر ماوس را روی رنگ مورد نظر نگه دارید و برای نمونه‌برداری کلیک کنید.

در این مثال، انتخابگر رنگ مقدار رنگ فعلی rgb(224 255 255 / 15%) را نشان می‌دهد. این رنگ به محض اینکه خارج از کروم کلیک کنید، به صورتی تغییر می‌کند.

Jecelyn Yeen

Sofia Emelianova

انتخابگر رنگ یک رابط کاربری گرافیکی (GUI) برای تغییر اعلان‌های color و *-color ارائه می‌دهد و به شما امکان می‌دهد رنگ‌های غیر HD و HD را با یک کلیک ایجاد، تبدیل و اشکال‌زدایی کنید.

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

انتخابگر رنگ را باز کنید و رنگ‌ها را تغییر دهید

از Color Picker برای تغییر مقادیر رنگ با یک کلیک استفاده کنید:

1. یک عنصر را در پنل عناصر انتخاب کنید.

2. در پنل استایل‌ها ، color یا عبارت *-color مورد نظر برای تغییر را پیدا کنید.

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

   

برای بررسی مقدار محاسبه‌شده، از پنجره Computed استفاده کنید .

1. برای باز کردن Color Picker، روی مربع پیش‌نمایش کنار هر رنگ کلیک کنید.
2. برای تغییر رنگ، از هر یک از عناصر رابط کاربری Color Picker استفاده کنید.

عناصر انتخاب رنگ

در اینجا توضیحی از هر یک از عناصر رابط کاربری Color Picker آورده شده است:

1. سایه‌ها
2. قطره‌چکان . به بخش نمونه‌برداری از رنگ در هر نقطه با قطره‌چکان مراجعه کنید.
3. کپی در کلیپ‌بورد . مقدار نمایش را در کلیپ‌بورد خود کپی کنید.
4. مقدار نمایش . آرگومان‌های فضای رنگی انتخاب شده.
5. نسبت کنتراست . فقط برای مقادیر color موجود است. این تفاوت بین color و background-color است.
6. پالت رنگ . برای تغییر رنگ به رنگ مربع، روی یک مربع کلیک کنید.
7. مرز گاموت . این خط فقط برای فضاهای رنگی جدید و تابع color() در دسترس است. آنها می‌توانند هم رنگ‌های HD و هم رنگ‌های غیر HD تولید کنند. این خط به شما امکان می‌دهد بین HD و غیر HD تمایز قائل شوید.
8. دایره رنگ . این دایره را روی سایه‌ها بکشید تا مقدار نمایش تغییر کند.
9. اسلایدر رنگ .
10. نوار لغزنده کدورت .
11. تغییر دهنده‌ی مقدار نمایش . یک فضای رنگی را از لیست کشویی انتخاب کنید. به تبدیل رنگ‌ها مراجعه کنید.
12. نسبت کنتراست را افزایش دهید . بخش مربوطه را باز می‌کند که به شما امکان می‌دهد کنتراست را اصلاح کنید .

13. تغییر دهنده پالت رنگ . برای تغییر بین موارد زیر، روی آن کلیک کنید:

    • پالت طراحی متریال .
    • پالت سفارشی . برای افزودن دستی رنگ فعلی به این پالت، کلیک کنید .
    • پالت متغیرهای CSS . تمام متغیرهای CSS سفارشی (که با -- اضافه شده‌اند) را در صفحه شما فهرست می‌کند.
    • پالت رنگ‌های صفحه . برای تولید این پالت، DevTools تمام رنگ‌های موجود در stylesheet های شما را جستجو می‌کند.

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

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

1. کلید Shift را نگه دارید و روی آیکون پیش‌نمایش کنار مقدار رنگ کلیک کنید . یک لیست کشویی باز می‌شود.

   

2. یکی از فضاهای رنگی زیر را انتخاب کنید:

   • #<hex-color>
   • rgb(XXX / .X) .
   • hsl(XXX / X) .
   • hwb(XXX / .X) .

   یا یکی از فضاهای جدید:

   • lch(XXX / .X)
   • oklch(XXX / .X)
   • lab(XXX / .X)
   • oklab(XXX / .X)

   یا فضایی که توسط تابع color(<color_space> XXX) تعریف شده است.

تبدیل رنگ‌ها

وقتی با استفاده از ابزار تغییر مقدار Display بین فضاهای رنگی جابه‌جا می‌شوید، DevTools به‌طور خودکار مقادیر را تبدیل می‌کند.

برای مشاهده مقدار اصلی، نشانگر ماوس را روی آیکون نگه دارید.

ویدیوی بعدی تبدیل‌ها را در عمل نشان می‌دهد.

کنتراست را اصلاح کنید

برای رفع مشکل کنتراست برای اعلام color :

1. کادر انتخاب رنگ (Color Picker) کنار مقدار color را باز کنید.
2. نسبت کنتراست را افزایش دهید بخش

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

   • کلیک در کنار راهنما.
   • در پیش‌نمایش Shades در بالا، دایره Color را زیر خط مربوطه بکشید.

به طور پیش‌فرض، انتخابگر رنگ، مقادیری را پیشنهاد می‌دهد که با APCA سازگار هستند.

از طرف دیگر، می‌توانید آن را طوری تنظیم کنید که مقادیری مطابق با دستورالعمل‌های WebAIM پیشنهاد دهد. تنظیمات > تنظیمات برگزیده > عناصر ، موارد زیر را پاک کنید کادر انتخاب الگوریتم پیشرفته کنتراست ادراکی (APCA)...

برای دریافت فهرستی از تمام مشکلات کنتراست به صورت یکجا، راهنمای «وب‌سایت خود را خواناتر کنید» را دنبال کنید.

با استفاده از قطره‌چکان، از هر جایی از رنگ نمونه‌برداری کنید

قطره‌چکان می‌تواند رنگ‌ها را هم از صفحه و هم از هر کجای صفحه نمونه‌برداری کند.

برای انتخاب رنگ از هر کجای صفحه:

1. Color Picker را باز کنید و یکی از موارد زیر را انجام دهید:
   • کلیک کنید دکمه
   • برای فعال کردن قطره‌چکان، کلید C را فشار دهید. برای غیرفعال کردن، کلید Escape را فشار دهید.
2. با فعال بودن قطره‌چکان ، نشانگر ماوس را روی رنگ مورد نظر نگه دارید و برای نمونه‌برداری کلیک کنید.

در این مثال، انتخابگر رنگ مقدار رنگ فعلی rgb(224 255 255 / 15%) را نشان می‌دهد. این رنگ به محض اینکه خارج از کروم کلیک کنید، به صورتی تغییر می‌کند.

Jecelyn Yeen

Sofia Emelianova

انتخابگر رنگ یک رابط کاربری گرافیکی (GUI) برای تغییر اعلان‌های color و *-color ارائه می‌دهد و به شما امکان می‌دهد رنگ‌های غیر HD و HD را با یک کلیک ایجاد، تبدیل و اشکال‌زدایی کنید.

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

انتخابگر رنگ را باز کنید و رنگ‌ها را تغییر دهید

از Color Picker برای تغییر مقادیر رنگ با یک کلیک استفاده کنید:

1. یک عنصر را در پنل عناصر انتخاب کنید.

2. در پنل استایل‌ها ، color یا عبارت *-color مورد نظر برای تغییر را پیدا کنید.

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

   

برای بررسی مقدار محاسبه‌شده، از پنجره Computed استفاده کنید .

1. برای باز کردن Color Picker، روی مربع پیش‌نمایش کنار هر رنگ کلیک کنید.
2. برای تغییر رنگ، از هر یک از عناصر رابط کاربری Color Picker استفاده کنید.

عناصر انتخاب رنگ

در اینجا توضیحی از هر یک از عناصر رابط کاربری Color Picker آورده شده است:

1. سایه‌ها
2. قطره‌چکان . به بخش نمونه‌برداری از رنگ در هر نقطه با قطره‌چکان مراجعه کنید.
3. کپی در کلیپ‌بورد . مقدار نمایش را در کلیپ‌بورد خود کپی کنید.
4. مقدار نمایش . آرگومان‌های فضای رنگی انتخاب شده.
5. نسبت کنتراست . فقط برای مقادیر color موجود است. این تفاوت بین color و background-color است.
6. پالت رنگ . برای تغییر رنگ به رنگ مربع، روی یک مربع کلیک کنید.
7. مرز گاموت . این خط فقط برای فضاهای رنگی جدید و تابع color() در دسترس است. آنها می‌توانند هم رنگ‌های HD و هم رنگ‌های غیر HD تولید کنند. این خط به شما امکان می‌دهد بین HD و غیر HD تمایز قائل شوید.
8. دایره رنگ . این دایره را روی سایه‌ها بکشید تا مقدار نمایش تغییر کند.
9. اسلایدر رنگ .
10. نوار لغزنده کدورت .
11. تغییر دهنده‌ی مقدار نمایش . یک فضای رنگی را از لیست کشویی انتخاب کنید. به تبدیل رنگ‌ها مراجعه کنید.
12. نسبت کنتراست را افزایش دهید . بخش مربوطه را باز می‌کند که به شما امکان می‌دهد کنتراست را اصلاح کنید .

13. تغییر دهنده پالت رنگ . برای تغییر بین موارد زیر، روی آن کلیک کنید:

    • پالت طراحی متریال .
    • پالت سفارشی . برای افزودن دستی رنگ فعلی به این پالت، کلیک کنید .
    • پالت متغیرهای CSS . تمام متغیرهای CSS سفارشی (که با -- اضافه شده‌اند) را در صفحه شما فهرست می‌کند.
    • پالت رنگ‌های صفحه . برای تولید این پالت، DevTools تمام رنگ‌های موجود در stylesheet های شما را جستجو می‌کند.

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

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

1. کلید Shift را نگه دارید و روی آیکون پیش‌نمایش کنار مقدار رنگ کلیک کنید . یک لیست کشویی باز می‌شود.

   

2. یکی از فضاهای رنگی زیر را انتخاب کنید:

   • #<hex-color>
   • rgb(XXX / .X) .
   • hsl(XXX / X) .
   • hwb(XXX / .X) .

   یا یکی از فضاهای جدید:

   • lch(XXX / .X)
   • oklch(XXX / .X)
   • lab(XXX / .X)
   • oklab(XXX / .X)

   یا فضایی که توسط تابع color(<color_space> XXX) تعریف شده است.

تبدیل رنگ‌ها

وقتی با استفاده از ابزار تغییر مقدار Display بین فضاهای رنگی جابه‌جا می‌شوید، DevTools به‌طور خودکار مقادیر را تبدیل می‌کند.

برای مشاهده مقدار اصلی، نشانگر ماوس را روی آیکون نگه دارید.

ویدیوی بعدی تبدیل‌ها را در عمل نشان می‌دهد.

کنتراست را اصلاح کنید

برای رفع مشکل کنتراست برای اعلام color :

1. کادر انتخاب رنگ (Color Picker) کنار مقدار color را باز کنید.
2. نسبت کنتراست را افزایش دهید بخش

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

   • کلیک در کنار راهنما.
   • در پیش‌نمایش Shades در بالا، دایره Color را زیر خط مربوطه بکشید.

به طور پیش‌فرض، انتخابگر رنگ، مقادیری را پیشنهاد می‌دهد که با APCA سازگار هستند.

از طرف دیگر، می‌توانید آن را طوری تنظیم کنید که مقادیری مطابق با دستورالعمل‌های WebAIM پیشنهاد دهد. تنظیمات > تنظیمات برگزیده > عناصر ، موارد زیر را پاک کنید کادر انتخاب الگوریتم پیشرفته کنتراست ادراکی (APCA)...

برای دریافت فهرستی از تمام مشکلات کنتراست به صورت یکجا، راهنمای «وب‌سایت خود را خواناتر کنید» را دنبال کنید.

با استفاده از قطره‌چکان، از هر جایی از رنگ نمونه‌برداری کنید

قطره‌چکان می‌تواند رنگ‌ها را هم از صفحه و هم از هر کجای صفحه نمونه‌برداری کند.

برای انتخاب رنگ از هر کجای صفحه:

1. Color Picker را باز کنید و یکی از موارد زیر را انجام دهید:
   • کلیک کنید دکمه
   • برای فعال کردن قطره‌چکان، کلید C را فشار دهید. برای غیرفعال کردن، کلید Escape را فشار دهید.
2. با فعال بودن قطره‌چکان ، نشانگر ماوس را روی رنگ مورد نظر نگه دارید و برای نمونه‌برداری کلیک کنید.

در این مثال، انتخابگر رنگ مقدار رنگ فعلی rgb(224 255 255 / 15%) را نشان می‌دهد. این رنگ به محض اینکه خارج از کروم کلیک کنید، به صورتی تغییر می‌کند.