color could be HEX format instead

[panaC]

color could be HEX format instead
avoids an another structure and weak impacts on the user dev.

it's an idea :)

r2-navigator-js/src/electron/common/highlight.ts

Line 10 in 29582f1

export interface IColor {

[danielweck]

another code reference: https://github.com/readium/r2-navigator-js/blob/develop/src/electron/renderer/webview/highlight.ts

[danielweck]

RGB triplets + A alpha transparency is used internally:

r2-navigator-js/src/electron/renderer/webview/highlight.ts

Line 96 in 29582f1

highlightBounding.style.setProperty("background-color", `rgba(${highlight.color.red}, ${highlight.color.green}, ${highlight.color.blue}, ${opacity})`, "important");

...yeah, we could add a rgb field to the IColor interface, which would take precedence over the triplet decimal values (if they exist). This rgb field would accept the old-school #AABBCC syntax, as a convenience to navigator API users .... just need to decide how to combine the variable opacity in the highlight code :)

[JayPanoz]

Not sure it can help inform the discussion that much, but it’s probably worth mentioning as mere “anecdata” that there’s been a major lobbying + move to hsl(a) in CSS colours lately, as it’s Math-friendly and simplifies a lot of use cases – it became all the rage as a side-effect of CSS variables pretty much overnight and now hsl is the new gospel.

I won’t list everything but a few recent examples I can find in 30 seconds:

• Why CSS HSL Colors are Better!
• Calculating Color: Dynamic Color Theming with Pure CSS
• Switch font color for different backgrounds with CSS (this last one is inspired by an implementation using the color npm package)

There are significant drawbacks though:

• Photoshop’s HSL ≠ CSS’ HSL
• you need rgb(a) to implement a luma-corrected approach (cf. this section of the third article)

[danielweck]

HSL is sooo yesterday though! ;o)

LCH is the future :)
http://lea.verou.me/2020/04/lch-colors-in-css-what-why-and-how/

[danielweck]

Note: a conversion function is available to transform a #FFF / #FFFFFF string to its equivalent RGB triplet, with optional alpha opacity:

r2-navigator-js/src/electron/common/highlight.ts

Lines 34 to 45 in 7da454e

	export function convertColorHexadecimalToRGBA(cssHex: string, alpha?: number): string | undefined {
	if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(cssHex)) {
	const hex = cssHex.substring(1);
	const hex_ = hex.length === 3 ?
	`0x${hex[0]}${hex[0]}${hex[1]}${hex[1]}${hex[2]}${hex[2]}` :
	`0x${hex[0]}${hex[1]}${hex[2]}${hex[3]}${hex[4]}${hex[5]}`;
	const hexVal = parseInt(hex_, 16);
	// tslint:disable-next-line: no-bitwise
	return `rgb${alpha ? "a" : ""}(${(hexVal >> 16) & 255}, ${(hexVal >> 8) & 255}, ${hexVal & 255}${alpha ? `, ${alpha}` : ""})`;
	}
	return undefined;
	}