How to Export or Share a Palette from Tint & Shade Generator

Updated

Tint & Shade Generator can export a generated palette in Hex, #Hex, RGB, CSS, or JSON, and it can also produce a shareable link that opens the same palette for someone else. Both options appear on the page as Export palettes and Share link. To use either one, you first need at least one valid hex color entered — the tool states: "Please enter at least one valid hex color."

Before you export or share

The generator works from hex input, so the palette has to exist before any export or share action is useful.

  1. Enter one or more hex colors in the input field. Multiple colors are separated by spaces.
  2. Optionally use Pick a color to choose a color visually instead of typing a hex value.
  3. Choose how many steps to generate: 5, 10, or 20.
  4. Decide whether to show hashtags with the Show hashtags option.

Once a valid hex color is present, the palette is generated and the export and share controls become relevant.

Exporting the palette

The Export palettes section offers these formats:

Format What it gives you Typical use
Hex Color values without the # prefix Design tools or systems that expect bare hex
#Hex Color values with the # prefix CSS, HTML, and most design software
RGB Red, green, blue values Code or tools that work in RGB
CSS Ready-to-use CSS color declarations Dropping into a stylesheet
JSON Structured color data Passing into a build step, script, or design token file

Pick the format that matches where the palette is going. If you are handing colors to a developer, CSS or JSON usually avoids reformatting. If you are pasting into a design tool, #Hex or RGB is often the quickest.

Sharing a palette with a link

The Share link section produces a Shareable link. Opening that link shows the same palette, so you can send it to a collaborator instead of describing the colors or re-entering them.

Use this when:

  • A designer and developer need to look at the same set of tints and shades.
  • You want to keep a palette for later without saving a file.
  • You are discussing a specific color range and want the other person to see exactly what you see.

Matching other tools

The tool is described as making tints and shades that match the output of Chrome DevTools, Sass, Less, and PostCSS. That matters for export: if your project generates its palette through one of those tools, the exported values here should line up with what your build already produces, so you can compare or hand off without a mismatch.

Common snags

  • Nothing to export yet: If no valid hex color is entered, the tool asks for at least one. Add a color first.
  • Wrong format for the destination: Hex without # will not paste cleanly into CSS. Use #Hex, CSS, or JSON depending on the target.
  • Too few or too many steps: The 5 / 10 / 20 choice controls how many tints and shades you get. Pick the count that matches the range you actually need before exporting.
  • Hashtag mismatch: If your output needs # prefixes, turn on Show hashtags; otherwise the values may not be usable as-is.