Palette Studio Colour circles · copy as HTML or SVG · paste into Elementor

1 · Colours

2 · Pick from an image

Drop an image here

or browse  ·  you can also paste one with Ctrl + V

3 · Look

Preview

Wraps on small screens. Best all-round choice.

SVG and PNG are exported with a transparent background.

How to use this

  1. Build the palette. Set how many circles you want, then give each one a colour — type a hex code, use the colour picker, or drop in an image and click the colours you want.
  2. Style it. Size, gap, rounding, an optional stroke on any circle, optional labels.
  3. Copy the snippet with the button under the code.
  4. In Elementor, drop an HTML widget inside your container and paste. That is all — no plugin, no stylesheet, nothing to enqueue.

HTML or SVG?

HTML (divs) uses flexbox with inline styles. It wraps onto a second line on narrow screens, and every style is scoped to its own element so it cannot clash with your theme.

Inline SVG is a single element that scales without ever pixelating and keeps its exact layout. Use it when the palette must stay on one line, or when you want the same graphic for print.

Transparent background

The snippet never sets a background of its own, so it sits on whatever colour or image your Elementor section already uses. The PNG export is transparent too.

Privacy

Everything runs on this device. Images you drop in are read in the browser and never uploaded anywhere.