Значения CMYK в качестве цвета фона

#css #reactjs #cmyk

#css #background-color #cmyk

Вопрос:

Я должен установить backgroundColor для div, используя значения RGB. Я могу получить этот путь.

 <div style="width: 100px; height: 100px; background-color: rgb(255,0,0)">
</div>

Теперь, поскольку у меня также есть значения CMYK (0,1,0.5,0), можете ли вы помочь мне, как добиться того же с этими значениями.

Я делаю это так, но без усиления.

 <div style="width: 100px; height: 100px; background-color: device-cmyk(0, 1, 0.5, 0)">
</div>

Спасибо

1. CMYK представляет значение цвета в совершенно другом цветовом пространстве по сравнению с RGB (не только с вычитанием или добавлением), поэтому корректное преобразование между CMYK и RGB возможно только с определенным цветовым профилем. Преобразования, подобные cmyk_to_rgb2 функции в приведенном ниже ответе Амини, дают приличные приблизительные результаты, но без цветового профиля цвета на экране никогда не будут соответствовать цветам печати (в противном случае, если CMYK и RGB можно было бы напрямую конвертировать туда и обратно, мы могли бы просто использовать RGB для всего и полностью отказаться от CMYK). CMYK также не сопоставим с HSB / HSL, поскольку HSB / HSL все еще аддитивны.

Ответ №1:

Вы не можете сделать это непосредственно в CSS. Вам нужно будет преобразовать ваши значения CMYK в их аналоги RGB где-то еще (возможно, с помощью серверного скрипта) и использовать преобразованные значения в вашем CSS. Обратите внимание, что преобразование на самом деле не сильно отличается от того, что делает функция SVG.

Ответ №2:

Вы можете использовать эту функцию PHP или использовать алгоритм, аналогичный реализованному на клиентском языке сценариев:

 function cmyk_to_rgb2($c, $m, $y, $k)
{
    $c = (255 * $c) / 100;
    $m = (255 * $m) / 100;
    $y = (255 * $y) / 100;
    $k = (255 * $k) / 100;

    $r = round(((255 - $c) * (255 - $k)) / 255) ;
    $g = round((255 - $m) * (255 - $k) / 255) ;
    $b = round((255 - $y) * (255 - $k) / 255) ; 

    $o->r = $r ;
    $o->g = $g ;
    $o->b = $b ;

    return $o ;
}

PHP, JavaScript

1. Пожалуйста, не злоупотребляйте PHP подобным образом. Вот почему загрузка веб-страниц занимает так много времени. Да, это правда, что этот и только этот небольшой фрагмент не замедлит его ни на какую измеримую величину. Но умножьте это на сотню для других фрагментов, используемых в вашем коде, и вы столкнетесь с серьезной проблемой скорости загрузки.

Ответ №3:

Вы можете сделать это с помощью SCSS:

 @function cmyk($c, $m, $y, $k:0) {
  $c: $c / 255;
  $m: $m / 255;
  $y: $y / 255;
  $k: $k / 1;
  $r: 255 * (1 - $c) * (1 - $k);
  $g: 255 * (1 - $m) * (1 - $k);
  $b: 255 * (1 - $y) * (1 - $k);
  @return rgb($r, $g, $b);
}

примечание: максимальное значение ключа равно 1, если вы выйдете за его пределы, цвет начнет инвертироваться.