import type { HslColorValue, HsvColorValue, SrgbColorValue } from "../types.ts" import { createHslColorValue, createHsvColorValue, createSrgbColorValue } from "./construct.ts" import { internalFormatAlpha, internalFormatHexByte, internalFormatPercentUnit, } from "./internal.ts" /** * @description 将 sRGB 颜色值序列化为十六进制颜色字符串。 * * @example * ``` * // Expect: #336699 * const example1 = srgbColorValueToHexColorString({ red: 51, green: 102, blue: 153, alpha: 0.5 }) * * // Expect: #33669980 * const example2 = srgbColorValueToHexColorString({ red: 51, green: 102, blue: 153, alpha: 0.5 }, { includeAlpha: true }) * ``` */ export const srgbColorValueToHexColorString = ( color: SrgbColorValue, options: { includeAlpha?: boolean } = {}, ): string => { const normalizedColor = createSrgbColorValue(color) const hex = [normalizedColor.red, normalizedColor.green, normalizedColor.blue] .map((value) => internalFormatHexByte(value)) .join("") if (options.includeAlpha === true) { const alphaByte = Math.round(normalizedColor.alpha * 255) return `#${hex}${internalFormatHexByte(alphaByte)}` } return `#${hex}` } /** * @description 将 sRGB 颜色值序列化为 `rgb(...)` 字符串。 * * @example * ``` * // Expect: rgb(51, 102, 153) * const example1 = srgbColorValueToRgbColorString({ red: 51, green: 102, blue: 153, alpha: 0.5 }) * * // Expect: rgb(0, 0, 0) * const example2 = srgbColorValueToRgbColorString({ red: 0, green: 0, blue: 0, alpha: 1 }) * ``` */ export const srgbColorValueToRgbColorString = (color: SrgbColorValue): string => { const normalizedColor = createSrgbColorValue(color) return `rgb(${normalizedColor.red}, ${normalizedColor.green}, ${normalizedColor.blue})` } /** * @description 将 sRGB 颜色值序列化为 `rgba(...)` 字符串。 * * @example * ``` * // Expect: rgba(51, 102, 153, 0.5) * const example1 = srgbColorValueToRgbaColorString({ red: 51, green: 102, blue: 153, alpha: 0.5 }) * * // Expect: rgba(255, 255, 255, 1) * const example2 = srgbColorValueToRgbaColorString({ red: 255, green: 255, blue: 255, alpha: 1 }) * ``` */ export const srgbColorValueToRgbaColorString = (color: SrgbColorValue): string => { const normalizedColor = createSrgbColorValue(color) return `rgba(${normalizedColor.red}, ${normalizedColor.green}, ${normalizedColor.blue}, ${internalFormatAlpha(normalizedColor.alpha)})` } /** * @description 将 HSL 颜色值序列化为 `hsl(...)` 字符串。 * * @example * ``` * // Expect: hsl(210, 50%, 40%) * const example1 = hslColorValueToHslColorString({ hue: 210, saturation: 0.5, lightness: 0.4, alpha: 0.5 }) * * // Expect: hsl(0, 0%, 100%) * const example2 = hslColorValueToHslColorString({ hue: 0, saturation: 0, lightness: 1, alpha: 1 }) * ``` */ export const hslColorValueToHslColorString = (color: HslColorValue): string => { const normalizedColor = createHslColorValue(color) return `hsl(${normalizedColor.hue}, ${internalFormatPercentUnit(normalizedColor.saturation)}%, ${internalFormatPercentUnit(normalizedColor.lightness)}%)` } /** * @description 将 HSL 颜色值序列化为 `hsla(...)` 字符串。 * * @example * ``` * // Expect: hsla(210, 50%, 40%, 0.5) * const example1 = hslColorValueToHslaColorString({ hue: 210, saturation: 0.5, lightness: 0.4, alpha: 0.5 }) * * // Expect: hsla(0, 0%, 100%, 1) * const example2 = hslColorValueToHslaColorString({ hue: 0, saturation: 0, lightness: 1, alpha: 1 }) * ``` */ export const hslColorValueToHslaColorString = (color: HslColorValue): string => { const normalizedColor = createHslColorValue(color) return `hsla(${normalizedColor.hue}, ${internalFormatPercentUnit(normalizedColor.saturation)}%, ${internalFormatPercentUnit(normalizedColor.lightness)}%, ${internalFormatAlpha(normalizedColor.alpha)})` } /** * @description 将 HSV 颜色值序列化为 `hsv(...)` 字符串。 * * @example * ``` * // Expect: hsv(210, 66.67%, 60%) * const example1 = hsvColorValueToHsvColorString({ hue: 210, saturation: 0.6667, value: 0.6, alpha: 0.5 }) * * // Expect: hsv(0, 0%, 100%) * const example2 = hsvColorValueToHsvColorString({ hue: 0, saturation: 0, value: 1, alpha: 1 }) * ``` */ export const hsvColorValueToHsvColorString = (color: HsvColorValue): string => { const normalizedColor = createHsvColorValue(color) return `hsv(${normalizedColor.hue}, ${internalFormatPercentUnit(normalizedColor.saturation)}%, ${internalFormatPercentUnit(normalizedColor.value)}%)` } /** * @description 将 HSV 颜色值序列化为 `hsva(...)` 字符串。 * * @example * ``` * // Expect: hsva(210, 66.67%, 60%, 0.5) * const example1 = hsvColorValueToHsvaColorString({ hue: 210, saturation: 0.6667, value: 0.6, alpha: 0.5 }) * * // Expect: hsva(0, 0%, 100%, 1) * const example2 = hsvColorValueToHsvaColorString({ hue: 0, saturation: 0, value: 1, alpha: 1 }) * ``` */ export const hsvColorValueToHsvaColorString = (color: HsvColorValue): string => { const normalizedColor = createHsvColorValue(color) return `hsva(${normalizedColor.hue}, ${internalFormatPercentUnit(normalizedColor.saturation)}%, ${internalFormatPercentUnit(normalizedColor.value)}%, ${internalFormatAlpha(normalizedColor.alpha)})` }