json

JSON Generator

Portable JSON design tokens.

Randomize a palette, pick each swatch, or build a harmony from a base color — then export JSON tokens.

Palette builder

Pick colors or randomize

Generate from a base color

Base

Harmony

Token name

Export

Developer code

{
  "name": "brand",
  "colors": [
    {
      "id": "brand-1",
      "hex": "#e11d48",
      "rgb": {
        "r": 225,
        "g": 29,
        "b": 72
      },
      "hsl": "hsl(347, 77%, 50%)",
      "oklch": "oklch(0.5858 0.2221 17.59)"
    },
    {
      "id": "brand-2",
      "hex": "#db2777",
      "rgb": {
        "r": 219,
        "g": 39,
        "b": 119
      },
      "hsl": "hsl(333, 71%, 51%)",
      "oklch": "oklch(0.5916 0.218 0.58)"
    },
    {
      "id": "brand-3",
      "hex": "#c026d3",
      "rgb": {
        "r": 192,
        "g": 38,
        "b": 211
      },
      "hsl": "hsl(293, 69%, 49%)",
      "oklch": "oklch(0.5915 0.2569 322.89)"
    },
    {
      "id": "brand-4",
      "hex": "#f59e0b",
      "rgb": {
        "r": 245,
        "g": 158,
        "b": 11
      },
      "hsl": "hsl(38, 92%, 50%)",
      "oklch": "oklch(0.7686 0.1647 70.08)"
    },
    {
      "id": "brand-5",
      "hex": "#111827",
      "rgb": {
        "r": 17,
        "g": 24,
        "b": 39
      },
      "hsl": "hsl(221, 39%, 11%)",
      "oklch": "oklch(0.2101 0.0317 264.58)"
    }
  ]
}