LCH: دسترسی آسان تر و رنگ های زیباتر

فضای رنگی سبک، کروما، رنگ به گونه ای ایجاد شده است که از نظر ادراکی یکنواخت باشد و کار با آن برای انسان آسان باشد. ما از LCH برای افزایش دسترسی به رنگ های برجسته در سیستم طراحی خود استفاده کردیم.

فضاهای رنگی

بیایید با چند اصطلاح شروع کنیم:

• RGB (قرمز، سبز، آبی): رنگ های RGB به نظر می رسد rgb(255, 128, 0) یا #ff8000

• HSL (رنگ، ​​اشباع، سبکی): رنگ های HSL شبیه هستند hsl(180, 50%, 60%)

• LCH (سبکی، رنگی، رنگ): رنگ های LCH به نظر می رسد lch(50, 150, 180) یا lch(50%, 100%, 220)

• HSV (گاهی اوقات HSB نامیده می شود) شبیه HSL است. ما در این پست HSV را پوشش نخواهیم داد

مشکل RGB چیست؟

درک رنگ های RGB برای انسان سخت است. ما رنگ‌ها را ترکیبی از نور قرمز، سبز و آبی نمی‌دانیم. بدتر از آن دستکاری رنگ های RGB است. هیچ راه آسانی برای روشن/تیره کردن یا اشباع کردن/غیر اشباع کردن رنگ RGB وجود ندارد.

به این اسلایدرها نگاه کنید و سعی کنید هر معنایی از آنها پیدا کنید:

مشکل HSL چیست؟

HSL است بسیار استفاده راحت تر از RGB با این حال، یک نقص مهم دارد: اینطور نیست از نظر ادراکی یکنواخت. رنگ های مختلف به شدت روشنایی درک شده را برای یک اشباع و روشنایی مشخص تغییر می دهد.

برای رعایت قابلیت دسترسی، WCAG AA برای متن به نسبت کنتراست 4.5 نیاز دارد. شما باید اشباع و روشنایی هر رنگ را با دقت تنظیم کنید (رنگ) در پالت شما. ما مقداری کاوش کد در مورد چگونگی دسترسی به رنگ های تاکیدی خود انجام دادیم. ما در ابتدا از فضای رنگی HSL برای تیره کردن رنگ های برنامه استفاده کردیم تا زمانی که نسبت 4.5 را برآورده کنیم.

HSL کار خوبی برای تیره کردن رنگ‌ها برای دسترسی انجام می‌دهد، اما می‌بینید که وقتی از LCH استفاده می‌کردیم، میزان اشباع اولیه رنگ را بسیار بیشتر حفظ کردم. کارت های HSL تیره و کسل کننده به نظر می رسند.

چگونه از LCH استفاده کنم؟

از ماه مه 2023، lch() در تمام مرورگرها پشتیبانی می شود. برای پشتیبانی از مرورگرهای قدیمی باید از a پردازنده CSS یا رنگ ها را به صورت دستی تبدیل کنید.

یک نمونه رنگ CSS LCH به نظر می رسد lch(40 68.8 34.5). این رنگ از دستور جدید CSS Colors 4 بدون کاما استفاده می کند و از دستور اسلش جدید برای تعیین کانال آلفا پشتیبانی می کند: lch(40 68.8 34.5 / 50%).

می توانید رنگ های LCH را کاوش کرده و با استفاده از آن به RGB تبدیل کنید انتخابگر رنگ LCH. با استفاده از رنگی، می توانید رنگ های LCH را به رنگ های RGB تبدیل کنید:

// This should be in a file called "colord.js" or similar
import { extend } from "colord";
import a11yPlugin from "colord/plugins/a11y";
import lchPlugin from "colord/plugins/lch";
extend([lchPlugin, a11yPlugin]);
export { colord } from "colord";

و سپس در یک فایل دیگر:

import { colord } from "./colord";
const lch = colord({ l: 55, c: 85, h: 25 }).toLch();
colord(lch).toHex(); // "#fa234c"
lch.l -= 10;
colord(lch).toHex(); // "#da0036"

حتی می توانید نسخه های قابل دسترس تری از رنگ های موجود ایجاد کنید:

import { colord } from "./colord";
// Contrast is a number in the range 1-21 using the WCAG AA algorithm
function darkenColorForContrast(baseColor, contrast = 4.5) {
  const lch = colord(baseColor).toLch();
  while (lch.l > 0 && colord(lch).contrast("#fff") < contrast) {
    lch.l -= 1;
  }
  return colord(lch).toHex();
}
darkenColorForContrast("#f60"); // "#d54100"

تبدیل ضرر

LCH می تواند رنگ ها را خارج از فضای رنگی sRGB که توسط رنگ های RGB و HSL در مرورگر استفاده می شود، نشان دهد. رنگ های زیادی در LCH نمی توان به طور دقیق به RGB ترجمه کرد. حفظ رنگ ها در قالب LCH تا جایی که ممکن است مهم است. و LCH باید در CSS قبل از رنگ های غیر SRGB در مرورگر پیاده سازی شود.

معاوضه LCH

ممکن است تعجب کنید که بدانید با رنگ های LCH، کروم و سبکی حداکثر مقادیر به رنگ. در تجربه من، این مسئله بزرگی نیست، اما عادت کردن به آن می تواند عجیب باشد. اگر از محدوده یک پارامتر در LCH تجاوز کنید، مقدار آن به حداکثر تنظیم می شود.

همچنین رنگ در LCH از مقدار افست می شود رنگ در HSL HSL ها رنگ با قرمز خالص شروع می شود، در حالی که LCH است رنگ با قرمز مایل به صورتی شروع می شود. بنابراین اگر سعی می‌کردید HSL را به صورت دستی به LCH تبدیل کنید، رنگ‌های شما با هم مخلوط می‌شوند.

بیشتر خواندن

• ترکیبات رنگی: یک وب سایت کنتراست و ترکیب رنگ که از رنگ های LCH پشتیبانی می کند مرورگر شما از رنگ های LCH پشتیبانی می کند. توجه داشته باشید که این سایت از الگوریتم کنتراست رنگ WCAG استفاده می کند که از نظر ادراکی صحیح نیست. WCAG در حال بررسی تغییر به یک الگوریتم کنتراست ادراکی صحیح در نسخه آینده است و طراحان را قادر می سازد تا رنگ هایی را انتخاب کنند که بهتر به نظر می رسند و در دسترس تر هستند بدون اینکه ابزارهای کنترل کنتراست خودکار از آنها شکایت کنند. توجه داشته باشید: اگر مرورگر شما از LCH پشتیبانی نمی کند، می توانید از آن استفاده کنید URL برای تقریبی رنگ ها از طریق کدهای هگز.

• طراحی سیستم های رنگی در دسترس توسط Stripe: یک مطالعه عالی در مورد اینکه چگونه Stripe از فضاهای رنگی یکنواخت برای طراحی مجدد پالت رنگ خود برای دسترسی استفاده کرد! اینجا جایی بود که من در ابتدا با فضای رنگی CIELAB آشنا شدم.

• فضاهای رنگی یکنواخت ادراکی توسط سیستم های طراحی برنامه نویسی: این مقاله حاوی اطلاعات عالی در مورد فضاهای رنگی با تصاویر بسیار عالی است.