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

Jecelyn Yeen

Sofia Emelianova

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

نکته کلیدی: این ویدیو نسخه DevTools کروم را زودتر از 112 نشان می دهد. در نسخه های بعدی، صفحه Styles از 12 فضای رنگی جدید و 7 محدوده جدید از مشخصات CSS Color Level 4 و تابع color-mix() از CSS Color Level 5 پشتیبانی می کند. .

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

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

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

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

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

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

   

   توجه: این مثال دو دایره متقاطع را در کنار تابع color-mix() نشان می دهد: . تقاطع پیش نمایشی از رنگ به دست آمده است.

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

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

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

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

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

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

   توجه: همچنین، روی تغییر دهنده مقدار Display در Color Picker کلیک کنید.

   

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 به طور خودکار مقادیر را تبدیل می کند.

احتیاط: هنگام تبدیل از HD به غیر HD، DevTools محدوده‌ها را متناسب با فضا برش می‌دهد و مقادیر برش‌شده را با آن علامت‌گذاری می‌کند. نمادهای هشدار

ماوس را روی نماد نگه دارید تا مقدار اصلی را ببینید.

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

رفع کنتراست

نکته کلیدی: Color Picker نسبت کنتراست را فقط برای مقادیر color و نسبت به مقادیر background-color مربوطه محاسبه می‌کند. بنابراین، فقط مقادیر color دارای بخش های نسبت کنتراست هستند.

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

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

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

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

توجه: به‌طور پیش‌فرض، Color Picker به شما پیشنهاد می‌کند که دستورالعمل‌های WebAIM را دنبال کنید. همچنین، می‌توانید آن را طوری تنظیم کنید که مقادیر مطابق با APCA : In را پیشنهاد کند تنظیمات > آزمایش‌ها را بررسی کنید فعال کردن الگوریتم جدید کنتراست ادراکی پیشرفته (APCA)...

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

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

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

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

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

توجه: Eyedropper رنگ ها را فقط در فضای رنگی sRGB نمونه برداری می کند. هنگامی که در خارج از این فضا نمونه می گیرید، قطره چکان رنگ را به نزدیک ترین رنگ می بندد. به تبدیل رنگ ها مراجعه کنید.