3

I have to set backgroundColor of div using RGB values . Im able to get this way.

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

Now, Since I also have CMYK (0,1,0.5,0) values , So Can you assist me how to achieve same with these values.

Im doing this way , but no gain .

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

Thanks

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
user1641519
  • 377
  • 1
  • 4
  • 17
  • CMYK represents a color value in a very different color space compared to RGB (not just subtractive vs additive), so _correctly_ converting between CMYK and RGB is only possible with a defined color-profile. Conversions like the `cmyk_to_rgb2` function in Amini's answer below give decent approximate results, but without a color-profile the on-screen colors will never match the printed colors (otherwise if CMYK and RGB could be directly converted back-and-forth we could just use RGB for everything and abandon CMYK entirely). CMYK is not comparable to HSB/HSL either as HSB/HSL is still additive. – Dai Mar 03 '20 at 05:53

3 Answers3

3

You can't do it directly in CSS. You'll have to convert your CMYK values to their RGB counterparts somewhere else (probably by a server-side script) and use the converted values in your CSS. Note that converting is not actually much different to what the SVG function does.

Arash Shahkar
  • 655
  • 3
  • 12
  • 24
2

You can use this PHP function or use similar algorithm to implemented by client script language: 

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

Saeid
  • 580
  • 7
  • 8
  • 2
    Please don't abuse PHP like this. This is why web pages take so long to load. Yes, it is true that this and only this little snippet won't slow it down by any measurable amount. But, multiply this by a hundred for other snippets used throughout your code and you have for yourself a major loading speed problem. – Jack G Dec 14 '17 at 19:52
0

You can do it with 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);
}

note: key's maximum value is 1, if you go beyond that, color start to invert.

user14945188
  • 55
  • 8