Palettes

buttery's gradient and solid color presets, for backdrops, covers and anything a person picks a color for.

The palettes are 24 gradient presets and the solid colors taken from them, made to sit well together. Use them where a person picks a color, such as a card's backdrop or a workspace's cover, rather than for interface colors, which come from the color tokens.

Use a preset

Import them from @butteryui/core/palettes. gradientCss turns a gradient into a CSS background, blended in OKLab at 135° unless you pass another angle:

import type { ReactElement } from "react";
import { gradientCss, gradients } from "@butteryui/core/palettes";

const LILAC = gradients.find((preset) => preset.id === "lilac");

export function Cover(): ReactElement {
  return (
    <div
      className="cover"
      style={{ background: LILAC ? gradientCss(LILAC) : undefined }}
    />
  );
}

SwatchGrid shows the presets as a picker.

The presets

The gradients come in four rows of six. The first three share six hue families, one to a column: butter, apricot, rose, lilac, sky and mint. Every stop shifts lightness, chroma and hue a little toward its neighbor, so the blends stay soft.

The 18 solids are the midpoints of the cream, deep and neutral gradients, mixed in OKLab. Every preset, with its OKLCH and hex values: