@js-draw/math 1.0.0 → 1.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Henry Heino
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/cjs/Color4.d.ts

@@ -46,6 +46,25 @@ export default class Color4 {
      * ```
      */
     mix(other: Color4, fractionTo: number): Color4;
+    /**
+     * Ignoring this color's alpha component, returns a vector with components,
+     * $$
+     * \begin{pmatrix} \colorbox{#F44}{\tt r} \\ \colorbox{#4F4}{\tt g} \\ \colorbox{#44F}{\tt b} \end{pmatrix}
+     * $$
+     */
+    get rgb(): Vec3;
+    /**
+     * Returns the [relative luminance](https://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef)
+     * of this color in the sRGB color space.
+     *
+     * Ignores the alpha component.
+     */
+    relativeLuminance(): number;
+    /**
+     * Returns the [contrast ratio](https://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef)
+     * between `colorA` and `colorB`.
+     */
+    static contrastRatio(colorA: Color4, colorB: Color4): number;
     /**
      * @returns the component-wise average of `colors`, or `Color4.transparent` if `colors` is empty.
      */
@@ -57,6 +76,27 @@ export default class Color4 {
      * The resultant hue is represented in radians and is thus in $[0, 2\pi]$.
      */
     asHSV(): Vec3;
+    /**
+     * Creates a new `Color4` from a representation [in $HSV$](https://en.wikipedia.org/wiki/HSL_and_HSV#HSV_to_RGB).
+     *
+     * [Algorithm](https://en.wikipedia.org/wiki/HSL_and_HSV#HSV_to_RGB).
+     *
+     * Note that hue must be given **in radians**. While non-standard, this is consistent with
+     * {@link asHSV}.
+     *
+     * `hue` and `value` should range from 0 to 1.
+     *
+     * @param hue $H \in [0, 2\pi]$
+     * @param saturation $S_V \in [0, 1]$
+     * @param value $V \in [0, 1]$
+     */
+    static fromHSV(hue: number, saturation: number, value: number): Color4;
+    /**
+     * Equivalent to `ofRGB(rgb.x, rgb.y, rgb.z)`.
+     *
+     * All components should be in the range `[0, 1]` (0 to 1 inclusive).
+     */
+    static fromRGBVector(rgb: Vec3, alpha?: number): Color4;
     private hexString;
     /**
      * @returns a hexadecimal color string representation of `this`, in the form `#rrggbbaa`.

package/dist/cjs/Color4.js

@@ -144,6 +144,49 @@ class Color4 {
         const fractionOfThis = 1 - fractionTo;
         return new Color4(this.r * fractionOfThis + other.r * fractionTo, this.g * fractionOfThis + other.g * fractionTo, this.b * fractionOfThis + other.b * fractionTo, this.a * fractionOfThis + other.a * fractionTo);
     }
+    /**
+     * Ignoring this color's alpha component, returns a vector with components,
+     * $$
+     * \begin{pmatrix} \colorbox{#F44}{\tt r} \\ \colorbox{#4F4}{\tt g} \\ \colorbox{#44F}{\tt b} \end{pmatrix}
+     * $$
+     */
+    get rgb() {
+        return Vec3_1.default.of(this.r, this.g, this.b);
+    }
+    /**
+     * Returns the [relative luminance](https://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef)
+     * of this color in the sRGB color space.
+     *
+     * Ignores the alpha component.
+     */
+    relativeLuminance() {
+        // References:
+        // - https://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
+        // - https://stackoverflow.com/a/9733420
+        // Normalize the components, as per above
+        const components = [this.r, this.g, this.b].map(component => {
+            if (component < 0.03928) {
+                return component / 12.92;
+            }
+            else {
+                return Math.pow((component + 0.055) / 1.055, 2.4);
+            }
+        });
+        // From w3.org,
+        // > For the sRGB colorspace, the relative luminance of a color is
+        // > defined as L = 0.2126 * R + 0.7152 * G + 0.0722 * B
+        // where R, G, B are defined in components above.
+        return 0.2126 * components[0] + 0.7152 * components[1] + 0.0722 * components[2];
+    }
+    /**
+     * Returns the [contrast ratio](https://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef)
+     * between `colorA` and `colorB`.
+     */
+    static contrastRatio(colorA, colorB) {
+        const L1 = colorA.relativeLuminance();
+        const L2 = colorB.relativeLuminance();
+        return (Math.max(L1, L2) + 0.05) / (Math.min(L1, L2) + 0.05);
+    }
     /**
      * @returns the component-wise average of `colors`, or `Color4.transparent` if `colors` is empty.
      */
@@ -229,6 +272,65 @@ class Color4 {
         const saturation = value > 0 ? chroma / value : 0;
         return Vec3_1.default.of(hue, saturation, value);
     }
+    /**
+     * Creates a new `Color4` from a representation [in $HSV$](https://en.wikipedia.org/wiki/HSL_and_HSV#HSV_to_RGB).
+     *
+     * [Algorithm](https://en.wikipedia.org/wiki/HSL_and_HSV#HSV_to_RGB).
+     *
+     * Note that hue must be given **in radians**. While non-standard, this is consistent with
+     * {@link asHSV}.
+     *
+     * `hue` and `value` should range from 0 to 1.
+     *
+     * @param hue $H \in [0, 2\pi]$
+     * @param saturation $S_V \in [0, 1]$
+     * @param value $V \in [0, 1]$
+     */
+    static fromHSV(hue, saturation, value) {
+        if (hue < 0) {
+            hue += Math.PI * 2;
+        }
+        hue %= Math.PI * 2;
+        // Clamp value and saturation to [0, 1]
+        value = Math.max(0, Math.min(1, value));
+        saturation = Math.max(0, Math.min(1, saturation));
+        // Formula from https://en.wikipedia.org/wiki/HSL_and_HSV#HSV_to_RGB
+        // Saturation can be thought of as scaled chroma. Unapply the scaling.
+        // See https://en.wikipedia.org/wiki/HSL_and_HSV#Saturation
+        const chroma = value * saturation;
+        // Determines which edge of the projected color cube
+        const huePrime = hue / (Math.PI / 3);
+        const secondLargestComponent = chroma * (1 - Math.abs((huePrime % 2) - 1));
+        let rgb;
+        if (huePrime < 1) {
+            rgb = [chroma, secondLargestComponent, 0];
+        }
+        else if (huePrime < 2) {
+            rgb = [secondLargestComponent, chroma, 0];
+        }
+        else if (huePrime < 3) {
+            rgb = [0, chroma, secondLargestComponent];
+        }
+        else if (huePrime < 4) {
+            rgb = [0, secondLargestComponent, chroma];
+        }
+        else if (huePrime < 5) {
+            rgb = [secondLargestComponent, 0, chroma];
+        }
+        else {
+            rgb = [chroma, 0, secondLargestComponent];
+        }
+        const adjustment = value - chroma;
+        return Color4.ofRGB(rgb[0] + adjustment, rgb[1] + adjustment, rgb[2] + adjustment);
+    }
+    /**
+     * Equivalent to `ofRGB(rgb.x, rgb.y, rgb.z)`.
+     *
+     * All components should be in the range `[0, 1]` (0 to 1 inclusive).
+     */
+    static fromRGBVector(rgb, alpha) {
+        return Color4.ofRGBA(rgb.x, rgb.y, rgb.z, alpha ?? 1);
+    }
     /**
      * @returns a hexadecimal color string representation of `this`, in the form `#rrggbbaa`.
      *

package/dist/cjs/Color4.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/Mat33.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/Vec2.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/Vec3.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/polynomial/solveQuadratic.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/rounding.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/shapes/LineSegment2.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/shapes/Path.fromString.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/shapes/Path.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/shapes/Path.toString.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/shapes/QuadraticBezier.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/shapes/Rect2.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/shapes/Triangle.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/mjs/Color4.d.ts

@@ -46,6 +46,25 @@ export default class Color4 {
      * ```
      */
     mix(other: Color4, fractionTo: number): Color4;
+    /**
+     * Ignoring this color's alpha component, returns a vector with components,
+     * $$
+     * \begin{pmatrix} \colorbox{#F44}{\tt r} \\ \colorbox{#4F4}{\tt g} \\ \colorbox{#44F}{\tt b} \end{pmatrix}
+     * $$
+     */
+    get rgb(): Vec3;
+    /**
+     * Returns the [relative luminance](https://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef)
+     * of this color in the sRGB color space.
+     *
+     * Ignores the alpha component.
+     */
+    relativeLuminance(): number;
+    /**
+     * Returns the [contrast ratio](https://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef)
+     * between `colorA` and `colorB`.
+     */
+    static contrastRatio(colorA: Color4, colorB: Color4): number;
     /**
      * @returns the component-wise average of `colors`, or `Color4.transparent` if `colors` is empty.
      */
@@ -57,6 +76,27 @@ export default class Color4 {
      * The resultant hue is represented in radians and is thus in $[0, 2\pi]$.
      */
     asHSV(): Vec3;
+    /**
+     * Creates a new `Color4` from a representation [in $HSV$](https://en.wikipedia.org/wiki/HSL_and_HSV#HSV_to_RGB).
+     *
+     * [Algorithm](https://en.wikipedia.org/wiki/HSL_and_HSV#HSV_to_RGB).
+     *
+     * Note that hue must be given **in radians**. While non-standard, this is consistent with
+     * {@link asHSV}.
+     *
+     * `hue` and `value` should range from 0 to 1.
+     *
+     * @param hue $H \in [0, 2\pi]$
+     * @param saturation $S_V \in [0, 1]$
+     * @param value $V \in [0, 1]$
+     */
+    static fromHSV(hue: number, saturation: number, value: number): Color4;
+    /**
+     * Equivalent to `ofRGB(rgb.x, rgb.y, rgb.z)`.
+     *
+     * All components should be in the range `[0, 1]` (0 to 1 inclusive).
+     */
+    static fromRGBVector(rgb: Vec3, alpha?: number): Color4;
     private hexString;
     /**
      * @returns a hexadecimal color string representation of `this`, in the form `#rrggbbaa`.

package/dist/mjs/Color4.mjs

@@ -138,6 +138,49 @@ class Color4 {
         const fractionOfThis = 1 - fractionTo;
         return new Color4(this.r * fractionOfThis + other.r * fractionTo, this.g * fractionOfThis + other.g * fractionTo, this.b * fractionOfThis + other.b * fractionTo, this.a * fractionOfThis + other.a * fractionTo);
     }
+    /**
+     * Ignoring this color's alpha component, returns a vector with components,
+     * $$
+     * \begin{pmatrix} \colorbox{#F44}{\tt r} \\ \colorbox{#4F4}{\tt g} \\ \colorbox{#44F}{\tt b} \end{pmatrix}
+     * $$
+     */
+    get rgb() {
+        return Vec3.of(this.r, this.g, this.b);
+    }
+    /**
+     * Returns the [relative luminance](https://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef)
+     * of this color in the sRGB color space.
+     *
+     * Ignores the alpha component.
+     */
+    relativeLuminance() {
+        // References:
+        // - https://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
+        // - https://stackoverflow.com/a/9733420
+        // Normalize the components, as per above
+        const components = [this.r, this.g, this.b].map(component => {
+            if (component < 0.03928) {
+                return component / 12.92;
+            }
+            else {
+                return Math.pow((component + 0.055) / 1.055, 2.4);
+            }
+        });
+        // From w3.org,
+        // > For the sRGB colorspace, the relative luminance of a color is
+        // > defined as L = 0.2126 * R + 0.7152 * G + 0.0722 * B
+        // where R, G, B are defined in components above.
+        return 0.2126 * components[0] + 0.7152 * components[1] + 0.0722 * components[2];
+    }
+    /**
+     * Returns the [contrast ratio](https://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef)
+     * between `colorA` and `colorB`.
+     */
+    static contrastRatio(colorA, colorB) {
+        const L1 = colorA.relativeLuminance();
+        const L2 = colorB.relativeLuminance();
+        return (Math.max(L1, L2) + 0.05) / (Math.min(L1, L2) + 0.05);
+    }
     /**
      * @returns the component-wise average of `colors`, or `Color4.transparent` if `colors` is empty.
      */
@@ -223,6 +266,65 @@ class Color4 {
         const saturation = value > 0 ? chroma / value : 0;
         return Vec3.of(hue, saturation, value);
     }
+    /**
+     * Creates a new `Color4` from a representation [in $HSV$](https://en.wikipedia.org/wiki/HSL_and_HSV#HSV_to_RGB).
+     *
+     * [Algorithm](https://en.wikipedia.org/wiki/HSL_and_HSV#HSV_to_RGB).
+     *
+     * Note that hue must be given **in radians**. While non-standard, this is consistent with
+     * {@link asHSV}.
+     *
+     * `hue` and `value` should range from 0 to 1.
+     *
+     * @param hue $H \in [0, 2\pi]$
+     * @param saturation $S_V \in [0, 1]$
+     * @param value $V \in [0, 1]$
+     */
+    static fromHSV(hue, saturation, value) {
+        if (hue < 0) {
+            hue += Math.PI * 2;
+        }
+        hue %= Math.PI * 2;
+        // Clamp value and saturation to [0, 1]
+        value = Math.max(0, Math.min(1, value));
+        saturation = Math.max(0, Math.min(1, saturation));
+        // Formula from https://en.wikipedia.org/wiki/HSL_and_HSV#HSV_to_RGB
+        // Saturation can be thought of as scaled chroma. Unapply the scaling.
+        // See https://en.wikipedia.org/wiki/HSL_and_HSV#Saturation
+        const chroma = value * saturation;
+        // Determines which edge of the projected color cube
+        const huePrime = hue / (Math.PI / 3);
+        const secondLargestComponent = chroma * (1 - Math.abs((huePrime % 2) - 1));
+        let rgb;
+        if (huePrime < 1) {
+            rgb = [chroma, secondLargestComponent, 0];
+        }
+        else if (huePrime < 2) {
+            rgb = [secondLargestComponent, chroma, 0];
+        }
+        else if (huePrime < 3) {
+            rgb = [0, chroma, secondLargestComponent];
+        }
+        else if (huePrime < 4) {
+            rgb = [0, secondLargestComponent, chroma];
+        }
+        else if (huePrime < 5) {
+            rgb = [secondLargestComponent, 0, chroma];
+        }
+        else {
+            rgb = [chroma, 0, secondLargestComponent];
+        }
+        const adjustment = value - chroma;
+        return Color4.ofRGB(rgb[0] + adjustment, rgb[1] + adjustment, rgb[2] + adjustment);
+    }
+    /**
+     * Equivalent to `ofRGB(rgb.x, rgb.y, rgb.z)`.
+     *
+     * All components should be in the range `[0, 1]` (0 to 1 inclusive).
+     */
+    static fromRGBVector(rgb, alpha) {
+        return Color4.ofRGBA(rgb.x, rgb.y, rgb.z, alpha ?? 1);
+    }
     /**
      * @returns a hexadecimal color string representation of `this`, in the form `#rrggbbaa`.
      *

package/dist/mjs/Color4.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/mjs/Mat33.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/mjs/Vec2.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/mjs/Vec3.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/mjs/polynomial/solveQuadratic.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/mjs/rounding.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/mjs/shapes/LineSegment2.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/mjs/shapes/Path.fromString.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/mjs/shapes/Path.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/mjs/shapes/Path.toString.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/mjs/shapes/QuadraticBezier.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/mjs/shapes/Rect2.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/mjs/shapes/Triangle.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist-test/test_imports/package-lock.json

@@ -0,0 +1,13 @@
+{
+	"name": "js-draw-math-test-imports",
+	"version": "0.0.1",
+	"lockfileVersion": 3,
+	"requires": true,
+	"packages": {
+		"": {
+			"name": "js-draw-math-test-imports",
+			"version": "0.0.1",
+			"license": "MIT"
+		}
+	}
+}

package/dist-test/test_imports/package.json

@@ -0,0 +1,12 @@
+{
+	"name": "js-draw-math-test-imports",
+	"version": "0.0.1",
+	"description": "Test module and CommonJS imports",
+	"author": "Henry Heino",
+	"license": "MIT",
+	"private": true,
+	"type": "module",
+	"scripts": {
+		"test": "node test-imports.js && node test-require.cjs"
+	}
+}

package/dist-test/test_imports/test-imports.js

@@ -0,0 +1,15 @@
+console.log('Testing imports...');
+
+import { Vec2, Color4, Mat33 } from '@js-draw/math';
+
+if (Vec2.of(1, 1).x !== 1) {
+	throw new Error('Failed to import module Vec2');
+}
+
+if (!Mat33.identity) {
+	throw new Error('Failed to import Mat33 via CommonJS');
+}
+
+if (!Color4.red) {
+	throw new Error('Failed to import Color4 from js-draw');
+}

package/dist-test/test_imports/test-require.cjs

@@ -0,0 +1,15 @@
+console.log('Testing require()...');
+
+const { Vec2, Color4, Mat33 } = require('@js-draw/math');
+
+if (Vec2.of(1, 1).x !== 1) {
+	throw new Error('Failed to import module Vec2');
+}
+
+if (!Mat33.identity) {
+	throw new Error('Failed to import Mat33 via CommonJS');
+}
+
+if (!Color4.red) {
+	throw new Error('Failed to import Color4 from js-draw');
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@js-draw/math",
-	"version": "1.0.0",
+	"version": "1.2.0",
 	"description": "A math library for js-draw. ",
 	"types": "./dist/mjs/lib.d.ts",
 	"main": "./dist/cjs/lib.js",
@@ -28,7 +28,7 @@
 		"bezier-js": "6.1.3"
 	},
 	"devDependencies": {
-		"@js-draw/build-tool": "^1.0.0",
+		"@js-draw/build-tool": "^1.0.2",
 		"@types/bezier-js": "4.1.0",
 		"@types/jest": "29.5.3",
 		"@types/jsdom": "21.1.1"
@@ -44,5 +44,6 @@
 		"freehand",
 		"svg",
 		"math"
-	]
+	],
+	"gitHead": "3e77c7d833ecdc13bcb57e905280ba547629680a"
 }

package/src/Color4.test.ts

@@ -0,0 +1,94 @@
+import Color4 from './Color4';
+import Vec3 from './Vec3';
+
+describe('Color4', () => {
+	it('should convert to #RRGGBB-format hex strings (when no alpha)', () => {
+		expect(Color4.black.toHexString()).toBe('#000000');
+		expect(Color4.fromHex('#f0f').toHexString()).toBe('#f000f0');
+	});
+
+	it('should create #RRGGBBAA-format hex strings when there is an alpha component', () => {
+		expect(Color4.ofRGBA(1, 1, 1, 0.5).toHexString()).toBe('#ffffff80');
+	});
+
+	it('should parse rgb and rgba-format strings', () => {
+		expect(Color4.fromString('rgb(0, 0, 0)')).objEq(Color4.black);
+		expect(Color4.fromString('rgb ( 255, 0,\t 0)')).objEq(Color4.ofRGBA(1, 0, 0, 1));
+		expect(Color4.fromString('rgba ( 255, 0,\t 0, 0.5)')).objEq(Color4.ofRGBA(1, 0, 0, 0.5));
+		expect(Color4.fromString('rgba( 0, 0, 128, 0)')).objEq(Color4.ofRGBA(0, 0, 128/255, 0));
+	});
+
+	it('should parse transparent/none as completely transparent', () => {
+		expect(Color4.fromString('none')).toBe(Color4.transparent);
+		expect(Color4.fromString('transparent')).toBe(Color4.transparent);
+	});
+
+	it('should mix blue and red to get dark purple', () => {
+		expect(Color4.ofRGB(1, 0, 0).mix(Color4.ofRGB(0, 0, 1), 0.5)).objEq(Color4.ofRGB(0.5, 0, 0.5));
+		expect(Color4.ofRGB(1, 0, 0).mix(Color4.ofRGB(0, 0, 1), 0.1)).objEq(Color4.ofRGB(0.9, 0, 0.1));
+	});
+
+	it('should mix red and green to get yellow', () => {
+		expect(Color4.ofRGB(1, 0, 0).mix(Color4.ofRGB(0, 1, 0), 0.3)).objEq(
+			Color4.ofRGB(0.7, 0.3, 0)
+		);
+	});
+
+	it('should mix red with nothing and get red', () => {
+		expect(Color4.average([ Color4.red ])).objEq(Color4.red);
+	});
+
+	it('different colors should be different', () => {
+		expect(Color4.red.eq(Color4.red)).toBe(true);
+		expect(Color4.red.eq(Color4.green)).toBe(false);
+		expect(Color4.fromString('#ff000000').eq(Color4.transparent)).toBe(true);
+	});
+
+	it('should correctly convert to hsv', () => {
+		expect(Color4.red.asHSV()).objEq(Vec3.of(0, 1, 1));
+		expect(Color4.ofRGB(0.5, 0.5, 0.5).asHSV()).objEq(Vec3.of(0, 0, 0.5));
+		expect(Color4.ofRGB(0.5, 0.25, 0.5).asHSV()).objEq(Vec3.of(Math.PI * 5 / 3, 0.5, 0.5), 0.1);
+	});
+
+	it('fromHSV(color.asHSV) should return the original color', () => {
+		const testColors = [
+			Color4.red, Color4.green, Color4.blue,
+			Color4.white, Color4.black,
+		];
+
+		const testWithColor = (color: Color4) => {
+			expect(Color4.fromHSV(...color.asHSV().asArray())).objEq(color);
+		};
+
+		for (const color of testColors) {
+			testWithColor(color);
+		}
+
+		for (let i = 0; i <= 6; i++) {
+			testWithColor(Color4.fromHSV(i * Math.PI / 7, 0.5, 0.5));
+			testWithColor(Color4.fromHSV(i * Math.PI / 6, 0.5, 0.5));
+		}
+	});
+
+	it('.rgb should return a 3-component vector', () => {
+		expect(Color4.red.rgb).objEq(Vec3.of(1, 0, 0));
+		expect(Color4.green.rgb).objEq(Vec3.of(0, 1, 0));
+		expect(Color4.blue.rgb).objEq(Vec3.of(0, 0, 1));
+	});
+
+	it('should return correct contrast ratios', () => {
+		// Expected values from https://webaim.org/resources/contrastchecker/
+		const testCases: [ Color4, Color4, number ][] = [
+			[ Color4.white, Color4.black, 21 ],
+			[ Color4.fromHex('#FF0000'), Color4.black, 5.25 ],
+			[ Color4.fromHex('#FF0000'), Color4.fromHex('#0000FF'), 2.14 ],
+			[ Color4.fromHex('#300000'), Color4.fromHex('#003000'), 1.26 ],
+			[ Color4.fromHex('#300000'), Color4.fromHex('#003000'), 1.26 ],
+			[ Color4.fromHex('#D60000'), Color4.fromHex('#003000'), 2.71 ],
+		];
+
+		for (const [ colorA, colorB, expectedContrast ] of testCases) {
+			expect(Color4.contrastRatio(colorA, colorB)).toBeCloseTo(expectedContrast, 1);
+		}
+	});
+});