From d04f0f1fd4de8f1034d55d9b02d4b94f428d89ba Mon Sep 17 00:00:00 2001 From: Lukas Leisten Date: Sun, 22 Sep 2024 14:01:12 +0200 Subject: [PATCH 1/4] feat: Added Hue XY Conversions --- packages/color-convert/src/index.ts | 68 +++++++++++++++++++++++++++++ test/convert.test.tsx | 38 +++++++++++++++- 2 files changed, 104 insertions(+), 2 deletions(-) diff --git a/packages/color-convert/src/index.ts b/packages/color-convert/src/index.ts index 5637ae74f..4493ab2f6 100644 --- a/packages/color-convert/src/index.ts +++ b/packages/color-convert/src/index.ts @@ -33,6 +33,12 @@ export interface RgbaColor extends RgbColor { a: number; } +export interface XYColor { + x: number; + y: number; + bri?: number; +} + /** * ```js * rgbaToHsva({ r: 255, g: 255, b: 255, a: 1 }) //=> { h: 0, s: 0, v: 100, a: 1 } @@ -273,6 +279,68 @@ export const hslaToHsl = ({ h, s, l }: HslaColor): HslColor => ({ h, s, l }); export const hsvaToHex = (hsva: HsvaColor): string => rgbaToHex(hsvaToRgba(hsva)); export const hsvaToHexa = (hsva: HsvaColor): string => rgbaToHexa(hsvaToRgba(hsva)); export const hsvaToHsv = ({ h, s, v }: HsvaColor): HsvColor => ({ h, s, v }); +export const hexToXY = (hex: string): XYColor => rgbToXY(rgbaToRgb(hexToRgba(hex))); +export const xyToHex = (xy: XYColor): string => + rgbaToHex({ + ...xyToRgb(xy), + a: 255, + }); + +/** + * Converts RGB to XY. Based on formula from https://developers.meethue.com/develop/application-design-guidance/color-conversion-formulas-rgb-to-xy-and-back/ + * @param color RGB color as an array [0-255, 0-255, 0-255] + */ +export const rgbToXY = ({ r, g, b }: RgbColor): XYColor => { + let red = r / 255; + let green = g / 255; + let blue = b / 255; + + red = red > 0.04045 ? Math.pow((red + 0.055) / 1.055, 2.4) : red / 12.92; + green = green > 0.04045 ? Math.pow((green + 0.055) / 1.055, 2.4) : green / 12.92; + blue = blue > 0.04045 ? Math.pow((blue + 0.055) / 1.055, 2.4) : blue / 12.92; + + const X = red * 0.4124 + green * 0.3576 + blue * 0.1805; + const Y = red * 0.2126 + green * 0.7152 + blue * 0.0722; + const Z = red * 0.0193 + green * 0.1192 + blue * 0.9505; + + let x = X / (X + Y + Z); + let y = Y / (X + Y + Z); + + if (isNaN(x)) x = 0; + if (isNaN(y)) y = 0; + + return { + x, + y, + bri: Y, + }; +}; + +/** + * Converts XY to RGB. Based on formula from https://developers.meethue.com/develop/application-design-guidance/color-conversion-formulas-rgb-to-xy-and-back/ + * @param color XY color and brightness as an array [0-1, 0-1, 0-1] + */ +export const xyToRgb = ({ x, y, bri = 1 }: XYColor): RgbColor => { + const z = 1.0 - x - y; + + const Y = bri; + const X = (Y / y) * x; + const Z = (Y / y) * z; + + let r = X * 1.656492 - Y * 0.354851 - Z * 0.255038; + let g = -X * 0.707196 + Y * 1.655397 + Z * 0.036152; + let b = X * 0.051713 - Y * 0.121364 + Z * 1.01153; + + r = r <= 0.0031308 ? 12.92 * r : (1.0 + 0.055) * Math.pow(r, 1.0 / 2.4) - 0.055; + g = g <= 0.0031308 ? 12.92 * g : (1.0 + 0.055) * Math.pow(g, 1.0 / 2.4) - 0.055; + b = b <= 0.0031308 ? 12.92 * b : (1.0 + 0.055) * Math.pow(b, 1.0 / 2.4) - 0.055; + + return { + r: Math.round(r * 255), + g: Math.round(g * 255), + b: Math.round(b * 255), + }; +}; export const color = (str: string | HsvaColor): ColorResult => { let rgb!: RgbColor; diff --git a/test/convert.test.tsx b/test/convert.test.tsx index ebdf727cd..a8899b6c3 100644 --- a/test/convert.test.tsx +++ b/test/convert.test.tsx @@ -1,6 +1,6 @@ import { color, getContrastingColor } from '../packages/color-convert/src'; // HEX -import { hexToHsva, hexToRgba, hsvaToHex, hsvaToHexa } from '../packages/color-convert/src'; +import { hexToHsva, hexToRgba, hsvaToHex, hsvaToHexa, hexToXY } from '../packages/color-convert/src'; import { equalHex } from '../packages/color-convert/src'; // HSLA import { hsvaToHsla, hslaToHsva, HsvaColor, HslaColor } from '../packages/color-convert/src'; @@ -15,7 +15,7 @@ import { hsvaToRgba, rgbaToHsva, RgbaColor } from '../packages/color-convert/src // RGBA string import { hsvaToRgbaString, rgbaStringToHsva } from '../packages/color-convert/src'; // RGB -import { rgbaToRgb, rgbaToHex, rgbaToHexa } from '../packages/color-convert/src'; +import { rgbaToRgb, rgbaToHex, rgbaToHexa, rgbToXY } from '../packages/color-convert/src'; // RGB string import { hsvaToRgbString, rgbStringToHsva } from '../packages/color-convert/src'; // HSVA String @@ -25,6 +25,8 @@ import { hsvaToHsv } from '../packages/color-convert/src'; // HSV string import { hsvaToHsvString, hsvStringToHsva } from '../packages/color-convert/src'; import { equalColorString, equalColorObjects, validHex } from '../packages/color-convert/src'; +// XY +import { xyToHex, xyToRgb } from '../packages/color-convert/src'; it('Converts color => getContrastingColor', () => { expect(getContrastingColor('#d0021b')).toEqual('#ffffff'); @@ -95,6 +97,16 @@ it('Converts RGBA to HEXA', () => { expect(rgbaToHexa({ b: 26, g: 2, r: 209 } as any)).toEqual('#d1021a'); }); +it('Converts RGB to XY', () => { + expect(rgbToXY({ r: 255, g: 255, b: 255 })).toMatchObject({ x: 0.3127159072215825, y: 0.3290014805066623, bri: 1 }); + expect(rgbToXY({ r: 0, g: 0, b: 0 })).toMatchObject({ x: 0.0, y: 0.0, bri: 0 }); + expect(rgbToXY({ r: 71, g: 128, b: 241 })).toMatchObject({ + x: 0.19313993893216994, + y: 0.17053314882681408, + bri: 0.23128809648982562, + }); +}); + it('Converts HEX to RGBA', () => { expect(hsvaToHslString(hexToHsva('#d0021b'))).toEqual('hsl(352.71844660194176, 98%, 41%)'); expect(hsvaToHex(rgbaToHsva(hexToRgba('#d0021b')))).toEqual('#d0021b'); @@ -115,6 +127,12 @@ it('Converts HEX to HSVA', () => { expect(hexToHsva('#c62182')).toMatchObject({ h: 324.72727272727275, s: 83.33333333333334, v: 77.64705882352942, a: 1 }); }); +it('Converts HEX to XY', () => { + expect(hexToXY('#ffffff')).toMatchObject({ x: 0.3127159072215825, y: 0.3290014805066623, bri: 1 }); + expect(hexToXY('#000000')).toMatchObject({ x: 0.0, y: 0.0, bri: 0 }); + expect(hexToXY('#4780f1')).toMatchObject({ x: 0.19313993893216994, y: 0.17053314882681408, bri: 0.23128809648982562 }); +}); + it('Converts shorthand HEX to HSVA', () => { expect(hexToHsva('#FFF')).toMatchObject({ h: 0, s: 0, v: 100, a: 1 }); expect(hexToHsva('#FF0')).toMatchObject({ h: 60, s: 100, v: 100, a: 1 }); @@ -409,3 +427,19 @@ it('Validates HEX colors', () => { // @ts-ignore expect(validHex()).toBe(false); }); + +it('Converts XY to RGB', () => { + expect(xyToRgb({ x: 0.3127159072215825, y: 0.3290014805066623, bri: 1 })).toMatchObject({ r: 255, g: 255, b: 255 }); + expect(xyToRgb({ x: 0.0, y: 0.0, bri: 0 })).toMatchObject({ r: 0, g: 0, b: 0 }); + expect(xyToRgb({ x: 0.19313993893216994, y: 0.17053314882681408, bri: 0.23128809648982562 })).toMatchObject({ + r: 71, + g: 128, + b: 241, + }); +}); + +it('Converts XY to HEX', () => { + expect(xyToHex({ x: 0.3127159072215825, y: 0.3290014805066623, bri: 1 })).toBe('#ffffff'); + expect(xyToHex({ x: 0.0, y: 0.0, bri: 0 })).toBe('#000000'); + expect(xyToHex({ x: 0.19313993893216994, y: 0.17053314882681408, bri: 0.23128809648982562 })).toBe('#4780f1'); +}); From d4675973db52cc91dbe05d458a86c484d40abf5e Mon Sep 17 00:00:00 2001 From: Lukas Leisten Date: Sun, 22 Sep 2024 14:21:02 +0200 Subject: [PATCH 2/4] feat: Added Docs --- packages/color-convert/README.md | 77 +++++++++++++++++++++----------- 1 file changed, 52 insertions(+), 25 deletions(-) diff --git a/packages/color-convert/README.md b/packages/color-convert/README.md index 8fe11d8bc..a40ecb92f 100644 --- a/packages/color-convert/README.md +++ b/packages/color-convert/README.md @@ -202,6 +202,32 @@ validHex("#8c0dba") //=> true rgbaToHexa({ b: 26, g: 2, r: 209, a: 1 }) // => '#d1021aff' ``` +### `hexToXY` + +```js +hexToXY('#4780f1') +``` + +### `xyToHex` + +```js +xyToHex({ x: 0.193, y: 0.17, bri: 1 }) +xyToHex({ x: 0.193, y: 0.17, bri: 0.231 }) +``` + +### `rgbToXY` + +```js +rgbToXY({ r: 71, g: 128, b: 241 }) +``` + +### `xyToRgb` + +```js +xyToRgb({ x: 0.193, y: 0.17, bri: 1 }) +xyToRgb({ x: 0.193 y: 0.17, bri: 0.23 }) +``` + #### `color` ```js @@ -221,37 +247,32 @@ const { rgb, rgba, hsl, hsv, hsla, hsva } = color('#d1021a'); ## type ```ts -export declare const equalColorObjects: (first: ObjectColor, second: ObjectColor) => boolean; -export declare const equalColorString: (first: string, second: string) => boolean; -export declare const equalHex: (first: string, second: string) => boolean; -export declare const validHex: (hex: string) => boolean; -export declare const getContrastingColor: (str: string | HsvaColor) => "#ffffff" | "#000000"; export type ObjectColor = RgbColor | HslColor | HsvColor | RgbaColor | HslaColor | HsvaColor; export type ColorResult = { - rgb: RgbColor; - hsl: HslColor; - hsv: HsvColor; - rgba: RgbaColor; - hsla: HslaColor; - hsva: HsvaColor; - hex: string; - hexa: string; + rgb: RgbColor; + hsl: HslColor; + hsv: HsvColor; + rgba: RgbaColor; + hsla: HslaColor; + hsva: HsvaColor; + hex: string; + hexa: string; }; export interface HsvColor { - h: number; - s: number; - v: number; + h: number; + s: number; + v: number; } export interface HsvaColor extends HsvColor { - a: number; + a: number; } export interface RgbColor { - r: number; - g: number; - b: number; + r: number; + g: number; + b: number; } export interface RgbaColor extends RgbColor { - a: number; + a: number; } /** * ```js @@ -268,12 +289,12 @@ export declare const hslaStringToHsva: (hslString: string) => HsvaColor; export declare const hslStringToHsva: (hslString: string) => HsvaColor; export declare const hslaToHsva: ({ h, s, l, a }: HslaColor) => HsvaColor; export interface HslColor { - h: number; - s: number; - l: number; + h: number; + s: number; + l: number; } export interface HslaColor extends HslColor { - a: number; + a: number; } export declare const hsvaToHsla: ({ h, s, v, a }: HsvaColor) => HslaColor; export declare const hsvaStringToHsva: (hsvString: string) => HsvaColor; @@ -284,6 +305,7 @@ export declare const rgbStringToHsva: (rgbaString: string) => HsvaColor; /** Converts an RGBA color plus alpha transparency to hex */ export declare const rgbaToHex: ({ r, g, b }: RgbaColor) => string; export declare const rgbaToHexa: ({ r, g, b, a }: RgbaColor) => string; +export type HexColor = `#${string}`; export declare const hexToHsva: (hex: string) => HsvaColor; export declare const hexToRgba: (hex: string) => RgbaColor; /** @@ -299,6 +321,11 @@ export declare const hsvaToHex: (hsva: HsvaColor) => string; export declare const hsvaToHexa: (hsva: HsvaColor) => string; export declare const hsvaToHsv: ({ h, s, v }: HsvaColor) => HsvColor; export declare const color: (str: string | HsvaColor) => ColorResult; +export declare const getContrastingColor: (str: string | HsvaColor) => "#ffffff" | "#000000"; +export declare const equalColorObjects: (first: ObjectColor, second: ObjectColor) => boolean; +export declare const equalColorString: (first: string, second: string) => boolean; +export declare const equalHex: (first: string, second: string) => boolean; +export declare const validHex: (hex: string) => hex is HexColor; ``` ## Contributors From 26985d0da061044895fa8038f269a9453f1fe7ad Mon Sep 17 00:00:00 2001 From: Lukas Leisten Date: Sun, 22 Sep 2024 18:13:45 +0200 Subject: [PATCH 3/4] fix: Changed sRGB Logic --- packages/color-convert/README.md | 10 ++-- packages/color-convert/src/index.ts | 72 ++++++++++++----------------- test/convert.test.tsx | 23 ++++----- 3 files changed, 46 insertions(+), 59 deletions(-) diff --git a/packages/color-convert/README.md b/packages/color-convert/README.md index a40ecb92f..84cbb8550 100644 --- a/packages/color-convert/README.md +++ b/packages/color-convert/README.md @@ -205,27 +205,25 @@ rgbaToHexa({ b: 26, g: 2, r: 209, a: 1 }) // => '#d1021aff' ### `hexToXY` ```js -hexToXY('#4780f1') +hexToXY('#4780f1') // => { x: 0.261, y: 0.231, bri: 0.863 } ``` ### `xyToHex` ```js -xyToHex({ x: 0.193, y: 0.17, bri: 1 }) -xyToHex({ x: 0.193, y: 0.17, bri: 0.231 }) +xyToHex({ x: 0.261, y: 0.231, bri: 0.863 }) // => #4780f1 ``` ### `rgbToXY` ```js -rgbToXY({ r: 71, g: 128, b: 241 }) +rgbToXY({ r: 71, g: 128, b: 241 }) // => { x: 0.261, y: 0.231, bri: 0.863 } ``` ### `xyToRgb` ```js -xyToRgb({ x: 0.193, y: 0.17, bri: 1 }) -xyToRgb({ x: 0.193 y: 0.17, bri: 0.23 }) +xyToRgb({ x: 0.261, y: 0.231, bri: 0.863 }) // => { r: 71, g: 128, b: 241 } ``` #### `color` diff --git a/packages/color-convert/src/index.ts b/packages/color-convert/src/index.ts index 4493ab2f6..1c505d366 100644 --- a/packages/color-convert/src/index.ts +++ b/packages/color-convert/src/index.ts @@ -10,6 +10,7 @@ export type ColorResult = { rgba: RgbaColor; hsla: HslaColor; hsva: HsvaColor; + xy: XYColor; hex: string; hexa: string; }; @@ -287,59 +288,44 @@ export const xyToHex = (xy: XYColor): string => }); /** - * Converts RGB to XY. Based on formula from https://developers.meethue.com/develop/application-design-guidance/color-conversion-formulas-rgb-to-xy-and-back/ - * @param color RGB color as an array [0-255, 0-255, 0-255] + * Converts XY to RGB. Based on formula from https://developers.meethue.com/develop/application-design-guidance/color-conversion-formulas-rgb-to-xy-and-back/ + * @param color XY color and brightness as an array [0-1, 0-1, 0-1] */ -export const rgbToXY = ({ r, g, b }: RgbColor): XYColor => { - let red = r / 255; - let green = g / 255; - let blue = b / 255; +export const xyToRgb = ({ x, y, bri = 255 }: XYColor): RgbColor => { + const red = x * 3.2406255 + y * -1.537208 + bri * -0.4986286; + const green = x * -0.9689307 + y * 1.8757561 + bri * 0.0415175; + const blue = x * 0.0557101 + y * -0.2040211 + bri * 1.0569959; - red = red > 0.04045 ? Math.pow((red + 0.055) / 1.055, 2.4) : red / 12.92; - green = green > 0.04045 ? Math.pow((green + 0.055) / 1.055, 2.4) : green / 12.92; - blue = blue > 0.04045 ? Math.pow((blue + 0.055) / 1.055, 2.4) : blue / 12.92; - - const X = red * 0.4124 + green * 0.3576 + blue * 0.1805; - const Y = red * 0.2126 + green * 0.7152 + blue * 0.0722; - const Z = red * 0.0193 + green * 0.1192 + blue * 0.9505; - - let x = X / (X + Y + Z); - let y = Y / (X + Y + Z); - - if (isNaN(x)) x = 0; - if (isNaN(y)) y = 0; + const translate = function (color: number) { + return color <= 0.0031308 ? 12.92 * color : 1.055 * Math.pow(color, 1 / 2.4) - 0.055; + }; return { - x, - y, - bri: Y, + r: Math.round(255 * translate(red)), + g: Math.round(255 * translate(green)), + b: Math.round(255 * translate(blue)), }; }; /** - * Converts XY to RGB. Based on formula from https://developers.meethue.com/develop/application-design-guidance/color-conversion-formulas-rgb-to-xy-and-back/ - * @param color XY color and brightness as an array [0-1, 0-1, 0-1] + * Converts RGB to XY. Based on formula from https://developers.meethue.com/develop/application-design-guidance/color-conversion-formulas-rgb-to-xy-and-back/ + * @param color RGB color as an array [0-255, 0-255, 0-255] */ -export const xyToRgb = ({ x, y, bri = 1 }: XYColor): RgbColor => { - const z = 1.0 - x - y; - - const Y = bri; - const X = (Y / y) * x; - const Z = (Y / y) * z; +export const rgbToXY = ({ r, g, b }: RgbColor): XYColor => { + const translateColor = function (color: number) { + return color <= 0.04045 ? color / 12.92 : Math.pow((color + 0.055) / 1.055, 2.4); + }; - let r = X * 1.656492 - Y * 0.354851 - Z * 0.255038; - let g = -X * 0.707196 + Y * 1.655397 + Z * 0.036152; - let b = X * 0.051713 - Y * 0.121364 + Z * 1.01153; + const red = translateColor(r / 255); + const green = translateColor(g / 255); + const blud = translateColor(b / 255); - r = r <= 0.0031308 ? 12.92 * r : (1.0 + 0.055) * Math.pow(r, 1.0 / 2.4) - 0.055; - g = g <= 0.0031308 ? 12.92 * g : (1.0 + 0.055) * Math.pow(g, 1.0 / 2.4) - 0.055; - b = b <= 0.0031308 ? 12.92 * b : (1.0 + 0.055) * Math.pow(b, 1.0 / 2.4) - 0.055; + const xyz = {} as XYColor; + xyz.x = red * 0.4124 + green * 0.3576 + blud * 0.1805; + xyz.y = red * 0.2126 + green * 0.7152 + blud * 0.0722; + xyz.bri = red * 0.0193 + green * 0.1192 + blud * 0.9505; - return { - r: Math.round(r * 255), - g: Math.round(g * 255), - b: Math.round(b * 255), - }; + return xyz; }; export const color = (str: string | HsvaColor): ColorResult => { @@ -349,6 +335,7 @@ export const color = (str: string | HsvaColor): ColorResult => { let rgba!: RgbaColor; let hsla!: HslaColor; let hsva!: HsvaColor; + let xy!: XYColor; let hex!: string; let hexa!: string; if (typeof str === 'string' && validHex(str)) { @@ -365,8 +352,9 @@ export const color = (str: string | HsvaColor): ColorResult => { hex = hsvaToHex(hsva); hsl = hslaToHsl(hsla); rgb = rgbaToRgb(rgba); + xy = rgbToXY(rgb); } - return { rgb, hsl, hsv, rgba, hsla, hsva, hex, hexa }; + return { rgb, hsl, hsv, rgba, hsla, hsva, hex, hexa, xy }; }; export const getContrastingColor = (str: string | HsvaColor) => { diff --git a/test/convert.test.tsx b/test/convert.test.tsx index a8899b6c3..f376a4947 100644 --- a/test/convert.test.tsx +++ b/test/convert.test.tsx @@ -43,7 +43,7 @@ it('Converts color => hslString To Hsl', () => { }); it('Converts color => HEX to ColorResult', () => { - const { rgb, rgba, hex, hexa, hsl, hsla, hsv, hsva } = color('#d1021a'); + const { rgb, rgba, hex, hexa, hsl, hsla, hsv, hsva, xy } = color('#d1021a'); expect(hex).toEqual('#d1021a'); expect(hexa).toEqual('#d1021aff'); expect(color({ h: 353.04347826086956, s: 99.04306220095694, v: 81.96078431372548, a: 1 }).hex).toEqual('#d1021a'); @@ -54,6 +54,7 @@ it('Converts color => HEX to ColorResult', () => { expect(hsla).toEqual({ h: 353.04347826086956, l: 41.37254901960784, s: 98.10426540284361, a: 1 }); expect(hsv).toEqual({ h: 353.04347826086956, s: 99.04306220095694, v: 81.96078431372548 }); expect(hsva).toEqual({ h: 353.04347826086956, s: 99.04306220095694, v: 81.96078431372548, a: 1 }); + expect(xy).toEqual({ x: 0.26502656639062083, y: 0.13673307363113865, bri: 0.022196477290623278 }); }); it('Converts color => HEXA to ColorResult', () => { @@ -98,12 +99,12 @@ it('Converts RGBA to HEXA', () => { }); it('Converts RGB to XY', () => { - expect(rgbToXY({ r: 255, g: 255, b: 255 })).toMatchObject({ x: 0.3127159072215825, y: 0.3290014805066623, bri: 1 }); + expect(rgbToXY({ r: 255, g: 255, b: 255 })).toMatchObject({ x: 0.9505, y: 1, bri: 1.089 }); expect(rgbToXY({ r: 0, g: 0, b: 0 })).toMatchObject({ x: 0.0, y: 0.0, bri: 0 }); expect(rgbToXY({ r: 71, g: 128, b: 241 })).toMatchObject({ - x: 0.19313993893216994, - y: 0.17053314882681408, - bri: 0.23128809648982562, + x: 0.26194888875915034, + y: 0.23128809648982562, + bri: 0.863027753196167, }); }); @@ -128,9 +129,9 @@ it('Converts HEX to HSVA', () => { }); it('Converts HEX to XY', () => { - expect(hexToXY('#ffffff')).toMatchObject({ x: 0.3127159072215825, y: 0.3290014805066623, bri: 1 }); + expect(hexToXY('#ffffff')).toMatchObject({ x: 0.9505, y: 1, bri: 1.089 }); expect(hexToXY('#000000')).toMatchObject({ x: 0.0, y: 0.0, bri: 0 }); - expect(hexToXY('#4780f1')).toMatchObject({ x: 0.19313993893216994, y: 0.17053314882681408, bri: 0.23128809648982562 }); + expect(hexToXY('#4780f1')).toMatchObject({ x: 0.26194888875915034, y: 0.23128809648982562, bri: 0.863027753196167 }); }); it('Converts shorthand HEX to HSVA', () => { @@ -429,9 +430,9 @@ it('Validates HEX colors', () => { }); it('Converts XY to RGB', () => { - expect(xyToRgb({ x: 0.3127159072215825, y: 0.3290014805066623, bri: 1 })).toMatchObject({ r: 255, g: 255, b: 255 }); + expect(xyToRgb({ x: 0.9505, y: 1, bri: 1.089 })).toMatchObject({ r: 255, g: 255, b: 255 }); expect(xyToRgb({ x: 0.0, y: 0.0, bri: 0 })).toMatchObject({ r: 0, g: 0, b: 0 }); - expect(xyToRgb({ x: 0.19313993893216994, y: 0.17053314882681408, bri: 0.23128809648982562 })).toMatchObject({ + expect(xyToRgb({ x: 0.26194888875915034, y: 0.23128809648982562, bri: 0.863027753196167 })).toMatchObject({ r: 71, g: 128, b: 241, @@ -439,7 +440,7 @@ it('Converts XY to RGB', () => { }); it('Converts XY to HEX', () => { - expect(xyToHex({ x: 0.3127159072215825, y: 0.3290014805066623, bri: 1 })).toBe('#ffffff'); + expect(xyToHex({ x: 0.9505, y: 1, bri: 1.089 })).toBe('#ffffff'); expect(xyToHex({ x: 0.0, y: 0.0, bri: 0 })).toBe('#000000'); - expect(xyToHex({ x: 0.19313993893216994, y: 0.17053314882681408, bri: 0.23128809648982562 })).toBe('#4780f1'); + expect(xyToHex({ x: 0.26194888875915034, y: 0.23128809648982562, bri: 0.863027753196167 })).toBe('#4780f1'); }); From 273304f2171c2e477dae12a89d4143508951fda7 Mon Sep 17 00:00:00 2001 From: Lukas Leisten Date: Sun, 22 Sep 2024 18:22:39 +0200 Subject: [PATCH 4/4] fix: Added XY to Circle colors test --- test/circle.test.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/test/circle.test.tsx b/test/circle.test.tsx index 0b28e2bdb..7e9d230cd 100644 --- a/test/circle.test.tsx +++ b/test/circle.test.tsx @@ -68,6 +68,11 @@ it('Circle colors checked', async () => { v: 95.68627450980392, a: 1, }, + xy: { + bri: 0.06811140344707436, + x: 0.40822033351750947, + y: 0.24997641962334327, + }, hex: '#f44e3b', hexa: '#f44e3bff', });