Generate a polished SVG color palette card with labeled swatches.
Page context
SVG Color Palette Generator creates a labeled swatch card as SVG markup.
The first version generates a practical five-color palette card with labeled hex values.
Use palette SVGs in design notes, style guides, documentation, or visual token references.
Generate a polished SVG color palette card with labeled swatches.
<svg xmlns="http://www.w3.org/2000/svg" width="464" height="176" viewBox="0 0 464 176" role="img" aria-label="Palette"><rect width="464" height="176" rx="20" fill="#ffffff"/><text x="24" y="32" font-family="Inter, Arial, sans-serif" font-size="18" font-weight="700" fill="#0f172a">Palette</text><g><rect x="24" y="56" width="64" height="64" rx="12" fill="#0f766e"/><text x="56" y="142" text-anchor="middle" font-family="Inter, Arial, sans-serif" font-size="11" fill="#334155">#0f766e</text></g><g><rect x="108" y="56" width="64" height="64" rx="12" fill="#14b8a6"/><text x="140" y="142" text-anchor="middle" font-family="Inter, Arial, sans-serif" font-size="11" fill="#334155">#14b8a6</text></g><g><rect x="192" y="56" width="64" height="64" rx="12" fill="#f59e0b"/><text x="224" y="142" text-anchor="middle" font-family="Inter, Arial, sans-serif" font-size="11" fill="#334155">#f59e0b</text></g><g><rect x="276" y="56" width="64" height="64" rx="12" fill="#0f172a"/><text x="308" y="142" text-anchor="middle" font-family="Inter, Arial, sans-serif" font-size="11" fill="#334155">#0f172a</text></g><g><rect x="360" y="56" width="64" height="64" rx="12" fill="#f8fafc"/><text x="392" y="142" text-anchor="middle" font-family="Inter, Arial, sans-serif" font-size="11" fill="#334155">#f8fafc</text></g></svg>