Tailwind Shades

Generates a full Tailwind CSS palette (50-950) from one color, ready to paste. Call it whenever you add a color to a Tailwind theme (e.g. "add a brand color #db4d53"), instead of writing a single variable or inventing shades. The input color stays exactly at its best-fit shade, and the other shades follow the closest Tailwind color, so they look like Tailwind's own.

{
  "type": "object",
  "properties": {
    "color": {
      "type": "string",
      "description": "Any CSS color: hex (#db4d53), rgb(), hsl(), oklch() or a named color"
    },
    "name": {
      "description": "Color name used in the code, e.g. \"brand\". Defaults to the closest Tailwind color, which replaces Tailwind's own palette of that name (e.g. red), so pass a name unless that is what the user wants",
      "type": "string",
      "pattern": "^[a-z][a-z0-9-]*$"
    },
    "tailwindVersion": {
      "description": "The project's Tailwind CSS major version. Defaults to 4",
      "type": "number",
      "enum": [
        4,
        3,
        2,
        1
      ]
    },
    "format": {
      "description": "Color format. Defaults to oklch for v4 and hex for older versions",
      "type": "string",
      "enum": [
        "oklch",
        "hex",
        "rgb"
      ]
    },
    "output": {
      "description": "theme: a v4 @theme block for the main CSS file. config: an object for theme.extend.colors in tailwind.config.js. css: plain CSS variables. Defaults to theme for v4 and config for older versions",
      "type": "string",
      "enum": [
        "theme",
        "config",
        "css"
      ]
    }
  },
  "required": [
    "color"
  ],
  "$schema": "https://json-schema.org/draft/2020-12/schema"
}

{
  "type": "object",
  "properties": {
    "code": {
      "type": "string",
      "description": "The palette as code, ready to paste"
    },
    "name": {
      "type": "string"
    },
    "tailwindVersion": {
      "type": "number"
    },
    "format": {
      "type": "string"
    },
    "output": {
      "type": "string"
    },
    "inputShade": {
      "type": "number",
      "description": "Shade that holds the input color unchanged, e.g. 500"
    },
    "closestTailwindColor": {
      "type": "string",
      "description": "Tailwind color whose curve the palette follows"
    },
    "shades": {
      "type": "array",
      "items": {
        "type": "object",
        "properties": {
          "shade": {
            "type": "number"
          },
          "value": {
            "type": "string"
          }
        },
        "required": [
          "shade",
          "value"
        ],
        "additionalProperties": false
      }
    },
    "replacesTailwindColor": {
      "type": "boolean",
      "description": "True when the code replaces a default Tailwind palette (default color name, theme or config output)"
    }
  },
  "required": [
    "code",
    "name",
    "tailwindVersion",
    "format",
    "output",
    "inputShade",
    "closestTailwindColor",
    "shades",
    "replacesTailwindColor"
  ],
  "$schema": "https://json-schema.org/draft/2020-12/schema",
  "additionalProperties": false
}

Finds the shade in Tailwind's default palette that looks most like a given color, e.g. #db4d53 -> red-500. Use it to pick an existing Tailwind class (bg-red-500) instead of an arbitrary value. If the difference is visible, use generate_palette to add the exact color as a custom palette instead.

{
  "type": "object",
  "properties": {
    "color": {
      "type": "string",
      "description": "Any CSS color: hex (#db4d53), rgb(), hsl(), oklch() or a named color"
    },
    "tailwindVersion": {
      "description": "The project's Tailwind CSS major version. Defaults to 4",
      "type": "number",
      "enum": [
        4,
        3,
        2,
        1
      ]
    }
  },
  "required": [
    "color"
  ],
  "$schema": "https://json-schema.org/draft/2020-12/schema"
}

{
  "type": "object",
  "properties": {
    "name": {
      "type": "string",
      "description": "Tailwind color name, e.g. \"red\""
    },
    "shade": {
      "type": "number",
      "description": "Closest shade, e.g. 500"
    },
    "className": {
      "type": "string",
      "description": "Color part of a utility class, e.g. \"red-400\" for bg-red-400"
    },
    "tailwindValue": {
      "type": "object",
      "properties": {
        "oklch": {
          "type": "string"
        },
        "hex": {
          "type": "string"
        }
      },
      "required": [
        "oklch",
        "hex"
      ],
      "additionalProperties": false,
      "description": "Tailwind's value for that shade"
    },
    "input": {
      "type": "object",
      "properties": {
        "oklch": {
          "type": "string"
        },
        "hex": {
          "type": "string"
        }
      },
      "required": [
        "oklch",
        "hex"
      ],
      "additionalProperties": false,
      "description": "The input color"
    },
    "distance": {
      "type": "number",
      "description": "OKLab distance: 0 is identical, under 0.02 is hard to see"
    },
    "visiblyDifferent": {
      "type": "boolean",
      "description": "True when the Tailwind shade looks different from the input"
    },
    "tailwindVersion": {
      "type": "number"
    }
  },
  "required": [
    "name",
    "shade",
    "className",
    "tailwindValue",
    "input",
    "distance",
    "visiblyDifferent",
    "tailwindVersion"
  ],
  "$schema": "https://json-schema.org/draft/2020-12/schema",
  "additionalProperties": false
}

Looks up Tailwind's own default colors, exactly as Tailwind defines them: a whole color (e.g. "blue", all shades) or one shade (e.g. "slate-500"), for Tailwind v4, v3, v2 or v1. Use it instead of writing default Tailwind color values from memory. Values are oklch() in v4 and hex in older versions.

{
  "type": "object",
  "properties": {
    "name": {
      "type": "string",
      "description": "A default Tailwind color, like \"blue\", or one shade of it, like \"blue-500\""
    },
    "tailwindVersion": {
      "description": "The project's Tailwind CSS major version. Defaults to 4",
      "type": "number",
      "enum": [
        4,
        3,
        2,
        1
      ]
    }
  },
  "required": [
    "name"
  ],
  "$schema": "https://json-schema.org/draft/2020-12/schema"
}

{
  "type": "object",
  "properties": {
    "name": {
      "type": "string",
      "description": "Tailwind color name, e.g. \"blue\""
    },
    "tailwindVersion": {
      "type": "number"
    },
    "shades": {
      "type": "array",
      "items": {
        "type": "object",
        "properties": {
          "shade": {
            "type": "number"
          },
          "className": {
            "type": "string",
            "description": "Color part of a utility class, e.g. \"blue-500\" for bg-blue-500"
          },
          "value": {
            "type": "string",
            "description": "Tailwind's value: oklch() in v4, hex in older versions"
          }
        },
        "required": [
          "shade",
          "className",
          "value"
        ],
        "additionalProperties": false
      },
      "description": "All shades, or only the one asked for"
    }
  },
  "required": [
    "name",
    "tailwindVersion",
    "shades"
  ],
  "$schema": "https://json-schema.org/draft/2020-12/schema",
  "additionalProperties": false
}

Lists the names of Tailwind's default colors for a Tailwind version (e.g. red, slate, mauve in v4), with the shades each one has and its 500 value as a sample. Use it to see which colors exist before calling get_tailwind_palette or picking a utility class.

{
  "type": "object",
  "properties": {
    "tailwindVersion": {
      "description": "The project's Tailwind CSS major version. Defaults to 4",
      "type": "number",
      "enum": [
        4,
        3,
        2,
        1
      ]
    }
  },
  "$schema": "https://json-schema.org/draft/2020-12/schema"
}

{
  "type": "object",
  "properties": {
    "tailwindVersion": {
      "type": "number"
    },
    "shades": {
      "type": "array",
      "items": {
        "type": "number"
      },
      "description": "Shades every color has, e.g. 50 to 950"
    },
    "colors": {
      "type": "array",
      "items": {
        "type": "object",
        "properties": {
          "name": {
            "type": "string",
            "description": "Color name, e.g. \"red\""
          },
          "sample": {
            "type": "string",
            "description": "Tailwind's 500 value: oklch() in v4, hex in older versions"
          }
        },
        "required": [
          "name",
          "sample"
        ],
        "additionalProperties": false
      }
    }
  },
  "required": [
    "tailwindVersion",
    "shades",
    "colors"
  ],
  "$schema": "https://json-schema.org/draft/2020-12/schema",
  "additionalProperties": false
}

Converts any CSS color to oklch(), hex and rgb, formatted like Tailwind (oklch() is what Tailwind v4 uses). Colors outside a format are mapped into it: oklch() to Display P3 like Tailwind's palette, hex and rgb to sRGB. Use it for one value; to add a color with all its shades, call generate_palette instead.

{
  "type": "object",
  "properties": {
    "color": {
      "type": "string",
      "description": "Any CSS color: hex (#db4d53), rgb(), hsl(), oklch() or a named color"
    }
  },
  "required": [
    "color"
  ],
  "$schema": "https://json-schema.org/draft/2020-12/schema"
}

{
  "type": "object",
  "properties": {
    "oklch": {
      "type": "string",
      "description": "e.g. oklch(61.6% 0.177 21.62)"
    },
    "hex": {
      "type": "string",
      "description": "e.g. #db4d53"
    },
    "rgb": {
      "type": "string",
      "description": "e.g. rgb(219, 77, 83)"
    }
  },
  "required": [
    "oklch",
    "hex",
    "rgb"
  ],
  "$schema": "https://json-schema.org/draft/2020-12/schema",
  "additionalProperties": false
}