ترکیب رنگ (sRGB و OKLab)

ترکیب دو رنگ در sRGB و OKLab کنار هم، با پله‌های میانی و خروجی هگز و CSS

رایگان
همه‌ی این ابزارها داخل مرورگر شما اجرا می‌شوند؛ هیچ داده‌ای به سرور ما ارسال نمی‌شود.
A 50% / B 50%
sRGB — میانگین ساده
#000000

میانگین مستقیم عددهای هگز، بدون خنثی‌کردن گامای sRGB؛ همان کاری که یک لِرپ ساده می‌کند.

ترکیب ادراکی (OKLab)
#000000

ترکیب در فضای OKLab که با درک چشم هماهنگ است؛ رنگ میانی روشن‌تر و طبیعی‌تر از ترکیب سادهٔ RGB درمی‌آید.

OKLab — ادراکی
#000000

میانگین در فضای OKLab؛ روشنایی و اشباع در طول طیف یکنواخت می‌ماند.

OKLCH — چرخش فام
#000000

مثل OKLab، اما فام از کوتاه‌ترین کمان می‌چرخد و طیف اشباع‌تر می‌ماند.

sRGB — میانگین ساده
ترکیب ادراکی (OKLab)
OKLab — ادراکی
OKLCH — چرخش فام

درباره‌ی ترکیب رنگ (sRGB و OKLab)

میانگین‌گرفتن از دو کد هگز، در واقع میانگین‌گرفتن از عددهای گامادار sRGB است، نه از مقدار نور. آبی #0000ff را با زرد #ffff00 این‌طور ترکیب کنید و به خاکستری بی‌جان #808080 می‌رسید؛ همان ترکیب در فضای OKLab نتیجه‌اش #6cabc7 است. این ابزار هر دو مسیر را همزمان و کنار هم حساب می‌کند تا اختلاف را با چشم ببینید، به‌علاوهٔ یک نسخهٔ OKLCH که فام را از کوتاه‌ترین کمان می‌چرخاند.

راهنمای استفاده از ترکیب رنگ (sRGB و OKLab)

  1. 1

    دو رنگ را با انتخابگر رنگ بردارید یا کد هگز آن‌ها را در کادر کناری بنویسید.

  2. 2

    لغزندهٔ سهم رنگ دوم را روی درصد دلخواه ببرید؛ صفر یعنی فقط رنگ اول و صد یعنی فقط رنگ دوم.

  3. 3

    سه کارت sRGB، OKLab و OKLCH را کنار هم مقایسه کنید و کد هگز هرکدام را با دکمهٔ کپی بردارید.

  4. 4

    تعداد پله‌ها را تغییر دهید و روی هر پله از نوارهای طیف بزنید تا کد هگزش کپی شود.

  5. 5

    کادر خروجی CSS را بردارید؛ متغیرها، معادل color-mix و گرادیان OKLab آماده‌اند.

پرسش‌های متداول

چرا نتیجهٔ sRGB و OKLab این‌قدر با هم فرق دارد؟

چون کد هگز مقدار نور نیست؛ عددی است که با گامای حدوداً ۲٫۲ رمزگذاری شده. میانگین دو عدد گامادار، وسطِ ادراکیِ دو رنگ نیست. نمونهٔ گویا: وسط سیاه و سفید در sRGB می‌شود #808080، ولی خاکستری‌ای که چشم دقیقاً وسط می‌بیند #636363 است — همان چیزی که OKLab با L=۵۰٪ می‌دهد.

خروجی این ابزار با color-mix(in oklab, …) مرورگر یکی است؟

برای رنگ‌های مات بله؛ هر دو همان درون‌یابی خطی در OKLab را انجام می‌دهند و ماتریس‌های پیاده‌شده اینجا دقیقاً ماتریس‌های اصلی OKLab هستند. تنها اختلاف ممکن در رنگ‌های بیرون از گاموت است: ما هر کانال را ساده می‌بُریم (clip) در حالی که بعضی مرورگرها gamut mapping دقیق‌تری انجام می‌دهند.

پس همیشه باید OKLCH را انتخاب کرد؟

نه. OKLCH برای طیف‌های تک‌فام یا رنگ‌های نزدیک به هم عالی است، اما وسطِ قرمز و آبی از سمت صورتی رد می‌شود و به #ba00c2 می‌رسد که بیرون از گاموت sRGB است و بریده می‌شود؛ کارت مربوطه همین را هشدار می‌دهد. برای دو رنگ دور از هم، OKLab معمولاً نتیجهٔ امن‌تری دارد.

آلفا و رنگ‌های نیمه‌شفاف پشتیبانی می‌شوند؟

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