Most bloggers pick a color the way they pick a profile photo: open the theme editor, scroll through swatches, click whichever blue feels “trustworthy enough,” and move on. That works for the first six months. Then you start running into the same five problems.
A real palette fixes all five in one pass: five named tokens, exported once, referenced everywhere. The TinyTools generator does the contrast math, the dark-mode inversion, and the export so you don't have to.
Open the color palette generator and pick your accent. The page below is the playbook — the tool itself takes 60 seconds.
Try the Color Palette Generator →Forget 12-color brand systems. A blog needs exactly five tokens, and a sixth optional one if you publish code or long quotes:
| Token | Role | Light mode example | Dark mode example |
|---|---|---|---|
--bg | Page background | #fafaf7 | #0a0a0f |
--surface | Cards, callouts, quotes | #ffffff | #15151f |
--text | Body copy (must hit 4.5:1) | #1a1a1a | #f5f5fa |
--muted | Bylines, dates, captions | #666 | #a0a0b8 |
--accent | Links, buttons, brand | #a855f7 | #c084fc |
--code (opt.) | Inline code, tints | #f0f0f5 | #1d1d2a |
Notice the accent shifts lightness between modes. That's deliberate — a vivid purple at 50% lightness reads great on light backgrounds and screams on dark. Bumping it 10–15 points lighter in dark mode keeps the brand recognizable without burning retinas. The generator does this automatically when you toggle modes.
News-style blogs (deep blues, charcoal grays, blood red), longform essays (warm tans, oxblood, ink), tech blogs (electric purple, cyan, lime), recipe blogs (terracotta, basil green, butter yellow), and personal newsletters (whatever the writer's couch looks like) each have a recognizable color signature. Pick wrong and readers subconsciously file you in the wrong genre. The generator's analogous mode is your friend for tonal harmony, complementary for op-eds and high-energy takes.
Your blog's accent is also your link color 90% of the time. The generator runs every accent against your background and against white, and tells you which combinations clear 4.5:1 (body text) and 3:1 (large text). Failing this is the most common Lighthouse hit on independent blogs in 2026 — and Google's Core Web Vitals guidance now explicitly weights accessibility into editorial ranking signals.
Ghost themes (Casper, Edition, Source, and most marketplace themes) expose :root via Code Injection. Paste five lines, save, ship.
:root {
--ghost-accent-color: #a855f7;
--color-base: #fafaf7;
--color-text: #1a1a1a;
--color-muted: #666;
--color-surface: #ffffff;
}WordPress block themes ship Tailwind-compatible token blocks that work the same way — paste into Appearance → Customize → Additional CSS. Substack uses Custom Theme Colors for the basics; for the rest, the Substack “Custom Code” option (paid plan) eats the same CSS variables.
Pick the palette once, reuse the accent in your OG image generator for social cards, in your favicon generator for browser tabs, and in your Beehiiv or ConvertKit newsletter template. One accent, four placements, one cohesive brand. Most bloggers under-index on this — every cross-channel mismatch is a chance for the reader's brain to file you somewhere new.
The FTC's 2024 endorsement guides require visible disclosure for sponsored posts, and a separate background tint is the cleanest visual cue. The generator's tint output gives you a 5%-mixed version of your accent — light enough for body text to stay readable, distinct enough that “Sponsored” doesn't blend into the page. Pair with a small disclosure label generated by the AI disclosure generator if your sponsored content involves AI assistance.
@media (prefers-color-scheme: dark) wrapper.BRAND.md at the root of your blog repo. Re-picking colors is a procrastination tax — the only honest reason to change a palette is a category pivot.| TinyTools palette | Coolors | Adobe Color | Theme editor swatch | |
|---|---|---|---|---|
| Free, no account | Yes | Limited | Adobe ID | Yes |
| WCAG contrast check | Built-in | Built-in | Built-in | No |
| 5-token blog export | Yes | No (5 hexes) | No | No |
| Auto dark-mode inversion | Yes | Manual | Manual | Theme-dep. |
| CSS variable + Tailwind export | Both | CSS only | No | No |
| Built for blog publishing | Yes | Generic | Print/UI | Sometimes |
There isn't one — there's a category fit. Tech and AI blogs lean electric purple, cyan, or lime; business and finance blogs lean deep navy or oxblood; lifestyle and personal blogs lean warm earth tones (terracotta, sage, ochre). Pick the category color first, then differentiate within it by 15–20 degrees of hue.
Yes — use the logo's primary color as the accent. If the logo has multiple colors, pick the most saturated one and treat the rest as supporting (not in the 5-token system). If you don't have a logo yet, pick the palette first and design the logomark in the accent color afterward.
Once every 12–24 months at most. Brand recognition compounds over time; a palette refresh resets the meter. The exception is a category pivot — if your blog turns from cooking into crypto, the palette has to go with it.
Absolutely. Beehiiv, ConvertKit, Substack, and Mailchimp all accept either inline CSS or hex codes for their template builders. Use the same five tokens. Newsletters and blogs are the same brand to the reader.
The generator runs entirely in your browser — no server, no account, no tracking. Once the page loads, you can disconnect and keep working. The palette math (analogous, complementary, triadic, tints, contrast checking) all happens client-side.
Three credible references on blog color and accessibility worth your time:
Open the generator, pick one accent, export the five tokens, and ship. 5 minutes from now you'll have a blog palette you can stop thinking about for a year.
Try the Color Palette Generator →