Colors CMYK
CMYK is a suggested standard for CSS4
CMYK Colors
CMYK colors is a combination of CYAN, MAGENTA, YELLOW , and BLACK.
Computer screens display colors using RGB color values. Printers often presents colors using CMYK color values.
HTML Support
CMYK is not supported in HTML, but it is suggested as a new standard in CSS4.
While waiting for CSS4, you can include w3resource' Color library, and use CMYK as an HTML attribute like this:
Try it Yourself
Example
<div data-w3-color="cmyk(100%, 0%, 0%, 0%)">
<p>London is the capital city of England.
It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>
<script src="/lib/w3color.js"></script>
w3resource Color Library
The JavaScript library used in the example above can be downloaded from:
function submitOnEnter(e) {
keyboardKey = e.which || e.keyCode;
if (keyboardKey == 13) {
setFullColor();
}
}
function clickCyan(cyan) {
var c = document.getElementById("c01");
c.value = cyan;
setColor(c);
}
function clickMagenta(magenta) {
var m = document.getElementById("m01");
m.value = magenta;
setColor(m);
}
function clickYellow(yellow) {
var y = document.getElementById("y01");
y.value = yellow;
setColor(y);
}
function clickBlack(black) {
var b = document.getElementById("k01");
b.value = black;
setColor(b);
}
function drawCyanTable() {
var x, i, m, y, k, color;
m = 0;
y = 0;
k = 0;
x = "
"
x += "";
for (i = 0; i <= 100; i++) {
x += " | ";
}
x += "
";
x += "";
for (i = 0; i <= 100; i++) {
color = w3color("cmyk(" + i + "%, " + m + "%, " + y + "%, " + k + "%)");
x += " | ";
}
x += "
";
x += "
";
document.getElementById("cyantable").innerHTML = x;
}
function drawMagentaTable() {
var x, i, c, y, k, color;
c = 0;
y = 0;
k = 0;
x = "
"
x += "";
for (i = 0; i <= 100; i++) {
x += " | ";
}
x += "
";
x += "";
for (i = 0; i <= 100; i++) {
color = w3color("cmyk(" + c + "%, " + i + "%, " + y + "%, " + k + "%)");
x += " | ";
}
x += "
";
x += "
";
document.getElementById("magentatable").innerHTML = x;
}
function drawYellowTable() {
var x, i, c, m, k, color;
c = 0;
m = 0;
k = 0;
x = "
"
x += "";
for (i = 0; i <= 100; i++) {
x += " | ";
}
x += "
";
x += "";
for (i = 0; i <= 100; i++) {
color = w3color("cmyk(" + c + "%, " + m + "%, " + i + "%, " + k + "%)");
x += " | ";
}
x += "
";
x += "
";
document.getElementById("yellowtable").innerHTML = x;
}
function drawBlackTable() {
var x, i, c, m, y, color;
c = 0;
m = 0;
y = 0;
x = "
"
x += "";
for (i = 0; i <= 100; i++) {
x += " | ";
}
x += "
";
x += "";
for (i = 0; i <= 100; i++) {
color = w3color("cmyk(" + c + "%, " + m + "%, " + y + "%, " + i + "%)");
x += " | ";
}
x += "
";
x += "
";
document.getElementById("blacktable").innerHTML = x;
}
drawCyanTable();
drawMagentaTable();
drawYellowTable();
drawBlackTable();
var btnclck = false;
if (window.addEventListener) {
window.addEventListener("mousedown", function () {btnclck = true; });
} else if (window.attachEvent) {
window.attachEvent("onmousedown", function () {btnclck = true; });
}
if (window.addEventListener) {
window.addEventListener("mouseup", function () {btnclck = false; });
} else if (window.attachEvent) {
window.attachEvent("onmouseup", function () {btnclck = false; });
}
function tooltip(e, n) {
var x;
if (btnclck) {
if (e == 0) { x = document.getElementById("c01"); }
if (e == 1) { x = document.getElementById("m01"); }
if (e == 2) { x = document.getElementById("y01"); }
if (e == 3) { x = document.getElementById("k01"); }
x.value = n;
setColor(x);
}
}
function setColor(elmnt) {
var ele, col, c, m, y, k, rgb;
c = document.getElementById("c01");
m = document.getElementById("m01");
y = document.getElementById("y01");
k = document.getElementById("k01");
elmnt.value = Number(elmnt.value);
if (parseInt(elmnt.value) < 0) {elmnt.value = "0";}
if (parseInt(elmnt.value) > 100) {elmnt.value = "100";}
rgb = w3color("cmyk(" + c.value + "%, " + m.value + "%, " + y.value + "%, " + k.value + "%)");
document.getElementById("result01").style.backgroundColor = rgb.toRgbString();
document.getElementById("cmyk01").value = rgb.toCmykString();
document.getElementById("rgb01").innerHTML = rgb.toRgbString();
document.getElementById("hsl01").innerHTML = rgb.toHslString();
document.getElementById("hex01").innerHTML = rgb.toHexString();
for (i = 0; i <= 100; i++) {
document.getElementById("cyanpointer" + i).style.display = "none";
document.getElementById("magentapointer" + i).style.display = "none";
document.getElementById("yellowpointer" + i).style.display = "none";
document.getElementById("blackpointer" + i).style.display = "none";
}
document.getElementById("cyanpointer" + c.value).style.display = "inline";
document.getElementById("magentapointer" + m.value).style.display = "inline";
document.getElementById("yellowpointer" + y.value).style.display = "inline";
document.getElementById("blackpointer" + k.value).style.display = "inline";
document.getElementById("linktocp").innerHTML = "
Use this color in our Color Picker
";
}
function setFullColor() {
var color = w3color(document.getElementById("cmyk01").value);
var cmyk = color.toCmyk();
document.getElementById("c01").value = (cmyk.c * 100).toFixed(0);
document.getElementById("m01").value = (cmyk.m * 100).toFixed(0);
document.getElementById("y01").value = (cmyk.y * 100).toFixed(0);
document.getElementById("k01").value = (cmyk.k * 100).toFixed(0);
setColor(document.getElementById("c01"));
}
color = w3color("cmyk(100%, 0%, 0%, 0%)");
document.getElementById("cmyk01").value = color.toCmykString();
setFullColor();