# گاموت رنگ به زبان ساده: sRGB، Display P3 و رنگ‌های بیرون از گاموت

گاموت مجموعه رنگ‌هایی است که یک صفحه‌نمایش یا یک فضای رنگی می‌تواند نشان دهد. وب بر پایه sRGB ساخته شده، اما امروز بیشتر گوشی‌ها و بسیاری از لپ‌تاپ‌ها Display P3 را نشان می‌دهند که قرمزها، سبزها و نارنجی‌های آن به‌وضوح زنده‌ترند.

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

## گاموت چیست

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

## sRGB، Display P3 و Rec. 2020

sRGB پیش‌فرض وب و بیشتر مانیتورهایی است که پیش از 2016 فروخته شده‌اند. HEX، rgb() و hsl() همگی رنگ‌های sRGB را توصیف می‌کنند.

Display P3 حدود یک‌چهارم رنگ بیشتر از sRGB را پوشش می‌دهد، بیشتر سبزها، قرمزها و نارنجی‌های زنده. آیفون، آیپد، مک و بسیاری از گوشی‌های Android و لپ‌تاپ‌های رده‌بالا از آن استفاده می‌کنند. در CSS آن را به‌صورت color(display-p3 r g b) یا با یک مقدار OKLCH با کرومای بالا می‌نویسند.

Rec. 2020 از این هم بزرگ‌تر است و برای ویدیوی HDR به کار می‌رود. صفحه‌نمایش‌های خیلی کمی آن را کامل پوشش می‌دهند.

| فرمت | مقدار |
| --- | --- |
| HEX | #ff5733 |
| Display P3 | color(display-p3 0.92577 0.38907 0.25797) |
| OKLCH | oklch(68.036% 0.21001 33.692) |
| Rec. 2020 | color(rec2020 0.81266 0.37868 0.19735) |

## چه بر سر رنگ‌های بیرون از گاموت می‌آید

اگر یک رنگ CSS بیرون از گاموت صفحه‌نمایش باشد، مرورگر ناچار است چیز دیگری نشان دهد. بریدن ساده (clipping) هر کانال را تا حد مجاز کوتاه می‌کند و ممکن است فام را تغییر دهد. CSS Color 4 به‌جای آن نگاشت گاموت در OKLCH را توصیه می‌کند: روشنایی و فام حفظ شوند و کروما آن‌قدر پایین بیاید تا رنگ جا شود.

PickShade هر رنگی را که بیرون از sRGB بیفتد علامت می‌زند و جایگزین نگاشت‌شده را نشان می‌دهد، تا دقیقاً بدانید کاربرانی که صفحه‌نمایش قدیمی‌تر دارند چه می‌بینند.

## استفاده بی‌خطر از رنگ‌های P3 در CSS

اول یک مقدار جایگزین sRGB بنویسید و بعد مقدار گاموت گسترده را، یا مقدار زنده را داخل یک مدیا کوئری color-gamut بگذارید.

```css
.button {
    background: #ff5733;
    background: oklch(68% 0.24 33.7);
}

@media (color-gamut: p3) {
    .hero {
        color: color(display-p3 1 0.3 0.15);
    }
}
```

## پرسش و پاسخ

### از کجا بفهمم یک رنگ داخل sRGB است؟

آن را در PickShade بچسبانید. هر رنگی که بیرون از sRGB باشد، هشدار گاموت می‌گیرد و نزدیک‌ترین رنگی که جا می‌شود هم کنارش نشان داده می‌شود.

### آیا رنگ‌های P3 در ویندوز کار می‌کنند؟

بله، اگر مانیتور P3 را پوشش دهد و مرورگر پروفایل نمایشگر را بشناسد. روی صفحه‌نمایش sRGB، مرورگر رنگ را به داخل sRGB می‌برد، پس چیزی خراب نمی‌شود.

### آیا HEX به sRGB محدود است؟

بله. HEX، rgb()، hsl() و hwb() همیشه رنگ‌های sRGB را توصیف می‌کنند. برای رنگ‌های گاموت گسترده از oklch() یا color(display-p3 ...) استفاده کنید.

## ابزارها

- [مبدل HEX به Display P3](https://pickshade.com/fa/convert/hex-to-p3)
- [انتخابگر رنگ OKLCH با هشدار گاموت](https://pickshade.com/fa)
- [OKLCH به زبان ساده](https://pickshade.com/fa/oklch)

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

- [OKLCH به زبان ساده: فرمت رنگی که بالاخره با چشم شما هماهنگ است](https://pickshade.com/fa/oklch)
- [تابع color-mix() و رنگ نسبی در CSS: هاور، نسخه روشن‌تر و شفافیت](https://pickshade.com/fa/css-color-mix)
- [فرمت‌های رنگ به زبان ساده: HEX، RGB، HSL، OKLCH و بقیه](https://pickshade.com/fa/color-formats)