colorjs.io
Version:
Color space agnostic color manipulation library
671 lines (652 loc) • 13.7 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Color conversion tests</title>
<link rel="stylesheet" href="https://test.mavo.io/style.css" />
<link rel="stylesheet" href="style.css" />
<script src="https://blissfuljs.com/bliss.shy.js"></script>
<script src="https://test.mavo.io/test.js"></script>
<script src="../color.js" type="module"></script>
<script src="../src/spaces/hwb.js" type="module"></script>
<script src="../src/spaces/rec2100.js" type="module"></script>
<script src="../src/spaces/jzazbz.js" type="module"></script>
<script src="../src/spaces/ictcp.js" type="module"></script>
<script>
function convertTo(spaceId) {
return function() {
let td = document.currentScript.parentNode.previousElementSibling;
print(() => {
let color = new Color(td.textContent);
return color.to(spaceId).coords.join(", ");
});
}
}
let convertToSRGB = convertTo("sRGB");
let convertToHWB = convertTo("hwb");
let convertToHSL = convertTo("hsl");
let convertToLCH = convertTo("lch");
let convertToXYZ = convertTo("xyz");
let convertTo2100PQ = convertTo("rec2100pq");
let convertToJzazbz = convertTo("jzazbz");
let convertToJzCzHz = convertTo("jzczhz");
let convertToICtCp = convertTo("ICtCp");
let convertToRec2020 = convertTo("rec2020");
</script>
</head>
<body>
<h1>Color conversion Tests</h1>
<p>These tests parse different color formats and then print out the coordinates in various color spaces.</p>
<section>
<h1>sRGB to LCH</h1>
<table class="reftest" data-test="fuzzyNumbers4" data-columns="3" data-colors="1">
<tr>
<td>slategray</td>
<td>
<script>convertToLCH();</script>
</td>
<td>52.69726481080971, 11.234142037623341, 253.00052666481292</td>
</tr>
<tr>
<td>white</td>
<td>
<script>convertToLCH();</script>
</td>
<td>100, 0, NaN</td>
</tr>
<tr>
<td>black</td>
<td>
<script>convertToLCH();</script>
</td>
<td>0, 0, NaN</td>
</tr>
</table>
</section>
<section>
<h1>sRGB to (D50) XYZ</h1>
<table class="reftest" data-test="fuzzyNumbers4" data-columns="3" data-colors="1">
<tr>
<td>white</td>
<td>
<script>convertToXYZ();</script>
</td>
<td>0.96422, 1.00000, 0.82521</td>
</tr>
</table>
</section>
<section>
<h1>HWB to sRGB</h1>
<table class="reftest" data-test="fuzzyNumbers6" data-columns="3" data-colors="1">
<tr>
<td>hwb(0 20% 40%)</td>
<td>
<script>convertToSRGB();</script>
</td>
<td><!--#993333--> 0.6, 0.2, 0.2</td>
</tr>
<tr>
<td>hwb(90 30% 5%)</td>
<td>
<script>convertToSRGB();</script>
</td>
<td>0.625, 0.950, 0.300 </td>
</tr>
<tr>
<td>hwb(30 0% 80%)</td>
<td>
<script>convertToSRGB();</script>
</td>
<td>0.2, 0.1, 0</td>
</tr>
<tr>
<!-- angles can be outside [0 to 360) -->
<td>hwb(720 20% 40%)</td>
<td>
<script>convertToSRGB();</script>
</td>
<td><!--#993333--> 0.6, 0.2, 0.2</td>
</tr>
<tr>
<td>hwb(-270 30% 5%)</td>
<td>
<script>convertToSRGB();</script>
</td>
<td>0.625, 0.950, 0.300 </td>
</tr>
<tr>
<!-- white and black normalize to less than 100%, achromatic -->
<td>hwb(0 40% 80%)</td>
<td>
<script>convertToSRGB();</script>
</td>
<td><!--#993333--> 0.3333333, 0.3333333, 0.3333333</td>
</tr>
<tr>
<!-- white and black normalize to less than 100%, achromatic -->
<td>hwb(0 50% 50%)</td>
<td>
<script>convertToSRGB();</script>
</td>
<td><!--#993333--> 0.5, 0.5, 0.5</td>
</tr>
</table>
</section>
<section>
<h1>sRGB to HWB</h1>
<table class="reftest" data-test="fuzzyNumbers6" data-columns="3" data-colors="1">
<tr>
<td>rgb(60% 20% 20%)</td>
<td>
<script>
convertToHWB();
</script>
</td>
<td>0, 20, 40</td>
</tr>
<tr>
<td>black</td>
<td>
<script>
convertToHWB();
</script>
</td>
<td>NaN, 0, 100</td>
</tr>
<tr>
<td>white</td>
<td>
<script>
convertToHWB();
</script>
</td>
<td>NaN, 100, 0</td>
</tr>
</table>
</section>
<section>
<h1>sRGB to HSL</h1>
<table class="reftest" data-test="fuzzyNumbers6" data-columns="3" data-colors="1">
<tr>
<td>black</td>
<td>
<script>
convertToHSL();
</script>
</td>
<td>NaN, 0, 0</td>
</tr>
<tr>
<td>white</td>
<td>
<script>
convertToHSL();
</script>
</td>
<td>NaN, 0, 100</td>
</tr>
</table>
</section>
<!-- 0.000000730 -->
<section>
<h1>rec2100pq to XYZ and back</h1>
<table class="reftest" data-test="fuzzyNumbers4" data-columns="3" data-colors="1">
<tr>
<td>color(rec2100pq 0.34 0.34 0.34)</td>
<td>
<script>
convertToXYZ();
</script>
</td>
<td>NaN, 0, 0</td>
</tr>
<tr>
<td>color(xyz 0.1128525900459332 0.1170429720372096 0.09660550374381076)</td>
<td>
<script>
convertTo2100PQ();
</script>
</td>
<td>0.34, 0.34, 0.34</td>
</tr>
<tr>
<td>white</td>
<td>
<script>
convertTo2100PQ();
</script>
</td>
<td>0.5422, 0.5422, 0.5422</td>
</tr>
<tr>
<td>color(display-p3 1 0 0)</td>
<td>
<script>
convertTo2100PQ();
</script>
</td>
<td></td>
</tr>
<tr>
<td>color(display-p3 0 1 0)</td>
<td>
<script>
convertTo2100PQ();
</script>
</td>
<td></td>
</tr>
<tr>
<td>color(display-p3 0 0 1)</td>
<td>
<script>
convertTo2100PQ();
</script>
</td>
<td></td>
</tr>
<tr>
<td>color(rec2020 1 0 0)</td>
<td>
<script>
convertTo2100PQ();
</script>
</td>
<td>0.5422, 0, 0</td>
</tr>
<tr>
<td>color(rec2020 0 1 0)</td>
<td>
<script>
convertTo2100PQ();
</script>
</td>
<td>0, 0.5422, 0</td>
</tr>
<tr>
<td>color(rec2020 0 0 1)</td>
<td>
<script>
convertTo2100PQ();
</script>
</td>
<td>0, 0, 0.5422</td>
</tr>
</table>
</section>
<section>
<h1>Jzazbz</h1>
<p>Conversions tested against published Matlab code.</p>
<table class="reftest" data-test="fuzzyNumbers4" data-columns="3" data-colors="1">
<tr title="Jzazbz to XYZ">
<td>color(jzazbz 0.5 0 0)</td>
<td>
<script>
convertToXYZ();
</script>
</td>
<td>8.335759078708826, 8.439231888034406, 5.259832522341852</td>
</tr>
<tr title="Jzazbz to XYZ">
<td>color(jzazbz 1 0 0)</td>
<td>
<script>
convertToXYZ();
</script>
</td>
<td>50.29071277126775, 50.917338263221815, 31.73416719597243</td>
</tr>
<tr title="Jzazbz to XYZ">
<td>color(jzazbz 0.1 -0.05 0.05)</td>
<td>
<script>
convertToXYZ();
</script>
</td>
<td>0.1204092, 0.1738844, 0.0451467</td>
</tr>
<tr title="XYZ to Jzazbz">
<td>color(xyz 0 0 0)</td>
<td>
<script>
convertToJzazbz();
</script>
</td>
<td>0.0, 0.0, 0.0</td>
</tr>
<tr title="XYZ of D50 to Jzazbz">
<td>color(xyz 0.96422, 1.00000, 0.82521)</td>
<td>
<script>
convertToJzazbz();
</script>
</td>
<td>0.2230353, -0.0079138, -0.0305407</td>
</tr>
<tr title="XYZ of D65 to Jzazbz">
<td>color(xyz 0.95047, 1.00000, 1.08883)</td>
<td>
<script>
convertToJzazbz();
</script>
</td>
<td>0.225288 -0.016988 -0.062262</td>
</tr>
<tr title="sRGB white (D65) to Jzazbz">
<td>white</td>
<td>
<script>
convertToJzazbz();
</script>
</td>
<td>0.2230353, -0.0079138, -0.0305407</td>
</tr>
<tr title="rec2020 to Jzazbz">
<td>color(rec2020 1 1 1)</td>
<td>
<script>
convertToJzazbz();
</script>
</td>
<td>0.2230353, -0.0079138, -0.0305407</td>
</tr>
<tr title="Jzazbz to sRGB">
<td>color(jzazbz 0.2230353 -0.0079138 -0.0305407)</td>
<td>
<script>
convertToSRGB();
</script>
</td>
<td>1, 1, 1</td>
</tr>
<tr title="sRGB to Jzazbz">
<td>#FFFF80</td>
<td>
<script>
convertToJzazbz();
</script>
</td>
<td>0.210814, -0.023619, 0.071656</td>
</tr>
<tr title="rec2020 to Jzazbz">
<td>color(rec2020 1 0 0)</td>
<td>
<script>
convertToJzazbz();
</script>
</td>
<td>0.15093, 0.16361, 0.13138</td>
</tr>
<tr title="rec2020 to Jzazbz">
<td>color(rec2020 0 1 0)</td>
<td>
<script>
convertToJzazbz();
</script>
</td>
<td>0.15941 -0.21897 0.14726</td>
</tr>
<tr title="rec2020 to Jzazbz">
<td>color(rec2020 0 0 1)</td>
<td>
<script>
convertToJzazbz();
</script>
</td>
<td>0.104274 -0.081669 -0.218051</td>
</tr>
<!-- <tr title="rec2100 18% gray to Jzazbz">
<td>color(rec2100pq 0.34 0.34 0.34)</td>
<td>
<script>
convertToJzazbz();
</script>
</td>
<td>0.34, 0, 0</td>
</tr> -->
</table>
</section>
<section>
<h1>JzCzHz</h1>
<table class="reftest" data-test="fuzzyNumbers4" data-columns="3" data-colors="1">
<tr title="Jzazbz to JzCzHz">
<td>color(jzazbz 0.5 0 0)</td>
<td>
<script>
convertToJzCzHz();
</script>
</td>
<td>0.5, 0, NaN</td>
</tr>
<tr title="Jzazbz to JzCzHz, ε">
<td>color(jzazbz 0.2 0.000004 -0.000003)</td>
<td>
<script>
convertToJzCzHz();
</script>
</td>
<td>0.2, 0.000005, NaN</td>
</tr>
<tr title="Jzazbz to JzCzHz, ε">
<td>color(jzazbz 0.2 0.000005 -0.000005)</td>
<td>
<script>
convertToJzCzHz();
</script>
</td>
<td>0.2, 0.00000707, 315</td>
</tr>
<tr title="Jzazbz to JzCzHz">
<td>color(jzazbz 0.1 -0.05 0.05)</td>
<td>
<script>
convertToJzCzHz();
</script>
</td>
<td>0.1, 0.070710678, 135</td>
</tr>
<tr title="JzCzHz to Jzazbz">
<td>color(jzczhz 0.1 0.070710678 135)</td>
<td>
<script>
convertToJzazbz();
</script>
</td>
<td>0.1, -0.05, 0.05</td>
</tr>
<tr title="Jzazbz to JzCzHz">
<td>color(jzazbz 0.1 0.1 -0.08)</td>
<td>
<script>
convertToJzCzHz();
</script>
</td>
<td>0.1, 0.12806248, 321.34019</td>
</tr>
<tr title="JzCzHz to Jzazbz">
<td>color(jzczhz 0.1, 0.12806248, 321.34019)</td>
<td>
<script>
convertToJzazbz();
</script>
</td>
<td>0.1, 0.1, -0.08</td>
</tr>
</table>
</section>
<section>
<h1>ICtCp</h1>
<table class="reftest" data-test="fuzzyNumbers3" data-columns="3" data-colors="1">
<tr title="XYZ to ICtCp">
<td>color(xyz 0 0 0)</td>
<td>
<script>
convertToICtCp();
</script>
</td>
<td>0.0, 0.0, 0.0</td>
</tr>
<tr title="XYZ of D50 to ICtCp">
<td>color(xyz 0.96422, 1.00000, 0.82521)</td>
<td>
<script>
convertToICtCp();
</script>
</td>
<td>0.5820 0.0344 0.0001</td>
</tr>
<!-- <tr title="XYZ of D65 to ICtCp">
<td>color(xyz 0.95047, 1.00000, 1.08883)</td>
<td>
<script>
convertToICtCp();
</script>
</td>
<td>0.225288 -0.016988 -0.062262</td>
</tr> -->
<tr title="sRGB white (D65) to ICtCp">
<td>white</td>
<td>
<script>
convertToICtCp();
</script>
</td>
<td>0.5820 0.0344 0.0001</td>
</tr>
<tr title="rec2020 white to ICtCp">
<td>color(rec2020 1 1 1)</td>
<td>
<script>
convertToICtCp();
</script>
</td>
<td>0.5820 0.0344 0.0001</td>
</tr>
<tr title="rec2020 red to ICtCp">
<td>color(rec2020 1 0 0)</td>
<td>
<script>
convertToICtCp();
</script>
</td>
<td>0.4413 -0.1164 0.3985</td>
</tr>
<tr title="rec2020 green to ICtCp">
<td>color(rec2020 0 1 0)</td>
<td>
<script>
convertToICtCp();
</script>
</td>
<td>0.5305 -0.4247 -0.1219</td>
</tr>
<tr title="rec2020 blue to ICtCp">
<td>color(rec2020 0 0 1)</td>
<td>
<script>
convertToICtCp();
</script>
</td>
<td>0.3687 0.2746 -0.2406</td>
</tr>
<!-- <tr title="rec2100 18% gray to ICtCp">
<td>color(rec2100pq 0.34 0.34 0.34)</td>
<td>
<script>
convertToICtCp();
</script>
</td>
<td>0.34, 0, 0</td>
</tr> -->
<tr title="ICtCp rec2020 red back to rec2020">
<td>color(ictcp 0.4413 -0.1164 0.3985)</td>
<td>
<script>
convertToRec2020();
</script>
</td>
<td>1 0 0</td>
</tr>
<tr title="ICtCp rec2020 green back to rec2020">
<td>color(ictcp 0.5305 -0.4247 -0.1219)</td>
<td>
<script>
convertToRec2020();
</script>
</td>
<td>0 1 0</td>
</tr>
<tr title="ICtCp rec2020 blue back to rec2020">
<td>color(ictcp 0.3687 0.2746 -0.2406)</td>
<td>
<script>
convertToRec2020();
</script>
</td>
<td>0 0 1</td>
</tr>
</table>
</section>
<section>
<h1>Get coordinates</h1>
<table class="reftest" data-test="fuzzyNumbers">
<tr title="color.chroma">
<td>
<script>
print(() => {
var color = new Color("slategray");
return color.chroma
});
</script>
</td>
<td>11.234142037623341</td>
</tr>
<tr title="color.lch[1]">
<td>
<script>
print(() => {
var color = new Color("slategray");
return color.lch[1];
});
</script>
</td>
<td>11.234142037623341</td>
</tr>
<tr title="color.lch.chroma">
<td>
<script>
print(() => {
var color = new Color("slategray");
return color.lch.chroma;
});
</script>
</td>
<td>11.234142037623341</td>
</tr>
<tr title="color.jzazbz.Jz">
<td>
<script>
print(() => {
var color = new Color("slategray");
return color.jzazbz.Jz
});
</script>
</td>
<td>0.1203</td>
</tr>
<tr title="color.jzazbz.Jz">
<td>
<script>
print(() => {
var color = new Color("color(jzazbz 0.54 0 0)");
return color.jzazbz.Jz
});
</script>
</td>
<td>0.54</td>
</tr>
</table>
</section>
<script src="index.js"></script>
</body>
</html>