jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2026-04-07 03:14:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

Migrate hex color helper functions to culori (#27184)

Browse Source
This commit is contained in:
Aidan Timson
2025-09-26 10:31:18 +01:00
committed by GitHub
parent 6f1f13acb0
commit c57851e4df
1 changed files with 27 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src/common/color/hex.ts
View File

@@ -1,23 +1,40 @@
import { formatHex, parse } from "culori";
/**
* Expands a 3-digit hex color to a 6-digit hex color.
* @param hex - The hex color to expand.
* @returns The expanded hex color.
* @throws If the hex color is invalid.
*/
export const expandHex = (hex: string): string => {
hex = hex.replace("#", "");
if (hex.length === 6) return hex;
let result = "";
for (const val of hex) {
result += val + val;
const color = parse(hex);
if (!color) {
throw new Error(`Invalid hex color: ${hex}`);
}
return result;
const formattedColor = formatHex(color);
if (!formattedColor) {
throw new Error(`Could not format hex color: ${hex}`);
}
return formattedColor.replace("#", "");
};
// Blend 2 hex colors: c1 is placed over c2, blend is c1's opacity.
/**
* Blends two hex colors. c1 is placed over c2, blend is c1's opacity.
* @param c1 - The first hex color.
* @param c2 - The second hex color.
* @param blend - The blend percentage (0-100).
* @returns The blended hex color.
*/
export const hexBlend = (c1: string, c2: string, blend = 50): string => {
let color = "";
c1 = expandHex(c1);
c2 = expandHex(c2);
let color = "";
for (let i = 0; i <= 5; i += 2) {
const h1 = parseInt(c1.substring(i, i + 2), 16);
const h2 = parseInt(c2.substring(i, i + 2), 16);
let hex = Math.floor(h2 + (h1 - h2) * (blend / 100)).toString(16);
while (hex.length < 2) hex = "0" + hex;
const hex = Math.floor(h2 + (h1 - h2) * (blend / 100))
.toString(16)
.padStart(2, "0");
color += hex;
}
return `#${color}`;