Fixes RGB to/from YIQ conversion to use gamma-corrected RGB instead o…

…f linear, fixes #185 Updated docs in regards to sRGB/YIQ conversion
Evercoder · Jan 24, 2023 · 6b8ba09 · 6b8ba09
1 parent daa1213
commit 6b8ba09
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 22 deletions.
diff --git a/docs/color-spaces.md b/docs/color-spaces.md
@@ -340,6 +340,10 @@ Serialized as `color(--jzczhz j c h)`, with the `none` keyword for any missing c
 
 Serialized as `color(--yiq y i q)`, with the `none` keyword for any missing color channel. An explicit `alpha < 1` is included as ` / alpha`.
 
+The conversion matrices between the sRGB and YIQ color spaces are taken from:
+
+> Yuriy Kotsarenko, Fernando Ramos, [_Measuring perceived color difference using YIQ NTSC transmission color space in mobile applications_](http://www.progmat.uaem.mx:8080/artVol2Num2/Articulo3Vol2Num2.pdf), Programación Matemática y Software (2010), Vol. 2, No 2.
+
 ### CIE XYZ
 
 The [CIE XYZ color space](https://en.wikipedia.org/wiki/CIE_1931_color_space), also known as the CIE 1931 color space.

diff --git a/src/yiq/convertRgbToYiq.js b/src/yiq/convertRgbToYiq.js
@@ -1,8 +1,5 @@
-import convertRgbToLrgb from '../lrgb/convertRgbToLrgb.js';
-
-const convertRgbToYiq = rgb => {
-	let { r, g, b, alpha } = convertRgbToLrgb(rgb);
-	let res = {
+const convertRgbToYiq = ({ r, g, b, alpha }) => {
+	const res = {
 		mode: 'yiq',
 		y: 0.29889531 * r + 0.58662247 * g + 0.11448223 * b,
 		i: 0.59597799 * r - 0.2741761 * g - 0.32180189 * b,

diff --git a/src/yiq/convertYiqToRgb.js b/src/yiq/convertYiqToRgb.js
@@ -1,11 +1,12 @@
-import convertLrgbToRgb from '../lrgb/convertLrgbToRgb.js';
-
-const convertYiqToRgb = ({ y, i, q, alpha }) =>
-	convertLrgbToRgb({
+const convertYiqToRgb = ({ y, i, q, alpha }) => {
+	const res = {
+		mode: 'rgb',
 		r: y + 0.95608445 * i + 0.6208885 * q,
 		g: y - 0.27137664 * i - 0.6486059 * q,
-		b: y - 1.10561724 * i + 1.70250126 * q,
-		alpha
-	});
+		b: y - 1.10561724 * i + 1.70250126 * q
+	};
+	if (alpha !== undefined) res.alpha = alpha;
+	return res;
+};
 
 export default convertYiqToRgb;
diff --git a/test/yiq.test.js b/test/yiq.test.js
@@ -1,22 +1,29 @@
 import tape from 'tape';
 import { yiq, formatRgb, formatCss } from '../src/index.js';
 
-tape('rgb to yiq and back', function (test) {
-	test.deepEqual(
+tape('rgb -> yiq', t => {
+	t.deepEqual(yiq('purple'), {
+		mode: 'yiq',
+		y: 0.20749931419607845,
+		i: 0.13762565019607842,
+		q: 0.26233329443137254
+	});
+	t.end();
+});
+
+tape('rgb -> yiq -> rgb', t => {
+	t.deepEqual(
 		formatRgb(yiq('rgb(255, 255, 255)')),
 		'rgb(255, 255, 255)',
 		'white'
 	);
 
-	test.deepEqual(formatRgb(yiq('rgb(0, 0, 0)')), 'rgb(0, 0, 0)', 'black');
+	t.deepEqual(formatRgb(yiq('rgb(0, 0, 0)')), 'rgb(0, 0, 0)', 'black');
+	t.deepEqual(formatRgb(yiq('rgb(100, 0, 0)')), 'rgb(100, 0, 0)', 'red');
+	t.deepEqual(formatRgb(yiq('rgb(0, 120, 0)')), 'rgb(0, 120, 0)', 'blue');
+	t.deepEqual(formatRgb(yiq('rgb(0, 0, 89)')), 'rgb(0, 0, 89)', 'green');
 
-	test.deepEqual(formatRgb(yiq('rgb(100, 0, 0)')), 'rgb(100, 0, 0)', 'red');
-
-	test.deepEqual(formatRgb(yiq('rgb(0, 120, 0)')), 'rgb(0, 120, 0)', 'blue');
-
-	test.deepEqual(formatRgb(yiq('rgb(0, 0, 89)')), 'rgb(0, 0, 89)', 'green');
-
-	test.end();
+	t.end();
 });
 
 tape('color(--yiq)', t => {