From a6d387cfac55a6dfbb5ad426b8e8e6f2f18322ba Mon Sep 17 00:00:00 2001 From: serenity <98162476+NekoDrone@users.noreply.github.com> Date: Tue, 16 Sep 2025 13:10:44 +0800 Subject: [PATCH] feat: more colour methods --- src/alf/util/colors/conversion.ts | 14 ++++++++++---- src/alf/util/colors/index.ts | 9 +++++++-- 2 files changed, 17 insertions(+), 6 deletions(-) diff --git a/src/alf/util/colors/conversion.ts b/src/alf/util/colors/conversion.ts index 41ef92422..691b0fabd 100644 --- a/src/alf/util/colors/conversion.ts +++ b/src/alf/util/colors/conversion.ts @@ -89,11 +89,11 @@ export const hslToHex = ( } } - const r = hue(h + 1 / 3) * 255 - const g = hue(h) * 255 - const b = hue(h - 1 / 3) * 255 + const r = Math.round(hue(h + 1 / 3) * 255) + const g = Math.round(hue(h) * 255) + const b = Math.round(hue(h - 1 / 3) * 255) - return `${appendSymbol ? '#' : ''}${r.toString(16)}${g.toString(16)}${b.toString(16)}${typeof a !== 'undefined' ? a.toString(16) : ''}` + return `${appendSymbol ? '#' : ''}${r.toString(16)}${g.toString(16)}${b.toString(16)}${typeof a !== 'undefined' ? Math.round(a).toString(16) : ''}` } /** @@ -215,3 +215,9 @@ export const hslToRgb = ({h, s, l, a}: HslColor): RgbColor => { a: typeof a !== 'undefined' ? (a / 100) * 255 : undefined, } } + +export const rgbObjectToString = ({r, g, b, a}: RgbColor) => { + const res = `rgba(${r}, ${g}, ${b}${a ? `, ${(a / 255) * 100}` : ''})` + console.log(res) + return res +} diff --git a/src/alf/util/colors/index.ts b/src/alf/util/colors/index.ts index cc0b52929..bf6b41f0a 100644 --- a/src/alf/util/colors/index.ts +++ b/src/alf/util/colors/index.ts @@ -1,4 +1,9 @@ -import {hexToHsl, hslToHex} from '#/alf/util/colors/conversion' +import { + hexToHsl, + hslToHex, + hslToRgb, + rgbObjectToString, +} from '#/alf/util/colors/conversion' export interface HslColor { h: number @@ -57,5 +62,5 @@ export const fade = (hex: HexCode, amount: number) => { hsl.a = amount / 100 hsl.a = clamp(hsl.a) - return hslToHex(hsl) + return rgbObjectToString(hslToRgb(hsl)) } -- 2.51.2