CssColorFormat.format
import { CssColorFormat } from "https://raw.githubusercontent.com/i-xi-dev/color.es/5.2.10/mod.ts";
const { format } = CssColorFormat;
Creates CSS color value from an instance of RgbColor
.
The following CSS Color Level 3 values are supported:
<hex-color>
<rgb()>
<rgba()>
<hsl()>
<hsla()>
The following CSS Color Level 4 values are experimentally supported:
<rgb()>
<hsl()>
@example
const color = RgbColor.fromHexString("#ff0000");
const cssText = CssColorFormat.format(color);
// cssText
// → "#ff0000ff"
@example
// format to the notation for CSS color level 4
const color = RgbColor.fromHexString("#ff0000");
const cssText = CssColorFormat.format(color, { notation: "rgb" });
// cssText
// → "rgb(255 0 0 / 1.00)"
@example
// format to the notation for CSS color level 4
const color = RgbColor.fromHexString("#ff0000");
const cssText = CssColorFormat.format(color, { notation: "rgb", shortenIfPossible: true });
// cssText
// → "rgb(255 0 0)"
@example
const color = RgbColor.fromHexString("#ff0000");
const cssText = CssColorFormat.format(color, { notation: "rgb", legacy: true });
// cssText
// → "rgba(255, 0, 0, 1.00)"
@example
const color = RgbColor.fromHexString("#ff0000");
const cssText = CssColorFormat.format(color, { notation: "rgb", legacy: true, shortenIfPossible: true });
// cssText
// → "rgb(255, 0, 0)"
@example
// format to the notation for CSS color level 4
const color = RgbColor.fromHexString("#ff0000");
const cssText = CssColorFormat.format(color, { notation: "hsl" });
// cssText
// → "hsl(0.00deg 100.00% 50.00% / 1.00)"
@example
// format to the notation for CSS color level 4
const color = RgbColor.fromHexString("#ff0000");
const cssText = CssColorFormat.format(color, { notation: "hsl", shortenIfPossible: true });
// cssText
// → "hsl(0 100% 50%)"
@example
const color = RgbColor.fromHexString("#ff0000");
const cssText = CssColorFormat.format(color, { notation: "hsl", legacy: true });
// cssText
// → "hsla(0.00deg, 100.00%, 50.00%, 1.00)"
@example
const color = RgbColor.fromHexString("#ff0000");
const cssText = CssColorFormat.format(color, { notation: "hsl", legacy: true, shortenIfPossible: true });
// cssText
// → "hsl(0, 100%, 50%)"