DEV Community: Byte Vancer

How to Generate Random Colors in JavaScript (Without the Muddy Results)

Byte Vancer — Mon, 20 Jul 2026 15:39:47 +0000

Generating a random color sounds trivial — and the one-liner everyone reaches for
is trivial. The problem is it produces a lot of muddy, low-contrast, unusable colors.
Let's start with the classic trick, see why it disappoints, and then generate colors
that actually look good (and stay readable). Code is plain JS you can paste into a
console.

The classic one-liner (and its bug)

const randomHex = () =>
  "#" + Math.floor(Math.random() * 0xffffff).toString(16).padStart(6, "0");

randomHex(); // "#3a9f21"

One thing people forget: padStart(6, "0"). Without it, a small number like
0x0042ff becomes "42ff" — a 4-character string that's an invalid color. That's the
source of the occasional "why is my random color broken?" bug. Always pad to 6 hex
digits.

But even when it's correct, this approach has a deeper issue.

Why uniform RGB looks muddy

Math.random() * 0xffffff picks a point uniformly in RGB space. The trouble is that
most of RGB space is unattractive — desaturated browns, grays, and muddy
mid-tones. You'll get the occasional nice color, but also a steady stream of sludge,
and colors with wildly different brightness, so a set of them has no visual harmony.

If you just need a color and don't care how it looks, uniform RGB is fine. If you're
generating colors a human will see — avatars, tags, charts, backgrounds — you want
more control. That's where HSL comes in.

Generate pleasant colors with HSL

HSL (hue, saturation, lightness) lets you randomize the hue (which color) while
pinning saturation and lightness to ranges that always look good:

function randomPleasantColor() {
  const h = Math.floor(Math.random() * 360);   // any hue
  const s = 60 + Math.random() * 20;           // 60–80% — vivid, not neon
  const l = 45 + Math.random() * 10;           // 45–55% — mid, readable
  return `hsl(${h} ${s.toFixed(0)}% ${l.toFixed(0)}%)`;
}

randomPleasantColor(); // "hsl(214 72% 51%)"

Because saturation and lightness stay in a tasteful band, every color this returns
is usable. Want pastels? Push lightness up (80–90%) and saturation down. Want dark
mode accents? Drop lightness to 30–40%.

Generating a harmonious palette

For multiple colors that belong together, don't call the function N times — spread the
hues evenly around the wheel from a random starting point:

function randomPalette(n) {
  const start = Math.random() * 360;
  return Array.from({ length: n }, (_, i) => {
    const h = Math.round((start + (i * 360) / n) % 360);
    return `hsl(${h} 65% 55%)`;
  });
}

randomPalette(5);
// ["hsl(291 65% 55%)", "hsl(3 65% 55%)", "hsl(75 65% 55%)", ...]

For a more organic (less "evenly sliced") feel, step the hue by the golden angle
(~137.5°), which distributes hues so they rarely collide — the same trick nature uses
for leaf arrangement:

const GOLDEN_ANGLE = 137.508;
function goldenPalette(n) {
  let h = Math.random() * 360;
  return Array.from({ length: n }, () => {
    h = (h + GOLDEN_ANGLE) % 360;
    return `hsl(${h.toFixed(1)} 65% 55%)`;
  });
}

Keep it readable: pick contrasting text

If you're putting text on a random background (tags, avatars), compute the background's
relative luminance and choose black or white text accordingly:

function readableTextColor({ r, g, b }) {
  // sRGB relative luminance (WCAG)
  const lin = (c) => {
    c /= 255;
    return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
  };
  const L = 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b);
  return L > 0.179 ? "#000000" : "#ffffff";
}

This is the difference between an avatar you can read and one where the initials vanish.
For anything user-facing, check your color pairs against WCAG AA (a contrast ratio of at
least 4.5:1 for normal text).

Bonus: reproducible "random" colors

Sometimes you want the same user to always get the same color (consistent avatars,
chart series). Seed a small PRNG with a hash of their id instead of Math.random():

function mulberry32(seed) {
  return function () {
    seed |= 0; seed = (seed + 0x6D2B79F5) | 0;
    let t = Math.imul(seed ^ (seed >>> 15), 1 | seed);
    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
  };
}

function colorForId(id) {
  let hash = 0;
  for (const ch of String(id)) hash = (hash * 31 + ch.charCodeAt(0)) | 0;
  const h = Math.floor(mulberry32(hash)() * 360);
  return `hsl(${h} 65% 55%)`;
}

colorForId("user-42"); // always the same hue for "user-42"

When you just want the color, not the code

If you're picking a color by hand — for a mockup, a CSS variable, a quick test — you
don't need to write any of this. I maintain a free, browser-based
Random Color Generator
(a random colour generator if you're on the British-spelling side of the internet)
that spits out random colors with HEX, RGB and HSL values ready to copy, and lets you
generate a fresh set on demand. It runs entirely client-side and needs no signup — part
of ByteTools, a set of free color and CSS tools
(palette generators, contrast checkers, gradient makers, and format converters).

TL;DR

The # + random hex one-liner works, but pad to 6 digits and expect muddy output.
Randomize hue in HSL with pinned saturation/lightness for colors that always look good.
Spread hues evenly (or by the golden angle) for harmonious palettes.
Compute luminance to pick readable black/white text, and check WCAG contrast.
Seed a PRNG when you need the same color for the same id.
Or skip the code and grab one from a free random color generator.

What's your go-to for random colors — uniform RGB, HSL, or something fancier? Let me
know in the comments.

FAQ Schema in 2026: How to Add FAQPage JSON-LD (and Is It Still Worth It?)

Byte Vancer — Mon, 20 Jul 2026 15:15:32 +0000

If you've ever added an FAQ section to a page, you've probably wondered whether you
should also mark it up with FAQ schema. The short answer: yes — but for different
reasons than you might expect in 2026. Let's walk through what FAQPage structured data
is, how to generate it correctly, what changed with Google, and why it still earns its
place in your <head>.

What FAQ schema actually is

FAQ schema is a small block of schema.org FAQPage structured
data, written as JSON-LD and dropped into your page. It tells machines: "this page
contains a list of questions and their answers." Here's the minimal shape:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "What is FAQ schema?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "FAQ schema is FAQPage JSON-LD that describes a page's questions and answers so search engines and AI tools can understand them."
      }
    },
    {
      "@type": "Question",
      "name": "Is FAQ schema free to add?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Yes. It's just a script tag you paste into your HTML — no cost, no library required."
      }
    }
  ]
}
</script>

That's it. Each Question has a name (the question) and an acceptedAnswer with
text (the answer). You can have as many as you like.

The honest part: what changed with Google

For years, FAQ schema could earn you an FAQ rich result — those expandable Q&A
accordions right in the Google search listing. That was a big real-estate win.

In August 2023, Google rolled that back. FAQ rich results are now shown only for
"well-known, authoritative government and health websites." For everyone else, the
accordion is gone.

So if the only reason you were adding FAQ schema was the Google rich result — that
reason is mostly gone. Be clear-eyed about it. But that's not the whole story.

Why it's still worth doing in 2026

AI / LLM answers. ChatGPT Search, Perplexity, Copilot and Google's AI Overviews increasingly answer questions by pulling from structured, clearly-labeled content. A clean Question/Answer pair is about the most machine-extractable format there is. FAQ schema makes your answers easy for an LLM to lift and cite.
Bing still uses it. Bing (which also feeds Copilot) continues to support FAQ structured data. Bing traffic is small next to Google, but it's free upside.
It's a forcing function for good content. Writing real questions your users ask — and answering them concisely — is good SEO regardless of markup. The schema just formalizes it.
Valid markup, zero downside. As long as you follow the rules below, there's no penalty risk. It's cheap insurance for a future where AI-driven search keeps growing.

The takeaway: don't add FAQ schema expecting a Google rich snippet. Add it because
it makes your Q&A content legible to the machines that increasingly decide what gets
surfaced.

How to do it correctly

Google's (still-published) FAQPage guidelines are worth following even without the rich
result, because Bing and validators use the same rules:

The Q&A must be visible on the page. Don't mark up content that isn't there for users. Schema should describe real, on-page content.
Genuine FAQs only. Not a way to stuff keywords, product prompts, or ads. Each answer should actually answer the question.
One FAQPage per page. Don't add multiple FAQPage blocks.
Escape properly. Answers can contain basic HTML, but you must escape characters that break JSON (quotes, <, &). This is the #1 source of "my schema is invalid" bugs.
No duplicate questions, and keep answers reasonably concise.

Validate before you ship

Two quick checks:

Schema Markup Validator — confirms the JSON-LD is structurally valid schema.org.
Google Rich Results Test — flags errors and warnings (it'll note the rich result isn't eligible, which is expected now).

If your JSON has a stray unescaped quote or a trailing comma, these will catch it.

The fast way to generate it

Hand-writing JSON-LD is fine for two questions. For a real FAQ — and to avoid the
escaping bugs above — it's faster to generate it. I maintain a free, browser-based
FAQ Schema Generator: you
add question/answer rows, and it outputs a valid, ready-to-paste FAQPage script block.
It runs entirely client-side (nothing you type is uploaded), handles the escaping for
you, and there's no signup. It's part of ByteTools,
a set of free tools that includes generators and validators for the other common schema
types too (Article, Product, Organization, Breadcrumb, HowTo).

Paste the output into your page's HTML (anywhere in <head> or <body>), run it
through the Rich Results Test once, and you're done.

TL;DR

FAQ schema = FAQPage JSON-LD describing on-page questions and answers.
Google removed FAQ rich results for most sites in 2023 — don't add it for that.
It's still worth it for AI/LLM answers, Bing, and clean content structure.
Follow the rules (visible content, genuine FAQs, one block per page, proper escaping).
Validate with the Schema Validator + Rich Results Test.
Generate it in seconds with a free FAQ schema generator instead of hand-escaping JSON.

Got a favorite structured-data workflow, or a question about a specific schema type?
Drop it in the comments.