ForHosting KIT · Images

Color swatch SVG generator

Get a ready-made color chip for docs and legends: #3498db becomes a 24 by 24 SVG square filled with that color and labeled for screen readers. Adjust width, height and rounded corners when you need to. Free in your browser.

Free
Runs in your browser
No sign-up
Your data stays on your device

Run — free How it works & API

Use it from WebAPIEmailTelegramApp soon

Worked example

If you enter

Color: #3498db

You get

Hex: #3498db
Hex raw: #3498db
Resistance (Ω): 52
G: 152

Design systems, style guides, and technical docs constantly need a tiny colored rectangle next to a hex code so readers can see brand blue, status red, or chart series colors without opening a separate palette tool. Hand-writing SVG every time invites typos in fill attributes, mismatched dimensions across a legend, and invalid hex that only fails later in the browser. This color swatch SVG generator accepts a hex color, optional width and height, and an optional corner radius, validates the inputs, and returns a deterministic inline SVG markup string you can paste into Markdown, HTML docs, or component storybooks.

What a color swatch SVG is and when you need one

A color swatch is a small filled rectangle that stands for a single color token: primary brand, danger state, chart series A, or a palette step in a design system. On the web the most portable representation is an inline SVG element with a single rect whose fill matches a normalized hex code. Unlike a raster PNG chip, SVG scales crisply in retina docs, prints cleanly, and embeds in Markdown renderers that allow raw HTML or SVG.

Unlike a CSS background on a span, the markup is self-contained: you can copy one string into a README, a Confluence page, an email template that allows SVG, or a Storybook note without shipping a stylesheet. Teams that publish component libraries often need dozens of identical chips that differ only by fill and label; generating them by hand is tedious and error-prone, especially when authors mix three-digit shorthand, uppercase, and missing hash prefixes.

This capability standardizes that chip: you send a color string, get back a fixed SVG with width, height, viewBox, role, and an accessible aria-label, plus the expanded six-digit hex and RGB channels for tables next to the graphic. Optional corner radius supports modern UI chips without forcing every caller to hand-edit path data.

What you enter and what you get back

Three-digit shorthand such as #abc expands to #aabbcc and is lowercased for a stable contract. Optional width and height are integers from one to five hundred twelve inclusive; omit them to get the default twenty-four by twenty-four chip used in dense legends. Optional rx sets a corner radius; it must be a finite number greater than or equal to zero and not larger than half of the smaller side, with default zero for sharp corners.

The SVG root always includes the SVG namespace, matching width and height attributes, a viewBox of zero zero width height, role equals img, and an aria-label that includes the normalized hex for screen readers. The single rect uses the same width and height with fill set to the normalized hex, and includes rx only when the radius is greater than zero so sharp-corner goldens stay minimal. Attribute order is fixed so byte-for-byte comparison in tests remains stable across JavaScript engines.

Where a ready-made color chip helps

Legend builders for charts and maps need identical chip sizes with different fills; fixing width and height while varying only color keeps alignment predictable in tables and flex rows. Design QA bots can regenerate every swatch from a token file in CI and fail the build when markup drifts, catching accidental uppercasing or missing hash prefixes before release notes ship.

Keep requests small, pin the svg field in goldens, and you get reproducible chips for READMEs, style guides, CMS blocks, and edge-rendered marketing pages without standing up an image pipeline or rasterizing colors to PNG for every token change.

What you can do with it

Design-token documentation chips

Generate a consistent SVG swatch for each brand or status color in a style guide so readers see the fill next to the hex code.

Chart and map legends

Build fixed-size color chips for series legends and choropleth keys with validated hex fills and optional rounded corners.

FAQ

What hex formats does the color swatch SVG generator accept?

Three- or six-digit hexadecimal colors, with or without a leading #, case-insensitive. Shorthand such as #abc expands to #aabbcc.

What are the default swatch dimensions?

Default width and height are both 24 SVG user units. You may set either or both to any integer from 1 to 512 for denser or larger chips.

How do I make a rounded swatch?

When rx is 0 or omitted, the rect has sharp corners and no rx attribute.

Can screen readers tell which color the swatch shows?

Yes. Each swatch is marked as an image and carries a label with its hex code, such as Color swatch #3498db, so a screen reader announces the color instead of skipping it.

Can I paste the swatch into a README or Markdown page?

Yes, wherever the renderer allows raw HTML or SVG. The swatch is one self-contained piece that needs no stylesheet, and it stays crisp on sharp screens and in print.

Related tools

For developers — API access

Everything on this page is available programmatically. This section is for teams who want to wire it into their own systems; everyone else can just use the tool above.

API endpoint

POSThttps://api.kit.forhosting.com/color/swatch-svg

Prefer to automate it? One authenticated POST creates the task; the result comes back by webhook or a signed link. The same capability also runs here on the web, by email and from Telegram — and soon from our app too.

Call it from your stack

curl -X POST https://api.kit.forhosting.com/color/swatch-svg \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"color":"#3498db"}'

const res = await fetch("https://api.kit.forhosting.com/color/swatch-svg", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "color": "#3498db"
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/color/swatch-svg",
    headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
    json={
    "color": "#3498db"
},
)
task_id = res.json()["task_id"]

<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/swatch-svg", false, stream_context_create([
  "http" => [
    "method"  => "POST",
    "header"  => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
    "content" => '{"color":"#3498db"}',
  ],
]));
$task = json_decode($res, true);

body := bytes.NewBufferString(`{"color":"#3498db"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/swatch-svg", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)

Example request

{
  "color": "#3498db"
}

Example response

{
  "task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
  "type": "color.swatch_svg",
  "status": "queued",
  "_links": {
    "result": "/tasks/tsk_…/result"
  }
}

The API is asynchronous: the call returns a task_id immediately and the result arrives by webhook. Polling is capped at 1 req/s per task.

Pricing

Per request$0.002

Published price — no tokens, no invented credits. A failed task is never charged.

Errors

HTTP	Code	Meaning
`401`	`unauthorized`	Missing or invalid API key.
`402`	`insufficient_balance`	Your balance doesn't cover the task price.
`404`	`unknown_type`	That task type doesn't exist.
`429`	`rate_limited`	Too many requests. Use the webhook instead of polling.

Technical notes

Failed validation is reported as invalid_input and is not billed, which keeps automated legend builders safe when a CMS field still holds a draft color name instead of a hex code.

Input contract, validation rules, and response fields

POST a JSON object with a required color field: a hex string of three or six hexadecimal digits, with or without a leading hash. Aliases hex, fill, value, text, and input are accepted for the same field so form widgets and scripts can reuse common names. Invalid lengths, non-hex characters, 0x prefixes, bare numbers, and empty strings fail with invalid_input naming the problem. On success the body echoes the normalized color as both color and hex, the original trimmed hex_raw, integer channels r, g, and b, the resolved width, height, and rx, a view_box string, a shorthand flag, a short message, and the SVG string twice as svg and markup so clients that expect either name can bind without mapping.

Where an SVG color swatch API earns its keep

Documentation generators that turn design tokens into human pages can call this endpoint once per token and inject the returned markup next to the token name, hex value, and usage note without inventing SVG templates per framework.

Integration use cases

CI-checked README and Storybook notes

Regenerate inline SVG swatches from a token JSON file in continuous integration and fail when markup or colors drift.

Technical questions

What does the response include besides the SVG markup?

Normalized #rrggbb color, original hex_raw, RGB channels, width, height, rx, view_box, a shorthand flag, a short message, and the same markup under both svg and markup keys.

What does the color swatch SVG generator cost?

The browser tool is free. API requests use prepaid KIT balance at $0.002 per successful call; invalid input is not billed.

Read the full KIT documentation →

Run — free