# OKLCH به زبان ساده: فرمت رنگی که بالاخره با چشم شما هماهنگ است

OKLCH هر رنگ را با سه چیز توصیف می‌کند: چقدر روشن به نظر می‌رسد، چقدر پررنگ است و چه فامی دارد. برخلاف HSL، یک مقدار روشنایی ثابت در همه فام‌ها واقعاً به یک اندازه روشن دیده می‌شود. همین باعث می‌شود پالت‌ها، حالت‌های هاور و کنتراست دسترس‌پذیر قابل پیش‌بینی باشند.

منبع: https://pickshade.com/fa/oklch
به‌روزرسانی: 2026-09-28

## OKLCH چیست

OKLCH شکل قطبی Oklab است، یک فضای رنگی ادراکی که Björn Ottosson در سال 2020 منتشر کرد. این فرمت سه عدد دارد. L روشنایی ادراکی است، از 0 (سیاه) تا 1 یا 100% (سفید). C کروما یا میزان رنگ است، از 0 (خاکستری) تا حدود 0.37 برای پررنگ‌ترین رنگ‌هایی که صفحه‌نمایش‌ها نشان می‌دهند. H زاویه فام است، از 0 تا 360 درجه.

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

| فرمت | مقدار |
| --- | --- |
| HEX | #ff5733 |
| RGB | rgb(255 87 51) |
| HSL | hsl(10.59 100% 60%) |
| OKLCH | oklch(68.036% 0.21001 33.692) |
| OKLab | oklab(68.036% 0.17474 0.1165) |

## چرا OKLCH از HSL بهتر است

روشنایی در HSL یک فرمول است، نه ادراک چشم. hsl(60 100% 50%) یک زرد درخشان است و hsl(240 100% 50%) یک آبی تیره، اما هر دو ادعا می‌کنند روشنایی‌شان 50% است. اگر پالت را روی HSL بسازید، هر فام به اصلاح دستی نیاز دارد.

در OKLCH رنگ‌هایی که L برابر دارند، واقعاً به یک اندازه روشن دیده می‌شوند. می‌توانید L و C را ثابت نگه دارید و H را بچرخانید تا مجموعه‌ای از فام‌های متعادل بگیرید، یا H و C را ثابت نگه دارید و L را پله‌پله تغییر دهید تا یک مقیاس تمیزی از درجه‌ها بسازید. به همین دلیل Tailwind CSS v4 کل پالت پیش‌فرضش را با OKLCH تعریف کرده است.

روشنایی کنتراست را هم پیش‌بینی می‌کند. متنی که L آن حدود 0.4 یا بیشتر با پس‌زمینه فاصله دارد، معمولاً خوانا است. این کار انتخاب رنگ‌های دسترس‌پذیر را بسیار ساده‌تر می‌کند.

## سینتکس در CSS

روشنایی را می‌توان به‌صورت درصد یا عددی از 0 تا 1 نوشت. کروما یک عدد است. فام زاویه‌ای بر حسب درجه است. شفافیت بعد از علامت اسلش می‌آید.

```css
color: oklch(62.8% 0.258 29.23);
background: oklch(0.7 0.15 250 / 50%);
border-color: oklch(from var(--brand) calc(l - 0.1) c h);
```

## پشتیبانی مرورگرها

oklch() در همه مرورگرهای امروزی کار می‌کند: Safari از نسخه 15.4، Chrome و Edge از نسخه 111 و Firefox از نسخه 113. این یعنی خیلی بیشتر از 90% کاربران. برای مرورگرهای خیلی قدیمی، یک مقدار HEX جایگزین در خط قبل از مقدار OKLCH بنویسید.

```css
color: #ff5733;
color: oklch(68% 0.21 33.7);
```

## محدودیت کروما و گاموت

OKLCH می‌تواند رنگ‌هایی را توصیف کند که هیچ صفحه‌نمایشی قادر به نشان دادنشان نیست. بیشترین کروما به روشنایی و فام بستگی دارد: زرد پررنگ فقط در روشنایی بالا ممکن است و آبی پررنگ فقط در روشنایی پایین. وقتی مقداری بیرون از گاموت sRGB یا Display P3 باشد، مرورگر آن را به داخل گاموت برمی‌گرداند و ممکن است رنگ کمی تغییر کند.

PickShade رنگ‌های بیرون از sRGB را علامت می‌زند و نزدیک‌ترین رنگی را که جا می‌شود به شما می‌دهد. این رنگ با پایین آوردن کروما و حفظ روشنایی و فام پیدا می‌شود، همان روشی که CSS Color 4 توصیه می‌کند.

## چطور HEX را به OKLCH تبدیل کنیم

مسیر تبدیل این است: HEX به sRGB، sRGB به نور خطی، sRGB خطی به فضای مخروطی LMS، ریشه سوم، یک ماتریس برای رسیدن به Oklab و در آخر Oklab به مختصات قطبی. انجام دستی این کار پرخطاست، پس هر رنگی را در مبدل رنگ بچسبانید و نتیجه را کپی کنید.

## پرسش و پاسخ

### آیا همه مرورگرها از OKLCH پشتیبانی می‌کنند؟

بله، همه مرورگرهای امروزی: Safari 15.4 به بعد، Chrome و Edge 111 به بعد و Firefox 113 به بعد. اگر باید از مرورگرهای قدیمی‌تر پشتیبانی کنید، یک خط HEX قبل از آن اضافه کنید.

### فرق OKLCH و LCH چیست؟

هر دو روشنایی، کروما و فام را توصیف می‌کنند. lch() در CSS بر پایه CIELAB است و در آن آبی‌ها با تغییر روشنایی به سمت بنفش می‌روند. OKLCH بر پایه Oklab است و فام را ثابت نگه می‌دارد، پس مقیاس درجه‌های آبی، آبی باقی می‌ماند.

### چرا رنگ OKLCH من با چیزی که نوشتم فرق دارد؟

احتمالاً کروما بیشتر از حدی است که صفحه‌نمایش شما در آن روشنایی و فام می‌تواند نشان دهد. مرورگر رنگ را به داخل گاموت نمایشگر می‌برد. کروما را آن‌قدر کم کنید تا PickShade دیگر آن را بیرون از گاموت علامت نزند.

### آیا می‌توانم OKLCH را با Tailwind CSS استفاده کنم؟

بله. Tailwind CSS v4 همین حالا برای پالت پیش‌فرضش از OKLCH استفاده می‌کند و رنگ‌های سفارشی در @theme را هم می‌توان مستقیماً با OKLCH نوشت.

## ابزارها

- [مبدل HEX به OKLCH](https://pickshade.com/fa/convert/hex-to-oklch)
- [انتخابگر رنگ با اسلایدرهای OKLCH](https://pickshade.com/fa)
- [پالت Tailwind v4 با OKLCH](https://pickshade.com/fa/tailwind)

## راهنماهای مرتبط

- [گاموت رنگ به زبان ساده: sRGB، Display P3 و رنگ‌های بیرون از گاموت](https://pickshade.com/fa/gamut)
- [فرمت‌های رنگ به زبان ساده: HEX، RGB، HSL، OKLCH و بقیه](https://pickshade.com/fa/color-formats)
- [رنگ‌های Tailwind CSS: پالت OKLCH در v4، رنگ‌های سفارشی و درجه‌ها](https://pickshade.com/fa/tailwind-colors)