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

Jecelyn Yeen

Sofia Emelianova

Color Picker یک رابط کاربری گرافیکی برای تغییر color و اعلان های *-color ارائه می دهد و به شما امکان می دهد رنگ های غیر HD و HD را با یک کلیک ایجاد، تبدیل و اشکال زدایی کنید.

برای بررسی عمیق فضاهای رنگی جدید، راهنمای رنگ CSS با وضوح بالا را ببینید.

Color Picker را باز کنید و رنگ ها را تغییر دهید

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

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

2. در قسمت Styles ، color یا *-color را که می خواهید تغییر دهید پیدا کنید.

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

   

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

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

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

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

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

13. تعویض کننده پالت رنگ . برای جابجایی بین:

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

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

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

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 را زیر خط مربوطه بکشید.

برای دریافت لیستی از تمام مشکلات کنتراست در یک حرکت، راهنمای خوانایی وب سایت خود را دنبال کنید.

یک رنگ را در هر جایی با قطره چشم نمونه بگیرید

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

برای انتخاب رنگ از هر نقطه روی صفحه:

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