CSS for PCCS

CSS containing PCCS and HEX pairs.


 .text-v1 {
  color: #b91f57;
}

.text-v2 {
  color: #d02f48;
}

.text-v3 {
  color: #dd443b;
}

.text-v4 {
  color: #e95b23;
}

.text-v5 {
  color: #e67800;
}

.text-v6 {
  color: #f49d00;
}

.text-v7 {
  color: #f1b500;
}

.text-v8 {
  color: #eec900;
}

.text-v9 {
  color: #d2c100;
}

.text-v10 {
  color: #a8bb00;
}

.text-v11 {
  color: #58a91d;
}

.text-v12 {
  color: #00a15a;
}

.text-v13 {
  color: #00926e;
}

.text-v14 {
  color: #00857f;
}

.text-v15 {
  color: #007488;
}

.text-v16 {
  color: #00709b;
}

.text-v17 {
  color: #00609c;
}

.text-v18 {
  color: #005ba5;
}

.text-v19 {
  color: #1a54a5;
}

.text-v20 {
  color: #534aa0;
}

.text-v21 {
  color: #703f96;
}

.text-v22 {
  color: #81378a;
}

.text-v23 {
  color: #8f2e7c;
}

.text-v24 {
  color: #ad2e6c;
}

.text-b2 {
  color: #ef6c70;
}

.text-b4 {
  color: #fa8155;
}

.text-b6 {
  color: #ffad36;
}

.text-b8 {
  color: #fad831;
}

.text-b10 {
  color: #b7c82b;
}

.text-b12 {
  color: #41b879;
}

.text-b14 {
  color: #00aa9f;
}

.text-b16 {
  color: #0098b9;
}

.text-b18 {
  color: #2981c0;
}

.text-b20 {
  color: #7574bc;
}

.text-b22 {
  color: #a165a8;
}

.text-b24 {
  color: #d0678e;
}

.text-s2 {
  color: #c53f4d;
}

.text-s4 {
  color: #cc572e;
}

.text-s6 {
  color: #e19215;
}

.text-s8 {
  color: #debc03;
}

.text-s10 {
  color: #9cad00;
}

.text-s12 {
  color: #008f56;
}

.text-s14 {
  color: #00827c;
}

.text-s16 {
  color: #006f92;
}

.text-s18 {
  color: #005b9b;
}

.text-s20 {
  color: #534c98;
}

.text-s22 {
  color: #7c3d84;
}

.text-s24 {
  color: #a33c6a;
}

.text-dp2 {
  color: #a61d39;
}

.text-dp4 {
  color: #ab3d1d;
}

.text-dp6 {
  color: #b16c00;
}

.text-dp8 {
  color: #b39300;
}

.text-dp10 {
  color: #748400;
}

.text-dp12 {
  color: #007243;
}

.text-dp14 {
  color: #006664;
}

.text-dp16 {
  color: #005476;
}

.text-dp18 {
  color: #004280;
}

.text-dp20 {
  color: #3e337b;
}

.text-dp22 {
  color: #612469;
}

.text-dp24 {
  color: #861d55;
}

.text-lt-plus-2 {
  color: #f19896;
}

.text-lt-plus-4 {
  color: #ffa787;
}

.text-lt-plus-6 {
  color: #ffbe71;
}

.text-lt-plus-8 {
  color: #f2d96e;
}

.text-lt-plus-10 {
  color: #c7d36d;
}

.text-lt-plus-12 {
  color: #85ce9e;
}

.text-lt-plus-14 {
  color: #62c0b5;
}

.text-lt-plus-16 {
  color: #5bafc4;
}

.text-lt-plus-18 {
  color: #6c9ac5;
}

.text-lt-plus-20 {
  color: #9091c3;
}

.text-lt-plus-22 {
  color: #b088b5;
}

.text-lt-plus-24 {
  color: #d98ea5;
}

.text-lt2 {
  color: #f6aba5;
}

.text-lt4 {
  color: #ffb99e;
}

.text-lt6 {
  color: #ffce90;
}

.text-lt8 {
  color: #fbe68f;
}

.text-lt10 {
  color: #d8df92;
}

.text-lt12 {
  color: #9cd9ac;
}

.text-lt14 {
  color: #7eccc1;
}

.text-lt16 {
  color: #79baca;
}

.text-lt18 {
  color: #83a7c8;
}

.text-lt20 {
  color: #a29fc7;
}

.text-lt22 {
  color: #b89ab8;
}

.text-lt24 {
  color: #daa0b3;
}

.text-sf2 {
  color: #ca8281;
}

.text-sf4 {
  color: #da927a;
}

.text-sf6 {
  color: #dba66b;
}

.text-sf8 {
  color: #d3bd6c;
}

.text-sf10 {
  color: #adb66b;
}

.text-sf12 {
  color: #76b18a;
}

.text-sf14 {
  color: #54a39b;
}

.text-sf16 {
  color: #5192a4;
}

.text-sf18 {
  color: #5d7ea0;
}

.text-sf20 {
  color: #7878a0;
}

.text-sf22 {
  color: #907194;
}

.text-sf24 {
  color: #b4788b;
}

.text-d2 {
  color: #a35a5c;
}

.text-d4 {
  color: #af6954;
}

.text-d6 {
  color: #b37f46;
}

.text-d8 {
  color: #ab9446;
}

.text-d10 {
  color: #858f46;
}

.text-d12 {
  color: #4f8766;
}

.text-d14 {
  color: #2a7b76;
}

.text-d16 {
  color: #246a7d;
}

.text-d18 {
  color: #34597d;
}

.text-d20 {
  color: #54527c;
}

.text-d22 {
  color: #6c4a71;
}

.text-d24 {
  color: #8b4f65;
}

.text-dk2 {
  color: #692934;
}

.text-dk4 {
  color: #75362a;
}

.text-dk6 {
  color: #794d1c;
}

.text-dk8 {
  color: #74601f;
}

.text-dk10 {
  color: #525b20;
}

.text-dk12 {
  color: #23523a;
}

.text-dk14 {
  color: #004746;
}

.text-dk16 {
  color: #004558;
}

.text-dk18 {
  color: #123452;
}

.text-dk20 {
  color: #322d51;
}

.text-dk22 {
  color: #432848;
}

.text-dk24 {
  color: #612d46;
}

.text-p-plus-2 {
  color: #e8c2bf;
}

.text-p-plus-4 {
  color: #ebc2b5;
}

.text-p-plus-6 {
  color: #f4d4b0;
}

.text-p-plus-8 {
  color: #f2e6b8;
}

.text-p-plus-10 {
  color: #d8ddad;
}

.text-p-plus-12 {
  color: #aed4b9;
}

.text-p-plus-14 {
  color: #a6d4cc;
}

.text-p-plus-16 {
  color: #add1da;
}

.text-p-plus-18 {
  color: #afc0d1;
}

.text-p-plus-20 {
  color: #bbbdd0;
}

.text-p-plus-22 {
  color: #c8b9c9;
}

.text-p-plus-24 {
  color: #dec4ca;
}

.text-p2 {
  color: #e7d5d4;
}

.text-p4 {
  color: #e9d5cf;
}

.text-p6 {
  color: #f6e3ce;
}

.text-p8 {
  color: #efe6c6;
}

.text-p10 {
  color: #e6e9c6;
}

.text-p12 {
  color: #c4e0cb;
}

.text-p14 {
  color: #bfe0d9;
}

.text-p16 {
  color: #c6dde2;
}

.text-p18 {
  color: #c2ccd5;
}

.text-p20 {
  color: #c9cad5;
}

.text-p22 {
  color: #d0c8d1;
}

.text-p24 {
  color: #e4d5d9;
}

.text-ltg2 {
  color: #c0abaa;
}

.text-ltg4 {
  color: #c1aba5;
}

.text-ltg6 {
  color: #cebba8;
}

.text-ltg8 {
  color: #c6bea1;
}

.text-ltg10 {
  color: #bdc1a2;
}

.text-ltg12 {
  color: #9db6a5;
}

.text-ltg14 {
  color: #98b6b1;
}

.text-ltg16 {
  color: #9eb4b9;
}

.text-ltg18 {
  color: #9ba5af;
}

.text-ltg20 {
  color: #a2a2af;
}

.text-ltg22 {
  color: #aba0ab;
}

.text-ltg24 {
  color: #bdacb0;
}

.text-g2 {
  color: #745c5c;
}

.text-g4 {
  color: #755c57;
}

.text-g6 {
  color: #806c5c;
}

.text-g8 {
  color: #786f57;
}

.text-g10 {
  color: #6e725a;
}

.text-g12 {
  color: #53665a;
}

.text-g14 {
  color: #4e6764;
}

.text-g16 {
  color: #4f656c;
}

.text-g18 {
  color: #4c5765;
}

.text-g20 {
  color: #565566;
}

.text-g22 {
  color: #605262;
}

.text-g24 {
  color: #725c63;
}

.text-dkg2 {
  color: #3e2d30;
}

.text-dkg4 {
  color: #3f2e2c;
}

.text-dkg6 {
  color: #4a3c32;
}

.text-dkg8 {
  color: #443e30;
}

.text-dkg10 {
  color: #3d4033;
}

.text-dkg12 {
  color: #2a342e;
}

.text-dkg14 {
  color: #273434;
}

.text-dkg16 {
  color: #273439;
}

.text-dkg18 {
  color: #222933;
}

.text-dkg20 {
  color: #292734;
}

.text-dkg22 {
  color: #302531;
}

.text-dkg24 {
  color: #3d2e34;
}

.text-Gy-9.5 {
  color: #f1f1f1;
}

.text-Gy-8.5 {
  color: #d6d6d6;
}

.text-Gy-7.5 {
  color: #bbbbbb;
}

.text-Gy-6.5 {
  color: #a1a1a1;
}

.text-Gy-5.5 {
  color: #878787;
}

.text-Gy-4.5 {
  color: #6d6d6d;
}

.text-Gy-3.5 {
  color: #545454;
}

.text-Gy-2.5 {
  color: #3c3c3c;
}

.text-Gy-1.5 {
  color: #272727;
}



How did I make this css?


I ran the following javascript in a console in a developer tool, on the page at the bottom of this article, and pasted the log output above.


var trs = document.getElementsByTagName('tr');
var css = "";
for(var i=0; i < trs.length; i++) {
  var tds = trs[i].childNodes;
  if (tds[1].innerHTML != 'Munsell') {
    var pccs = tds[0].innerHTML.replace('<sup>+</sup>', '-plus-');
    var hex = tds[3].innerHTML;
    css += ".text-" + pccs + " {\n" +
           "  color: " + hex + ";\n" +
           "}\n\n";
  }
}
console.log(css);


Thank you, http://www.garakuta.net/color/pccs/matrix.html



コメント

人気の投稿