A SaaS landing page picks a vivid accent and ships. A news publisher can't. Editorial color choices have to do six jobs at once that nobody else cares about: signal trust, separate news from opinion from sponsored content, reserve an emergency-only alert, survive long-read fatigue, render correctly on AMP and Google News carousels, and not drift across the seventeen different page templates a typical newsroom maintains. Pick wrong and you end up like every redesign-gone-bad: the home page looks fine, but the live blog template glows, the opinion pages look like editorial, and the paywall gate is the same blue as a regular link.
A real editorial palette fixes all six in one pass: eight named tokens, exported once, referenced everywhere. The TinyTools generator does the contrast math, the section-tint derivation, and the WCAG verification so your design lead doesn't have to babysit it.
Open the color palette generator and pick your editorial primary. The page below is the playbook — the tool itself takes 90 seconds.
Try the Color Palette Generator →Newsrooms that survive a redesign without re-fighting the same internal battles use a fixed eight-token system. Names matter — they map to your design tokens, your CMS theme, and your brand guide.
| Token | Role | Light mode example | Dark mode example |
|---|---|---|---|
--color-bg | Page background | #fafaf7 | #0d1117 |
--color-surface | Cards, callouts, pull quotes | #ffffff | #161b22 |
--color-text | Body copy (must hit 4.5:1) | #1a1a1a | #e6edf3 |
--color-muted | Bylines, timestamps, captions | #6b6b6b | #8b949e |
--color-primary | Brand, links, masthead | #0f3460 | #5b8def |
--color-alert | Breaking news only | #c8102e | #f04e5e |
--color-sponsored | FTC-disclosed sponsored tint | #fff8e1 | #1f1a08 |
--color-paywall | Subscription gate accent | #1d8a55 | #2ea66b |
Notice --color-primary and --color-alert are deliberately not the same hue family. If your brand is red (oxblood, claret), your alert has to be a different red — usually a brighter, more saturated one — or readers can't tell “this article” from “BREAKING.” The generator flags this collision and offers a complementary alert if your primary is already in the red space.
The reliable trust-signaling hue ranges in news design: deep navy (#0f3460–#1a3a5c), oxblood/claret (#5c1010–#7a1e1e), charcoal (#1a1a1a–#2a2a2a), and forest green (#1d4731–#2d5c3f). Saturation should sit under 60%, lightness near the extremes (under 25% for light mode, over 60% for dark mode). The generator's monochromatic mode is your default — pick one trust hue and derive a tonal scale. Complementary mode is for the alert pairing, not the brand primary.
Your alert red is the most-tested color on the page. It has to clear 4.5:1 contrast on the page background, 3:1 on a sponsored tint, and survive next to an editorial photo without bleeding. The generator runs all three checks against the alert candidate. Common safe alerts: #c8102e, #d72d2d, #b91c1c. Anything brighter than #ef4444 tends to fail accessibility audits on white backgrounds. The official W3C guidance on contrast minimums is the source of truth.
Politics, business, opinion, lifestyle, and sports want visual differentiation without a free-for-all. Use the generator's analogous mode on your primary to derive five section tints, each shifted 15–20 degrees of hue. The reader's eye picks up the shift even on the verticals page; the design system stays coherent. Major outlets (Bloomberg's bold yellow for opinion, the FT's pink-tinted papers) are the textbook example of section accents derived from a brand foundation.
Sponsored content needs a tinted background distinct enough that “Sponsored” isn't ambiguous (FTC requirement) but not so loud that readers lose context. The generator's tint output mixes 5–8% of a warm hue (cream, parchment, butter yellow) into your background, producing a sponsored surface that reads correctly on both desktop and mobile. The paywall gate uses a separate accent — usually green or gold — to differentiate “subscribe” from “continue reading.” Pair the FTC-required disclosure with a label generated by the AI disclosure generator if your sponsored or AI-assisted content needs explicit labeling.
A 2026 newsroom ships the same article in eight surfaces: web, AMP, Apple News, Google News, RSS, newsletter, Twitter/X social card, and a syndication feed. Each one renders differently. Pick one primary and one alert in the generator, export CSS variables for the web/AMP build, copy the hex codes into your OG image generator for social cards, and paste them into your Apple News template. Your favicon uses the primary. Cross-surface brand recall lives or dies here — and 2026 reader studies show recognizability across surfaces is one of the strongest predictors of repeat visits.
theme.json, Arc XP component overrides, Eleventy/Next.js global CSS).@media (prefers-color-scheme: dark) or use a class-based toggle.BRAND.md at the repo root. The brand primary and alert red are sacred — anything else can be discussed in design review. Discipline is the whole game.| TinyTools palette | Coolors | Adobe Color | Figma plugins | |
|---|---|---|---|---|
| Free, no account | Yes | Limited | Adobe ID | Figma seat |
| WCAG AA contrast verification | Built-in | Built-in | Built-in | Plugin-dep. |
| 8-token editorial export | Yes | No (5 hexes) | No | No |
| Auto dark-mode inversion | Yes | Manual | Manual | Plugin-dep. |
| CSS variable + Tailwind export | Both | CSS only | No | Plugin-dep. |
| Built for editorial publishing | Yes | Generic | Print/UI | Generic |
| Sponsored / paywall tint output | Yes | No | No | No |
Deep navy in the #0f3460–#1a3a5c range remains the highest-trust hue across reader studies. Oxblood (#5c1010–#7a1e1e) signals editorial heritage. Charcoal works for design-forward outlets that want neutrality. Avoid bright primaries (electric blue, vivid teal, hot orange) for the brand mark — they push the brand toward entertainment or tech, not news.
Yes — and it should be obvious. The standard pattern is a section-specific accent (often warm: amber, oxblood, or terracotta) that swaps in for the masthead bar and section header on opinion templates. The body type stays the same. Readers should be able to tell “news” from “opinion” in under a second without reading the section label.
Reserve the alert red strictly for breaking-news labels and live-blog status indicators. For election results, use a separate political-color pair (Democratic blue / Republican red in US contexts, or a category-neutral pair like teal/orange for international). The generator's complementary mode gives you a balanced political pair that doesn't collide with your alert.
Yes. The 8-token system includes a dedicated --color-paywall for subscription accents — typically green or gold — separate from the alert and brand primary. Tier-specific accents (Standard, Premium, All-Access) can be derived from the paywall token using the monochromatic scale.
Yes. The palette is purely visual — it doesn't depend on language. Editions in Arabic, Hebrew, or RTL scripts work fine; the generator's contrast checks are language-agnostic. For editions that ship a culturally distinct primary (some local-news outlets prefer regional flag-derived primaries), regenerate with the local primary and reuse the alert/paywall/sponsored tokens.
The generator runs entirely in your browser — no server, no account, no tracking. Once the page loads, you can disconnect. The palette math (analogous, complementary, triadic, monochromatic, tints, contrast checking) all happens client-side. Suitable for newsrooms with strict CMS-vendor IT review processes.
Three credible references on news design and accessibility worth your design team's time:
Open the generator, pick your trust-hue primary, derive the eight tokens, ship to your CMS. 10 minutes from now your newsroom will have a palette nobody has to re-debate at the next redesign.
Try the Color Palette Generator →