@planet-matrix/mobius-model 0.5.0 → 0.6.0

package/src/color/index.ts

@@ -0,0 +1,3 @@
+export type * from "./types.ts"
+export * from "./xyz/index.ts"
+export * from "./rgb/index.ts"

package/src/color/internal.ts

@@ -0,0 +1,42 @@
+/**
+ * 断言一个数值是有限数字。
+ */
+export const internalAssertFinite = (value: number, name: string): void => {
+  if (Number.isFinite(value) === false) {
+    throw new RangeError(`${name} must be a finite number`)
+  }
+}
+
+/**
+ * 断言一个数值是非负有限数字。
+ */
+export const internalAssertNonNegativeFinite = (value: number, name: string): void => {
+  internalAssertFinite(value, name)
+
+  if (value < 0) {
+    throw new RangeError(`${name} must be a non-negative finite number`)
+  }
+}
+
+/**
+ * 断言一个颜色单位值位于 `0` 到 `1` 之间。
+ */
+export const internalAssertColorUnit = (value: number, unitName: string): void => {
+  if (Number.isFinite(value) === false || value < 0 || value > 1) {
+    throw new RangeError(`Color ${unitName} must be a finite number between 0 and 1`)
+  }
+}
+
+/**
+ * 断言一个透明度值位于 `0` 到 `1` 之间。
+ */
+export const internalAssertAlpha = (value: number): void => {
+  internalAssertColorUnit(value, "alpha")
+}
+
+/**
+ * 将浮点数按颜色计算常用精度进行圆整。
+ */
+export const internalRoundColorFloat = (value: number): number => {
+  return Number(value.toFixed(6))
+}

package/src/color/rgb/analyze.ts

@@ -0,0 +1,236 @@
+import { createSrgbColorValue } from "./construct.ts"
+import { internalAssertColorUnit } from "../internal.ts"
+import { linearRgbColorValueToXyzColorValue } from "../xyz/convert.ts"
+import { srgbColorValueToLinearRgbColorValue } from "./convert.ts"
+import {
+  xyzColorValueToRelativeLuminance,
+  xyzColorValueToTristimulusSum,
+  xyzColorValueToXyChromaticityValue,
+} from "../xyz/analyze.ts"
+
+import type {
+  LinearRgbColorValue,
+  SrgbColorValue,
+  XyChromaticityValue,
+} from "../types.ts"
+
+const internalDefaultDarkSrgbColorValue: SrgbColorValue = { red: 0, green: 0, blue: 0, alpha: 1 }
+const internalDefaultLightSrgbColorValue: SrgbColorValue = { red: 255, green: 255, blue: 255, alpha: 1 }
+
+const internalNormalizeContrastRatio = (value: number): number => {
+  if (Number.isFinite(value) === false || value < 1) {
+    throw new RangeError("Contrast ratio must be a finite number greater than or equal to 1")
+  }
+
+  return value
+}
+
+/**
+ * 读取 Linear RGB 颜色值的相对亮度。
+ *
+ * 该函数会沿合法路径 `Linear RGB -> XYZ -> luminance` 计算。
+ *
+ * @example
+ * ```
+ * // Expect: 0.212673
+ * const example1 = linearRgbColorValueToRelativeLuminance({ red: 1, green: 0, blue: 0, alpha: 1 })
+ *
+ * // Expect: 1
+ * const example2 = linearRgbColorValueToRelativeLuminance({ red: 1, green: 1, blue: 1, alpha: 1 })
+ * ```
+ */
+export const linearRgbColorValueToRelativeLuminance = (color: LinearRgbColorValue): number => {
+  return xyzColorValueToRelativeLuminance(linearRgbColorValueToXyzColorValue(color))
+}
+
+/**
+ * 读取 sRGB 颜色值的相对亮度。
+ *
+ * 该函数会沿合法路径 `sRGB -> Linear RGB -> XYZ -> luminance` 计算。
+ *
+ * @example
+ * ```
+ * // Expect: 0.125053
+ * const example1 = srgbColorValueToRelativeLuminance({ red: 51, green: 102, blue: 153, alpha: 1 })
+ *
+ * // Expect: 1
+ * const example2 = srgbColorValueToRelativeLuminance({ red: 255, green: 255, blue: 255, alpha: 1 })
+ * ```
+ */
+export const srgbColorValueToRelativeLuminance = (color: SrgbColorValue): number => {
+  return linearRgbColorValueToRelativeLuminance(srgbColorValueToLinearRgbColorValue(color))
+}
+
+/**
+ * 读取两个 sRGB 颜色值之间的对比度。
+ *
+ * 该函数假定输入已经是最终显示颜色；若存在透明叠加，应先完成合成。
+ *
+ * @example
+ * ```
+ * // Expect: 21
+ * const example1 = srgbColorValuesToContrastRatio(
+ *   { red: 0, green: 0, blue: 0, alpha: 1 },
+ *   { red: 255, green: 255, blue: 255, alpha: 1 },
+ * )
+ *
+ * // Expect: 1
+ * const example2 = srgbColorValuesToContrastRatio(
+ *   { red: 51, green: 102, blue: 153, alpha: 1 },
+ *   { red: 51, green: 102, blue: 153, alpha: 1 },
+ * )
+ * ```
+ */
+export const srgbColorValuesToContrastRatio = (first: SrgbColorValue, second: SrgbColorValue): number => {
+  const firstLuminance = srgbColorValueToRelativeLuminance(first)
+  const secondLuminance = srgbColorValueToRelativeLuminance(second)
+  const lighterLuminance = Math.max(firstLuminance, secondLuminance)
+  const darkerLuminance = Math.min(firstLuminance, secondLuminance)
+
+  return lighterLuminance === darkerLuminance
+    ? 1
+    : Number((((lighterLuminance + 0.05) / (darkerLuminance + 0.05))).toFixed(6))
+}
+
+/**
+ * 判断两个 sRGB 颜色值是否达到指定对比度阈值。
+ *
+ * 该函数假定输入已经是最终显示颜色；若存在透明叠加，应先完成合成。
+ *
+ * @example
+ * ```
+ * // Expect: true
+ * const example1 = doSrgbColorValuesMeetContrastRatio(
+ *   { red: 0, green: 0, blue: 0, alpha: 1 },
+ *   { red: 255, green: 255, blue: 255, alpha: 1 },
+ *   4.5,
+ * )
+ *
+ * // Expect: false
+ * const example2 = doSrgbColorValuesMeetContrastRatio(
+ *   { red: 120, green: 120, blue: 120, alpha: 1 },
+ *   { red: 255, green: 255, blue: 255, alpha: 1 },
+ *   4.5,
+ * )
+ * ```
+ */
+export const doSrgbColorValuesMeetContrastRatio = (first: SrgbColorValue, second: SrgbColorValue, minimumContrastRatio = 4.5): boolean => {
+  return srgbColorValuesToContrastRatio(first, second) >= internalNormalizeContrastRatio(minimumContrastRatio)
+}
+
+/**
+ * 为给定背景色选择更可读的黑色或白色文本颜色。
+ *
+ * 该函数假定背景色已经是最终显示颜色。
+ *
+ * @example
+ * ```
+ * // Expect: { red: 255, green: 255, blue: 255, alpha: 1 }
+ * const example1 = pickReadableSrgbTextColorValue({ red: 0, green: 102, blue: 204, alpha: 1 })
+ *
+ * // Expect: { red: 0, green: 0, blue: 0, alpha: 1 }
+ * const example2 = pickReadableSrgbTextColorValue({ red: 250, green: 240, blue: 210, alpha: 1 })
+ * ```
+ */
+export const pickReadableSrgbTextColorValue = (
+  backgroundColor: SrgbColorValue,
+  options: { darkColor?: SrgbColorValue, lightColor?: SrgbColorValue } = {},
+): SrgbColorValue => {
+  const normalizedDarkColor = createSrgbColorValue(options.darkColor ?? internalDefaultDarkSrgbColorValue)
+  const normalizedLightColor = createSrgbColorValue(options.lightColor ?? internalDefaultLightSrgbColorValue)
+  const darkContrastRatio = srgbColorValuesToContrastRatio(normalizedDarkColor, backgroundColor)
+  const lightContrastRatio = srgbColorValuesToContrastRatio(normalizedLightColor, backgroundColor)
+
+  return lightContrastRatio > darkContrastRatio ? normalizedLightColor : normalizedDarkColor
+}
+
+/**
+ * 读取 Linear RGB 颜色值沿合法路径得到的三刺激总量。
+ *
+ * 该函数会沿合法路径 `Linear RGB -> XYZ -> tristimulus sum` 计算。
+ *
+ * @example
+ * ```
+ * // Expect: 0.644463
+ * const example1 = linearRgbColorValueToTristimulusSum({ red: 1, green: 0, blue: 0, alpha: 1 })
+ *
+ * // Expect: 3.0393
+ * const example2 = linearRgbColorValueToTristimulusSum({ red: 1, green: 1, blue: 1, alpha: 1 })
+ * ```
+ */
+export const linearRgbColorValueToTristimulusSum = (color: LinearRgbColorValue): number => {
+  return xyzColorValueToTristimulusSum(linearRgbColorValueToXyzColorValue(color))
+}
+
+/**
+ * 读取 sRGB 颜色值沿合法路径得到的三刺激总量。
+ *
+ * 该函数会沿合法路径 `sRGB -> Linear RGB -> XYZ -> tristimulus sum` 计算。
+ *
+ * @example
+ * ```
+ * // Expect: 0.562889
+ * const example1 = srgbColorValueToTristimulusSum({ red: 51, green: 102, blue: 153, alpha: 1 })
+ *
+ * // Expect: 3.0393
+ * const example2 = srgbColorValueToTristimulusSum({ red: 255, green: 255, blue: 255, alpha: 1 })
+ * ```
+ */
+export const srgbColorValueToTristimulusSum = (color: SrgbColorValue): number => {
+  return linearRgbColorValueToTristimulusSum(srgbColorValueToLinearRgbColorValue(color))
+}
+
+/**
+ * 读取 Linear RGB 颜色值沿合法路径得到的 `xy` 色度坐标。
+ *
+ * 该函数会沿合法路径 `Linear RGB -> XYZ -> xy chromaticity` 计算。
+ *
+ * @example
+ * ```
+ * // Expect: { x: 0.64, y: 0.33 }
+ * const example1 = linearRgbColorValueToXyChromaticityValue({ red: 1, green: 0, blue: 0, alpha: 1 })
+ *
+ * // Expect: { x: 0.312727, y: 0.329023 }
+ * const example2 = linearRgbColorValueToXyChromaticityValue({ red: 1, green: 1, blue: 1, alpha: 1 })
+ * ```
+ */
+export const linearRgbColorValueToXyChromaticityValue = (color: LinearRgbColorValue): XyChromaticityValue => {
+  return xyzColorValueToXyChromaticityValue(linearRgbColorValueToXyzColorValue(color))
+}
+
+/**
+ * 读取 sRGB 颜色值沿合法路径得到的 `xy` 色度坐标。
+ *
+ * 该函数会沿合法路径 `sRGB -> Linear RGB -> XYZ -> xy chromaticity` 计算。
+ *
+ * @example
+ * ```
+ * // Expect: { x: 0.210775, y: 0.222163 }
+ * const example1 = srgbColorValueToXyChromaticityValue({ red: 51, green: 102, blue: 153, alpha: 1 })
+ *
+ * // Expect: { x: 0.312727, y: 0.329023 }
+ * const example2 = srgbColorValueToXyChromaticityValue({ red: 255, green: 255, blue: 255, alpha: 1 })
+ * ```
+ */
+export const srgbColorValueToXyChromaticityValue = (color: SrgbColorValue): XyChromaticityValue => {
+  return linearRgbColorValueToXyChromaticityValue(srgbColorValueToLinearRgbColorValue(color))
+}
+
+/**
+ * 判断一个 sRGB 颜色值是否可视为亮色。
+ *
+ * 阈值位于 `0` 到 `1` 之间，判断依据是相对亮度。
+ *
+ * @example
+ * ```
+ * // Expect: true
+ * const example1 = isLightSrgbColorValue({ red: 255, green: 255, blue: 255, alpha: 1 })
+ *
+ * // Expect: false
+ * const example2 = isLightSrgbColorValue({ red: 0, green: 0, blue: 0, alpha: 1 })
+ * ```
+ */
+export const isLightSrgbColorValue = (color: SrgbColorValue, threshold = 0.5): boolean => {
+  internalAssertColorUnit(threshold, "threshold")
+  return srgbColorValueToRelativeLuminance(createSrgbColorValue(color)) >= threshold
+}

package/src/color/rgb/construct.ts

@@ -0,0 +1,130 @@
+import {
+  internalGetStableSrgbColorValueByString,
+  internalNormalizeHslColorValue,
+  internalNormalizeHsvColorValue,
+  internalNormalizeLinearRgbColorValue,
+  internalNormalizeSrgbColorValue,
+} from "./internal.ts"
+import {
+  srgbColorValueToHslColorValue,
+  srgbColorValueToHsvColorValue,
+} from "./convert.ts"
+
+import type {
+  HslColorValue,
+  HsvColorValue,
+  LinearRgbColorValue,
+  SrgbColorValue,
+} from "../types.ts"
+
+/**
+ * 构造一个 Linear RGB 颜色值对象。
+ *
+ * @example
+ * ```
+ * // Expect: { red: 0.2, green: 0.4, blue: 0.6, alpha: 1 }
+ * const example1 = createLinearRgbColorValue({ red: 0.2, green: 0.4, blue: 0.6, alpha: 1 })
+ *
+ * // Expect: { red: -0.25, green: 0.4, blue: 1.2, alpha: 0.5 }
+ * const example2 = createLinearRgbColorValue({ red: -0.25, green: 0.4, blue: 1.2, alpha: 0.5 })
+ * ```
+ */
+export const createLinearRgbColorValue = (color: LinearRgbColorValue): LinearRgbColorValue => {
+  return internalNormalizeLinearRgbColorValue(color)
+}
+
+/**
+ * 构造一个 sRGB 颜色值对象。
+ *
+ * @example
+ * ```
+ * // Expect: { red: 51, green: 102, blue: 153, alpha: 1 }
+ * const example1 = createSrgbColorValue({ red: 51, green: 102, blue: 153, alpha: 1 })
+ *
+ * // Expect: { red: 255, green: 255, blue: 255, alpha: 0.5 }
+ * const example2 = createSrgbColorValue({ red: 255, green: 255, blue: 255, alpha: 0.5 })
+ * ```
+ */
+export const createSrgbColorValue = (color: SrgbColorValue): SrgbColorValue => {
+  return internalNormalizeSrgbColorValue(color)
+}
+
+/**
+ * 构造一个 HSL 颜色值对象。
+ *
+ * @example
+ * ```
+ * // Expect: { hue: 330, saturation: 0.5, lightness: 0.4, alpha: 1 }
+ * const example1 = createHslColorValue({ hue: -30, saturation: 0.5, lightness: 0.4, alpha: 1 })
+ *
+ * // Expect: { hue: 0, saturation: 0, lightness: 1, alpha: 0.5 }
+ * const example2 = createHslColorValue({ hue: 360, saturation: 0, lightness: 1, alpha: 0.5 })
+ * ```
+ */
+export const createHslColorValue = (color: HslColorValue): HslColorValue => {
+  return internalNormalizeHslColorValue(color)
+}
+
+/**
+ * 构造一个 HSV 颜色值对象。
+ *
+ * @example
+ * ```
+ * // Expect: { hue: 330, saturation: 0.5, value: 0.6, alpha: 1 }
+ * const example1 = createHsvColorValue({ hue: -30, saturation: 0.5, value: 0.6, alpha: 1 })
+ *
+ * // Expect: { hue: 30, saturation: 0.5, value: 0.6, alpha: 1 }
+ * const example2 = createHsvColorValue({ hue: 390, saturation: 0.5, value: 0.6, alpha: 1 })
+ * ```
+ */
+export const createHsvColorValue = (color: HsvColorValue): HsvColorValue => {
+  return internalNormalizeHsvColorValue(color)
+}
+
+/**
+ * 根据稳定字符串构造 sRGB 颜色值。
+ *
+ * @example
+ * ```
+ * // Expect: { red: 254, green: 192, blue: 46, alpha: 1 }
+ * const example1 = createSrgbColorValueByString("mobius")
+ *
+ * // Expect: { red: 101, green: 227, blue: 144, alpha: 1 }
+ * const example2 = createSrgbColorValueByString("planet")
+ * ```
+ */
+export const createSrgbColorValueByString = (input: string): SrgbColorValue => {
+  return internalGetStableSrgbColorValueByString(input)
+}
+
+/**
+ * 根据稳定字符串构造 HSL 颜色值。
+ *
+ * @example
+ * ```
+ * // Expect: { hue: 42.992126, saturation: 0.991597, lightness: 0.588235, alpha: 1 }
+ * const example1 = createHslColorValueByString("mobius")
+ *
+ * // Expect: { hue: 139.777778, saturation: 0.71831, lightness: 0.643137, alpha: 1 }
+ * const example2 = createHslColorValueByString("planet")
+ * ```
+ */
+export const createHslColorValueByString = (input: string): HslColorValue => {
+  return srgbColorValueToHslColorValue(createSrgbColorValueByString(input))
+}
+
+/**
+ * 根据稳定字符串构造 HSV 颜色值。
+ *
+ * @example
+ * ```
+ * // Expect: { hue: 42.992126, saturation: 0.818898, value: 0.996078, alpha: 1 }
+ * const example1 = createHsvColorValueByString("mobius")
+ *
+ * // Expect: { hue: 139.777778, saturation: 0.555066, value: 0.890196, alpha: 1 }
+ * const example2 = createHsvColorValueByString("planet")
+ * ```
+ */
+export const createHsvColorValueByString = (input: string): HsvColorValue => {
+  return srgbColorValueToHsvColorValue(createSrgbColorValueByString(input))
+}

package/src/color/rgb/convert.ts

@@ -0,0 +1,227 @@
+import {
+  internalRoundColorFloat,
+} from "../internal.ts"
+import {
+  internalGetLinearRgbChannelBySrgbChannel,
+  internalGetSrgbChannelByLinearRgbChannel,
+  internalNormalizeHslColorValue,
+  internalNormalizeHsvColorValue,
+  internalNormalizeLinearRgbColorValue,
+  internalNormalizeSrgbColorValue,
+} from "./internal.ts"
+
+import type {
+  HslColorValue,
+  HsvColorValue,
+  LinearRgbColorValue,
+  SrgbColorValue,
+} from "../types.ts"
+
+const internalGetHueByNormalizedRgbChannels = (red: number, green: number, blue: number, delta: number, max: number): number => {
+  if (delta === 0) {
+    return 0
+  }
+
+  let hue = 0
+
+  if (max === red) {
+    hue = 60 * (((green - blue) / delta) % 6)
+  } else if (max === green) {
+    hue = 60 * (((blue - red) / delta) + 2)
+  } else {
+    hue = 60 * (((red - green) / delta) + 4)
+  }
+
+  if (hue < 0) {
+    return hue + 360
+  }
+
+  return hue
+}
+const internalGetNormalizedRgbChannelsByHue = (hue: number, chroma: number): { red: number, green: number, blue: number } => {
+  const segment = hue / 60
+  const secondary = chroma * (1 - Math.abs((segment % 2) - 1))
+
+  if (segment >= 0 && segment < 1) {
+    return { red: chroma, green: secondary, blue: 0 }
+  }
+
+  if (segment >= 1 && segment < 2) {
+    return { red: secondary, green: chroma, blue: 0 }
+  }
+
+  if (segment >= 2 && segment < 3) {
+    return { red: 0, green: chroma, blue: secondary }
+  }
+
+  if (segment >= 3 && segment < 4) {
+    return { red: 0, green: secondary, blue: chroma }
+  }
+
+  if (segment >= 4 && segment < 5) {
+    return { red: secondary, green: 0, blue: chroma }
+  }
+
+  return { red: chroma, green: 0, blue: secondary }
+}
+
+/**
+ * 将 Linear RGB 颜色值转换为 sRGB 颜色值。
+ *
+ * @example
+ * ```
+ * // Expect: { red: 255, green: 0, blue: 0, alpha: 1 }
+ * const example1 = linearRgbColorValueToSrgbColorValue({ red: 1, green: 0, blue: 0, alpha: 1 })
+ *
+ * // Expect: { red: 188, green: 188, blue: 188, alpha: 0.5 }
+ * const example2 = linearRgbColorValueToSrgbColorValue({ red: 0.5, green: 0.5, blue: 0.5, alpha: 0.5 })
+ * ```
+ */
+export const linearRgbColorValueToSrgbColorValue = (color: LinearRgbColorValue): SrgbColorValue => {
+  const normalizedColor = internalNormalizeLinearRgbColorValue(color)
+
+  return internalNormalizeSrgbColorValue({
+    red: internalGetSrgbChannelByLinearRgbChannel(normalizedColor.red, "red"),
+    green: internalGetSrgbChannelByLinearRgbChannel(normalizedColor.green, "green"),
+    blue: internalGetSrgbChannelByLinearRgbChannel(normalizedColor.blue, "blue"),
+    alpha: normalizedColor.alpha,
+  })
+}
+
+/**
+ * 将 sRGB 颜色值转换为 Linear RGB 颜色值。
+ *
+ * @example
+ * ```
+ * // Expect: { red: 1, green: 0, blue: 0, alpha: 1 }
+ * const example1 = srgbColorValueToLinearRgbColorValue({ red: 255, green: 0, blue: 0, alpha: 1 })
+ *
+ * // Expect: { red: 0.215861, green: 0.215861, blue: 0.215861, alpha: 0.5 }
+ * const example2 = srgbColorValueToLinearRgbColorValue({ red: 128, green: 128, blue: 128, alpha: 0.5 })
+ * ```
+ */
+export const srgbColorValueToLinearRgbColorValue = (color: SrgbColorValue): LinearRgbColorValue => {
+  const normalizedColor = internalNormalizeSrgbColorValue(color)
+
+  return internalNormalizeLinearRgbColorValue({
+    red: internalGetLinearRgbChannelBySrgbChannel(normalizedColor.red),
+    green: internalGetLinearRgbChannelBySrgbChannel(normalizedColor.green),
+    blue: internalGetLinearRgbChannelBySrgbChannel(normalizedColor.blue),
+    alpha: normalizedColor.alpha,
+  })
+}
+
+/**
+ * 将 sRGB 颜色值转换为 HSL 颜色值。
+ *
+ * @example
+ * ```
+ * // Expect: { hue: 210, saturation: 0.5, lightness: 0.4, alpha: 1 }
+ * const example1 = srgbColorValueToHslColorValue({ red: 51, green: 102, blue: 153, alpha: 1 })
+ *
+ * // Expect: { hue: 0, saturation: 0, lightness: 0.501961, alpha: 1 }
+ * const example2 = srgbColorValueToHslColorValue({ red: 128, green: 128, blue: 128, alpha: 1 })
+ * ```
+ */
+export const srgbColorValueToHslColorValue = (color: SrgbColorValue): HslColorValue => {
+  const normalizedColor = internalNormalizeSrgbColorValue(color)
+  const red = normalizedColor.red / 255
+  const green = normalizedColor.green / 255
+  const blue = normalizedColor.blue / 255
+  const max = Math.max(red, green, blue)
+  const min = Math.min(red, green, blue)
+  const delta = max - min
+  const lightness = (max + min) / 2
+  const saturation = delta === 0 ? 0 : delta / (1 - Math.abs((2 * lightness) - 1))
+  const hue = internalGetHueByNormalizedRgbChannels(red, green, blue, delta, max)
+
+  return internalNormalizeHslColorValue({
+    hue: internalRoundColorFloat(hue),
+    saturation: internalRoundColorFloat(saturation),
+    lightness: internalRoundColorFloat(lightness),
+    alpha: normalizedColor.alpha,
+  })
+}
+
+/**
+ * 将 HSL 颜色值转换为 sRGB 颜色值。
+ *
+ * @example
+ * ```
+ * // Expect: { red: 51, green: 102, blue: 153, alpha: 1 }
+ * const example1 = hslColorValueToSrgbColorValue({ hue: 210, saturation: 0.5, lightness: 0.4, alpha: 1 })
+ *
+ * // Expect: { red: 128, green: 128, blue: 128, alpha: 1 }
+ * const example2 = hslColorValueToSrgbColorValue({ hue: 0, saturation: 0, lightness: 0.501961, alpha: 1 })
+ * ```
+ */
+export const hslColorValueToSrgbColorValue = (color: HslColorValue): SrgbColorValue => {
+  const normalizedColor = internalNormalizeHslColorValue(color)
+  const chroma = (1 - Math.abs((2 * normalizedColor.lightness) - 1)) * normalizedColor.saturation
+  const channels = internalGetNormalizedRgbChannelsByHue(normalizedColor.hue, chroma)
+  const match = normalizedColor.lightness - (chroma / 2)
+
+  return internalNormalizeSrgbColorValue({
+    red: Math.round((channels.red + match) * 255),
+    green: Math.round((channels.green + match) * 255),
+    blue: Math.round((channels.blue + match) * 255),
+    alpha: normalizedColor.alpha,
+  })
+}
+
+/**
+ * 将 sRGB 颜色值转换为 HSV 颜色值。
+ *
+ * @example
+ * ```
+ * // Expect: { hue: 210, saturation: 0.666667, value: 0.6, alpha: 1 }
+ * const example1 = srgbColorValueToHsvColorValue({ red: 51, green: 102, blue: 153, alpha: 1 })
+ *
+ * // Expect: { hue: 0, saturation: 0, value: 0.501961, alpha: 1 }
+ * const example2 = srgbColorValueToHsvColorValue({ red: 128, green: 128, blue: 128, alpha: 1 })
+ * ```
+ */
+export const srgbColorValueToHsvColorValue = (color: SrgbColorValue): HsvColorValue => {
+  const normalizedColor = internalNormalizeSrgbColorValue(color)
+  const red = normalizedColor.red / 255
+  const green = normalizedColor.green / 255
+  const blue = normalizedColor.blue / 255
+  const max = Math.max(red, green, blue)
+  const min = Math.min(red, green, blue)
+  const delta = max - min
+  const saturation = max === 0 ? 0 : delta / max
+  const hue = internalGetHueByNormalizedRgbChannels(red, green, blue, delta, max)
+
+  return internalNormalizeHsvColorValue({
+    hue: internalRoundColorFloat(hue),
+    saturation: internalRoundColorFloat(saturation),
+    value: internalRoundColorFloat(max),
+    alpha: normalizedColor.alpha,
+  })
+}
+
+/**
+ * 将 HSV 颜色值转换为 sRGB 颜色值。
+ *
+ * @example
+ * ```
+ * // Expect: { red: 51, green: 102, blue: 153, alpha: 1 }
+ * const example1 = hsvColorValueToSrgbColorValue({ hue: 210, saturation: 0.666667, value: 0.6, alpha: 1 })
+ *
+ * // Expect: { red: 128, green: 128, blue: 128, alpha: 1 }
+ * const example2 = hsvColorValueToSrgbColorValue({ hue: 0, saturation: 0, value: 0.501961, alpha: 1 })
+ * ```
+ */
+export const hsvColorValueToSrgbColorValue = (color: HsvColorValue): SrgbColorValue => {
+  const normalizedColor = internalNormalizeHsvColorValue(color)
+  const chroma = normalizedColor.value * normalizedColor.saturation
+  const channels = internalGetNormalizedRgbChannelsByHue(normalizedColor.hue, chroma)
+  const match = normalizedColor.value - chroma
+
+  return internalNormalizeSrgbColorValue({
+    red: Math.round((channels.red + match) * 255),
+    green: Math.round((channels.green + match) * 255),
+    blue: Math.round((channels.blue + match) * 255),
+    alpha: normalizedColor.alpha,
+  })
+}