I answer more support emails about color than about any actual bug in TriangleBG, which tells you something. People will happily fiddle with triangle size and gradient direction on their own, but the moment it’s time to pick colors, I get messages like “why does my background look cheap” or “how do I make it look like yours.” So let’s actually fix that, without pretending you need to learn color theory from scratch.
Why three random colors almost never work
If you pick three colors you individually like — say, a nice blue, a nice orange, and a nice green — and put them next to each other, the result usually looks like a children’s app rather than a professional background. This isn’t bad taste on your part. It’s because each of those colors was probably chosen at full saturation, and full-saturation colors fight each other for attention. Nothing recedes, nothing leads, and your eye doesn’t know where to rest.
The fix that actually works, and that I use for every default palette in the editor, is to stop picking three unrelated colors and start picking one color family and varying its lightness. Take a single hue, then generate a dark version, a mid version, and a light version of roughly the same hue. That’s it. It’s boring advice, but it’s boring because it works close to 100% of the time, and every “Ocean” or “Forest” palette you see in a template gallery is built exactly this way.
The method, step by step
- Pick one base hue that fits your brand or mood — a blue for trust and tech, a green for growth or sustainability, a warm orange or red for energy.
- Generate a dark shade of it (add black, or drop the lightness to around 20-25%). This becomes your deepest triangle color, usually the one furthest from the light source in the gradient.
- Generate a light shade (add white, or push lightness to 75-85%). This becomes your highlight color.
- Keep the original mid-tone as your third color, sitting between the two.
You now have a gradient that reads as intentional instead of random, because all three colors share the same hue and just differ in how much light they carry. If you want to skip the manual math, Coolors has a shade generator that does this instantly — drop in a hex code and it spits out the full lightness range for that hue.
When two hues actually work
Single-hue palettes are the safe default, but sometimes you do want two colors, like a blue fading into a purple for something that feels more premium or nighttime. The trick there is to pick hues that sit close together on the color wheel — blue to purple, orange to red, teal to green — rather than opposite each other. Complementary colors (opposite on the wheel, like blue and orange) can look great in small doses, like a single accent button, but across dozens of adjacent triangles they tend to vibrate and feel busy. Adjacent hues blend into each other in the gradient instead of fighting.
The mistake almost everyone makes: forgetting the text
This is the one that actually causes real problems, not just aesthetic ones. If you’re putting a headline or button on top of your background, contrast isn’t optional, it’s an accessibility requirement. The Web Content Accessibility Guidelines call for a contrast ratio of at least 4.5:1 between text and its background for normal-sized text. A busy triangle pattern with high contrast between its own colors makes this genuinely hard to hit, because the “background” isn’t one color, it’s dozens of different ones under different parts of your text.
Three ways I handle this in practice, roughly in order of how often I reach for them:
- Drop the pattern intensity so triangle-to-triangle contrast is low. The pattern still reads as texture but stops competing with the text sitting on top of it.
- Add a solid or gradient overlay (a semi-transparent black or dark panel) behind the text block specifically, rather than trying to make the whole background text-safe.
- Push the entire palette toward one end of the lightness scale — all dark shades with white text, or all light shades with dark text — so contrast is baked into the palette itself instead of something you have to patch afterward.
Before shipping, I drop the actual hex values into WebAIM’s contrast checker against the darkest and lightest triangle colors your text might overlap. If it fails against the darkest one, it’ll fail somewhere on the page eventually, even if it looked fine when you eyeballed one screenshot.
Matching an existing brand instead of starting from scratch
If you already have brand colors, don’t introduce new ones just for the background. Take your existing primary color, generate the light/dark range from that single hue using the method above, and use it. A background that’s clearly derived from the same color as your logo and buttons reads as cohesive. A background in an unrelated hue, even a nice one, reads as an afterthought, like it was picked from a template instead of built for the site.
Trying it without the guesswork
This is exactly why I built the palette system in the editoraround a small set of pre-built single-hue and adjacent-hue palettes, plus the option to drop in your own hex codes and see the gradient update instantly. If you’re not confident picking colors from scratch, start from one of the built-in palettes, swap the base hue for something close to your brand color, and adjust from there. It’s a lot faster than starting from a blank hex input and hoping for the best, and you can preview the contrast against real text before you commit to anything.
The short version
Pick one hue, not three. Vary the lightness, not the color. Keep adjacent hues if you want two. And always check contrast against your actual text before you ship, not after someone tells you they can’t read your hero headline on their phone.