Format

Format individual colors as CSS strings and export palettes as CSS custom properties, Tailwind config objects, or SCSS variables.

Material

Prefix

--material-1: #584d41;
--material-2: #211a12;
--material-3: #beb3a7;
--material-4: #93806c;
--material-5: #635836;
--material-6: #864d13;
--material-7: #e9e7e2;
--material-8: #a68059;
--material-9: #734d26;
--material-10: #331a00;
--material-11: #bf8040;
--material-12: #808080;

Click any color in the palette strip to see its individual HSL, RGB, and OKLCH formats.

import { toCssHsl, paletteToCSS, paletteToTailwind } from "colorscope/format";

Single Color

toCssHsl

Format a color as CSS hsl().

function toCssHsl(color: QuantizedColor): string

toCssHsl({ hue: 210, saturation: 80, lightness: 50, ... });
// "hsl(210, 80%, 50%)"

toCssRgb

Format a color as CSS rgb().

function toCssRgb(color: QuantizedColor): string

toCssRgb({ hue: 210, saturation: 80, lightness: 50, ... });
// "rgb(25, 102, 230)"

toCssOklch

Format a color as CSS oklch().

function toCssOklch(color: QuantizedColor): string

toCssOklch({ hue: 210, saturation: 80, lightness: 50, ... });
// "oklch(0.529 0.168 262.07)"

Palette Export

paletteToCSS

Generate CSS custom properties from a palette.

function paletteToCSS(colors: readonly QuantizedColor[], prefix?: string): string

Param	Type	Default	Description
`colors`	`readonly QuantizedColor[]`	—	Colors to export
`prefix`	`string`	`"color"`	CSS variable prefix

paletteToCSS(colors);
// "--color-1: #c2704a;\n--color-2: #2663a6;"

paletteToCSS(colors, "brand");
// "--brand-1: #c2704a;\n--brand-2: #2663a6;"

paletteToTailwind

Generate a Tailwind CSS color config object from a palette.

function paletteToTailwind(
  colors: readonly QuantizedColor[],
  prefix?: string
): Record<string, string>

Param	Type	Default	Description
`colors`	`readonly QuantizedColor[]`	—	Colors to export
`prefix`	`string`	`"brand"`	Color name prefix

paletteToTailwind(colors);
// { "brand-1": "#c2704a", "brand-2": "#2663a6" }

paletteToTailwind(colors, "palette");
// { "palette-1": "#c2704a", "palette-2": "#2663a6" }

paletteToScss

Generate SCSS variables from a palette.

function paletteToScss(colors: readonly QuantizedColor[], prefix?: string): string

Param	Type	Default	Description
`colors`	`readonly QuantizedColor[]`	—	Colors to export
`prefix`	`string`	`"color"`	Variable prefix

paletteToScss(colors);
// "$color-1: #c2704a;\n$color-2: #2663a6;"