---
title: inverted-colors
slug: Web/CSS/@media/inverted-colors
tags:
  - '@media'
  - CSS
  - Media Queries
  - Reference
  - media feature
translation_of: Web/CSS/@media/inverted-colors
---
<div>{{cssref}}</div>

<p><a href="https://developer.mozilla.org/ru/docs/Web/CSS">CSS</a> <a href="https://developer.mozilla.org/ru/docs/Web/CSS/Media_Queries/Using_media_queries">медиа функция</a> <code><strong>inverted-colors</strong></code> может использоваться для проверки, инвертирует ли {{glossary("user agent")}} или ОС цвета.</p>

<h2 id="Синтаксис">Синтаксис</h2>

<p>Функция <code>inverted-colors</code> указана в качестве значения ключевого слова, выбранного из списка ниже.</p>

<dl>
 <dt><code>none</code></dt>
 <dd>
 <p>Цвета отображаются нормально.</p>
 </dd>
 <dt><code>inverted</code></dt>
 <dd>Все пиксели в отображаемой области были инвертированы.</dd>
</dl>

<h2 id="Пример">Пример</h2>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;p&gt;Если вы используете инвертированные цвета, этот текст должен быть синим по белому (инверсия жёлтого по чёрному). Если нет, он должен быть красным на светло-сером.&lt;/p&gt;
&lt;p&gt;Если текст серого цвета, ваш браузер не поддерживает медиа-функцию `inverted-colors`.&lt;/p&gt;</pre>

<h3 id="CSS">CSS</h3>

<pre class="brush: css">p {
  color: gray;
}

@media (inverted-colors: inverted) {
  p {
    background: black;
    color: yellow;
  }
}

@media (inverted-colors: none) {
  p {
    background: #eee;
    color: red;
  }
}</pre>

<h3 id="Result">Result</h3>

<p>{{EmbedLiveSample("Пример")}}</p>

<h2 id="Спецификация">Спецификация</h2>

{{Specifications}}

<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>



<p>{{Compat}}</p>