Can I embed the SVG in a README?

Yes. GitHub renders SVG images in README files. You can commit the .svg file and reference it, or use an inline data URI. Inline SVG also works in Markdown rendered by most platforms.

Is inline SVG accessible?

The SVG output includes role=img and an aria-label describing the palette. If you need more detail, add a and element, or provide adjacent text with the hex values.

Can I edit the SVG after export?

Yes. The SVG is a plain text file with and elements. You can edit colors, swap fonts, add labels or combine it with other SVG content in any text editor or vector tool.

SVG Color Generator — Palettes as Scalable SVG

Q: Why export a palette as SVG?

SVG scales without pixelation, is small, works in README files, prints cleanly, and can be embedded inline in HTML or served as a standalone file. It is ideal for documentation and previews.

Base color

Palette name Used in the SVG aria-label

Why export a palette as SVG?

Scales cleanly to any size — retina, print or 8K display.
Small file size — a full palette is typically under 2 KB.
Renders in GitHub README files, Markdown docs and printed PDFs.
Editable — the output is plain text and uses standard <rect> and <text> elements.

Embedding the SVG

In a README (external file)

![Palette](./assets/palette.svg)

Inline in HTML

<div class="palette-preview">
  <svg role="img" aria-label="Primary color scale" viewBox="0 0 1100 60">
    <rect x="0" y="0" width="100" height="60" fill="#eef2ff" />
    <rect x="100" y="0" width="100" height="60" fill="#e0e7ff" />
    <!-- … -->
  </svg>
</div>

As a data URI

background-image: url("data:image/svg+xml;utf8,<svg ...></svg>");

Editing the SVG

The exported SVG uses a simple structure that is easy to modify:

Each color is a <rect> with a fill attribute.
Labels are <text> elements you can restyle.
Change the viewBox to control aspect ratio.

Frequently asked questions

Does GitHub render SVG in READMEs?

Yes. GitHub renders SVG images referenced by relative path or by URL. SVG files must not contain scripts, and external references are blocked, but the output of this generator is fully self-contained.

Can I use the SVG in emails?

Most desktop email clients do not render SVG. If your audience reads emails on desktop, convert the SVG to PNG first. Mobile clients vary; SVG works in some but not all.

Is the SVG accessible?

The generator includes role="img" and an aria-label naming the palette. For strict accessibility, add a <title> element inside the SVG, or provide adjacent text with the hex values.

Can I edit the SVG in Figma or Illustrator?

Yes. Both tools import SVG. The palette will appear as a group of rectangles with the exact fills you generated, fully editable.

Related tools

JSON Generator

Export palettes as JSON for code.

Token Generator

W3C design tokens JSON.

Developer Toolkit

All exports in one interface.

Palette Generator

Generate palettes to export.