# Trianglify UI — Examples

> Hands-on workflows with Trianglify UI: a background in your brand colors, reproducing a pattern by seed, embedding it as a CSS background, and exporting a 4K PNG.

Source: https://www.jpkc.com/db/en/tools/trianglify/examples/

Back to the overview: [Trianglify UI](https://www.jpkc.com/db/en/tools/trianglify/) · Open the tool live: [www.jpkc.com/tools/trianglify/](https://www.jpkc.com/tools/trianglify/)

The [manual](https://www.jpkc.com/db/en/tools/trianglify/manual/) explains every setting and value range in detail. This page adds **concrete workflows** — typical tasks played through step by step. The tool's interface is in English, so the control and button names appear exactly as in the UI.

## Example 1: A background in your brand colors

You need a hero background that matches your corporate design — not just some random colorful palette.

1. Open [Trianglify UI](https://www.jpkc.com/tools/trianglify/) and turn on the **Use custom color gradient** switch. This disables the palette dropdown.
2. Click the **Start Color** field and enter your first brand color as a hex value (e.g. a dark brand blue). Repeat for **End Color** with a second, harmonizing color.
3. Set **Cell Size** to a mid value (say 75) and **Variance** to taste — lower for a calm pattern, higher for a lively one.
4. The preview updates instantly. Happy with it? You now have a background in exactly your colors.

Tip: if you don't have your brand's exact hex values handy, find them with the [Colors](https://www.jpkc.com/db/en/tools/colors/) tool (color picker and palette extractor).

## Example 2: Reproducing a pattern by seed

You found a pattern in the preview that you want to keep and restore exactly later.

1. Click the **shuffle icon** next to the seed field. The tool sets a random 8-character seed and renders a new pattern. Reroll until you like the result.
2. **Note the seed** (it's in the field and shown as a "Seed: …" badge in the preview). Together with palette, cell size, and variance, it describes the pattern completely.
3. To restore it — on another machine or weeks later — type the same seed into the field and set the same values. You get **exactly the same pattern** back.

That's the key difference from an empty seed field: without a seed, every click on **Generate Pattern** produces a new random variant you can't get back.

## Example 3: Embedding it as a CSS background

You want to use the pattern directly in your stylesheet, without a separate image file.

1. Create the pattern you want in the preview (ideally with a seed set, see Example 2).
2. Expand the **Base64 Data URLs** section at the bottom and click **Copy** on **SVG Data URL**. The full `data:image/svg+xml;base64,…` string is now on your clipboard.
3. Drop it into your CSS:

```css
.hero {
	background-image: url("data:image/svg+xml;base64,…");
	background-size: cover;
	background-position: center;
}
```

Because the SVG sits inline in the CSS, this saves an extra HTTP request. Note: the data URL reflects the **preview resolution** — for a CSS `background` with `background-size: cover` that's exactly right, since the vector SVG scales losslessly anyway.

## Example 4: Exporting a 4K PNG hero image

For a presentation backdrop or a wallpaper, you need a high-resolution bitmap.

1. Create your pattern and scroll to the **Export** card.
2. In **Export Resolution**, pick **4K (3840 × 2160)** — or **Custom…** and enter your own size (up to 8192 px per side).
3. Click **Download PNG**. The tool renders the pattern freshly at the chosen resolution and downloads the file as `trianglify-<seed>-3840x2160.png`.

Important: the export is recomputed at full resolution. For the exported image to match what you saw in the preview, a **seed must be set** — without one the result differs. Keep in mind that a larger area at the same cell size contains more triangles than the small preview; raise the cell size a bit for the export if needed.

## Example 5: Using a specific ColorBrewer palette

You don't need a custom brand scheme but a proven, balanced color scheme.

1. Leave **Use custom color gradient** off and open the **Color Palette** dropdown.
2. From the **Sequential** group pick a single-hue progression (e.g. *Blues* or *Greens*) for a calm, professional look — or from **Diverging** a high-contrast palette (e.g. *Spectral* or *RdYlBu*) for a livelier pattern.
3. Play with Cell Size and Variance until the balance is right, then export as in Example 3 (CSS) or 4 (PNG).

The 27 palettes come from ColorBrewer and are designed for good distinguishability — a quick shortcut to a coherent result without mixing colors yourself.

---

There's more depth: the [overview](https://www.jpkc.com/db/en/tools/trianglify/) for the big picture, the [manual](https://www.jpkc.com/db/en/tools/trianglify/manual/) for every option, and the [tips & tricks](https://www.jpkc.com/db/en/tools/trianglify/tips/) for tricks and pitfalls. You can try everything right in the [tool](https://www.jpkc.com/tools/trianglify/).