colorjs.io
Version:
Color space agnostic color manipulation library
357 lines (346 loc) • 7.9 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chromatic adaptation 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/CATs.js" type="module"></script>
<script>
</script>
</head>
<body>
<h1>Chromatic adaptation tests</h1>
<p>These tests adapt from one whitepoint to another.</p>
<section>
<h1>Bradford D50 ⇔ D65</h1>
<p>These test the linear Bradford adaptations from CATs.js against the built-in
conversion matricies to interconvert between D50 and D65.</p>
<table class="reftest" data-test="fuzzyNumbers">
<tr title="D50 to D65">
<td>
<script>
print(() => {
let M = Color.adapt(Color.whites.D50, Color.whites.D65, "Bradford");
return M;
});
</script>
</td>
<td>
<script>
print(() => {
return [
[ 0.9555766, -0.0230393, 0.0631636],
[-0.0282895, 1.0099416, 0.0210077],
[ 0.0122982, -0.0204830, 1.3299098]
];
});
</script>
</td>
</tr>
<tr title="D65 to D50">
<td>
<script>
print(() => {
let M = Color.adapt(Color.whites.D65, Color.whites.D50, "Bradford");
return M;
});
</script>
</td>
<td>
<script>
print(() => {
return [
[ 1.0478112, 0.0228866, -0.0501270],
[ 0.0295424, 0.9904844, -0.0170491],
[-0.0092345, 0.0150436, 0.7521316]
];
});
</script>
</td>
</tr>
</table>
</section>
<section>
<h1>Bradford Other whitepoints</h1>
<p>These test the linear Bradford adaptations from CATs.js against
the matrices <a href="http://www.brucelindbloom.com/index.html?Eqn_ChromAdapt.html">published by Lindbloom</a>.</p>
<table class="reftest" data-test="fuzzyNumbers">
<tr title="C to D50">
<td>
<script>
print(() => {
let M = Color.adapt(Color.whites.C, Color.whites.D50, "Bradford");
return M;
});
</script>
</td>
<td>
<script>
print(() => {
return [
[ 1.0376976, 0.0153932, -0.0582624],
[ 0.0170675, 1.0056038, -0.0188973],
[-0.0120126, 0.0204361, 0.6906380]
];
});
</script>
</td>
</tr>
<tr title="A to C">
<td>
<script>
print(() => {
let M = Color.adapt(Color.whites.A, Color.whites.C, "Bradford");
return M;
});
</script>
</td>
<td>
<script>
print(() => {
return [
[ 0.8530161, -0.1130268, 0.4404346],
[-0.1238786, 1.0853435, 0.1425803],
[ 0.0911907, -0.1553658, 3.4776250]
];
});
</script>
</td>
</tr>
<tr title="F2 to D50">
<td>
<script>
print(() => {
let M = Color.adapt(Color.whites.F2, Color.whites.D50, "Bradford");
return M;
});
</script>
</td>
<td>
<script>
print(() => {
return [
[ 0.9628262, -0.0215790, 0.0457172],
[-0.0280310, 1.0172847, 0.0156071],
[ 0.0083415, -0.0135344, 1.2322804]
];
});
</script>
</td>
</tr>
</table>
</section>
<section>
<h1>von Kries Other whitepoints</h1>
<p>These test the von Kries adaptations from CATs.js against
the matrices <a href="http://www.brucelindbloom.com/index.html?Eqn_ChromAdapt.html">published by Lindbloom</a>.</p>
<table class="reftest" data-test="fuzzyNumbers">
<tr title="C to D50">
<td>
<script>
print(() => {
let M = Color.adapt(Color.whites.C, Color.whites.D50, "von Kries");
return M;
});
</script>
</td>
<td>
<script>
print(() => {
return [
[ 1.0132609, 0.0457455, -0.0636638],
[ 0.0050248, 0.9962695, -0.0010128],
[ 0.0000000, 0.0000000, 0.6979583]
];
});
</script>
</td>
</tr>
<tr title="A to C">
<td>
<script>
print(() => {
let M = Color.adapt(Color.whites.A, Color.whites.C, "von Kries");
return M;
});
</script>
</td>
<td>
<script>
print(() => {
return [
[ 0.9418277, -0.2249131, 0.4806950],
[-0.0247051, 1.0253682, 0.0049749],
[ 0.0000000, 0.0000000, 3.3225235]
];
});
</script>
</td>
</tr>
<tr title="F2 to D50">
<td>
<script>
print(() => {
let M = Color.adapt(Color.whites.F2, Color.whites.D50, "von Kries");
return M;
});
</script>
</td>
<td>
<script>
print(() => {
return [
[ 0.9869554, -0.0470220, 0.0479582],
[-0.0051650, 1.0044210, 0.0010416],
[ 0.0000000, 0.0000000, 1.2244744]
];
});
</script>
</td>
</tr>
</table>
</section>
<section>
<h1>CAT02 and CAT16, D50 ⇔ D65</h1>
<p>These test the fully adapted CAT02 and CAT16 adaptations from CATs.js, interconverting between D50 and D65.</p>
<table class="reftest" data-test="fuzzyNumbers">
<tr title="CAT02 D50 to D65">
<td>
<script>
print(() => {
let M = Color.adapt(Color.whites.D50, Color.whites.D65, "CAT02");
return M;
});
</script>
</td>
<td>
<script>
print(() => {
return [
[ 0.9599435, -0.0292880, 0.0656334],
[-0.0211745, 0.9988615, 0.0261212],
[ 0.0013700, 0.0044344, 1.3124836]
];
});
</script>
</td>
</tr>
<tr title="CAT02 D65 to D50">
<td>
<script>
print(() => {
let M = Color.adapt(Color.whites.D65, Color.whites.D50, "CAT02");
return M;
});
</script>
</td>
<td>
<script>
print(() => {
return [
[ 1.0424827, 0.0308012, -0.0527444],
[ 0.0221295, 1.0018823, -0.0210462],
[-0.0011630, -0.0034170, 0.7620404]
];
});
</script>
</td>
</tr>
<tr title="CAT16 D50 to D65">
<td>
<script>
print(() => {
let M = Color.adapt(Color.whites.D50, Color.whites.D65, "CAT16");
return M;
});
</script>
</td>
<td>
<script>
print(() => {
return [
[ 0.9894962, -0.0399233, 0.0439904],
[-0.0053910, 1.0066456, -0.0017541],
[-0.0004037, 0.0150564, 1.3016843]
];
});
</script>
</td>
</tr>
<tr title="CAT16 D65 to D50">
<td>
<script>
print(() => {
let M = Color.adapt(Color.whites.D65, Color.whites.D50, "CAT16");
return M;
});
</script>
</td>
<td>
<script>
print(() => {
return [
[ 1.0108226, 0.0405991, -0.0341060],
[ 0.0054139, 0.99359563, 0.0011560],
[ 0.0002508, -0.01148016, 0.7682115]
];
});
</script>
</td>
</tr>
<!-- <tr title="Hunt & Pointer worked example">
<td>
<script>
print(() => {
let M = Color.adapt([98.88, 90.00, 32.03], [100, 100, 100] "CAT02");
return M;
});
</script>
</td>
<td>
<script>
print(() => {
return [
[ 1.0478112, 0.0228866, -0.0501270],
[ 0.0295424, 0.9904844, -0.0170491],
[-0.0092345, 0.0150436, 0.7521316]
];
});
</script>
</td>
</tr> -->
</table>
</section>
<section>
<h1>CAT16, C to D50</h1>
<p>This tests the fully adapted CAT16 adaptation from CATs.js, Illuminant C to D50.</p>
<table class="reftest" data-test="fuzzyNumbers">
<tr title="CAT02 D50 to D65">
<td>
<script>
print(() => {
let M = Color.adapt(Color.whites.C, Color.whites.D50, "CAT16");
return M;
});
</script>
</td>
<td>
<script>
print(() => {
return [
[ 1.0059635, 0.0270676, -0.0418130],
[ 0.0037323, 0.9940963, 0.0018973],
[ 0.0004538, -0.0145289, 0.7098704]
];
});
</script>
</td>
</tr>
</table>
</section>
</body>
</html>