Skip to content

Web

SVG Color Reference

SVG presentation attributes and CSS properties accept HEX, rgb(), and currentColor for icons that inherit text color. Spec reference: Documentation.

Open color converter →

Starter template

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <circle cx="12" cy="12" r="10" fill="#7C3AED" stroke="#5B21B6" stroke-width="2"/>
</svg>

Color samples

FAQ

fill attribute vs CSS fill?

Presentation attributes (fill="#7C3AED") work inline. CSS fill: in a stylesheet is easier to theme with currentColor for icon systems.

When should I use currentColor?

Use fill="currentColor" when the icon should inherit text color from the parent — common in React/Vue components.

Can I copy the syntax chips?

Yes — click the secondary chip to copy platform syntax. HEX and RGB chips copy sRGB values for mockups, design handoff, and ChromaXP tools.

Are RGB and CMYK print-ready?

RGB and CMYK here are computed from HEX for quick reference. For ink and paper, re-check against your print profile or Pantone bridge.