Every Fiesta® dinnerware color from 1936 to today — color numbers, production years, photographs of the fired ware, and table-setting combinations built only from colors Fiesta actually made. Static HTML, no framework, no build dependencies.
Not affiliated with, endorsed by, or sponsored by The Fiesta Tableware Company. Fiesta® is a registered trademark of The Fiesta Tableware Company.
| Colors documented | 61 (14 vintage, 47 Post 86) |
| In production | 13 |
| Colors with hand-written notes | 61/61 |
| Shade families | 9, 9 with an intro |
| Pages generated | 79 |
| URLs in sitemap | 78 |
| Newest color | Lavender (2026) |
This table is regenerated by npm run build. Do not edit it by hand.
Fiesta introduces one new color a year and retires one or more at the same time. This is the whole ritual:
# 1. Edit fiesta.json:
# - add the new color to the `colors` array
# - set `prodEnd` on whatever retired (a year, replacing "current")
# 2. Drop the product photo in assets/colors/
npm run images # WebP thumbnail + 1200x630 social card for the new color
npm test # verify -> color math -> build -> output checks
git commit && git pushnpm test will tell you what else needs changing. It reads every hand-written sentence
on the site and names the ones that just went stale. Adding a 2027 color and retiring one
produces, for example:
ERROR Lavender (2026-current) notes: claims "newest color" but that is
Harbor, which this note does not name
ERROR shadeNotes.Blue: says "Eleven colors" but the Blue family has 12
Fix those two sentences and everything else follows on its own: the new color page, its band in the ribbon, its card in the grid, its place in the shade and era hubs, five pairing combinations, a sitemap entry with its image, every count in every heading and stat, the retired color's status pill and title, and the removal of any page whose slug no longer exists.
prodStart may be a year that has not arrived yet. The model expects this — endYear
clamps to the start year so a 2027 color does not appear to end in 2026, and the tests
treat a future prodStart as valid. You can add next year's color the day it's announced.
color, prodStart, prodEnd and sku are the auditable spine of this site. You can
check each against a real piece in your hand. They live in exactly one place —
fiesta.json — and nothing else is allowed to contradict them.
That is enforced, not merely intended. npm run verify reads every hand-written sentence
and checks each number back against the data:
| Written in prose | Checked against |
|---|---|
| "retired in 1997", "arrived in 1986" | that color's actual prodStart / prodEnd |
| "from 1986 to 2014" | a real production range |
| "No. 105" | a real SKU — this color's, or one the sentence names |
| "ran fifteen years" | the actual run length |
| "forty years and counting" | rejected — true only in the year it was written |
| "the longest run", "most saturated", "newest" | recomputed; must be uniquely true |
| any four-digit year | this color's, a named color's, or the company timeline |
A contradiction fails the build — locally and in CI — before a single page is generated.
Correct a year in fiesta.json and any sentence still asserting the old one is named at
you, by color and by quote.
It knows the difference between a color retiring and the line retiring, so "before Fiesta was retired in 1973" passes. It rejects any run length stated for a color still in production, because those are correct only in the year they were written — say "since 1986" instead of "forty years".
npm test # everything, in order. This is the one to run.
npm run verify # prose vs data: years, SKUs, durations, superlatives
npm run test:color # color math + fiesta.json integrity
npm run build # generate every page
npm run check # dead links, alt text, headings, JSON-LD, ADA, sitemap
npm run content # how much original writing exists, which pages are thin
npm run links # internal link graph: orphans, inbound counts, click depth
npm run images # regenerate assets/opt/ (needs Python + Pillow)
npm run serve # build, then serve at localhost:8080| Failure | What happened |
|---|---|
contradictions from verify |
Prose disagrees with fiesta.json. Fix the sentence, or fix the data. |
assertions failed from test:color |
Color math broke, or a color entry is malformed. |
ERROR from check |
The generated HTML has a dead link, missing alt, unlabelled control, broken heading order, ambiguous link text, or invalid structured data. |
warn from check |
Non-blocking: an over-long title, a thin meta description, a grid track that may overflow a narrow screen. |
npm test runs in CI on every push. CI also commits the regenerated HTML back to the
branch, so editing fiesta.json in the GitHub web UI is enough to publish a new color.
{
"color": "Lavender",
"description": "Meet Lavender, Fiesta's new color for 2026...",
"sku": "351",
"hex": "#9694B8",
"hsv": "hsv(243, 20%, 72%)",
"produced": "2026-current",
"prodStart": 2026,
"prodEnd": "current",
"shadeOf": "Purple",
"image": "0351.png",
"notes": "Optional. One string, or an array of paragraphs."
}hex is the only color value you need to get right. RGB, HSL, CIELAB, LCh, WCAG contrast
and every ΔE match are calculated from it at build time, so they cannot drift.
sku may be "N/A" for vintage colors that predate Fiesta's numbering — that is treated
as a fact, not a gap, and those pages say "no number" rather than inventing one.
Everything else is a fact. notes is where you say what you know: what to look for on a
piece, why a color was retired, how it differs from the one it replaced, what you remember
about it. shadeNotes in fiesta.json does the same job for the nine shade-family hubs.
npm run content reports how much original writing exists and which pages are thin.
Two dials in site.config.json control what gets indexed:
content.minOriginalWords— a color page is withheld from the index (noindex, follow, and out ofsitemap.xml) until its description plus notes reach this many words. Currently0, because color pages are distinct product pages that already earn search traffic. Raise it if you want to enforce a floor.content.requireShadeNotes— a shade hub is withheld untilshadeNoteshas an entry for it. Currentlytrue. Those hubs are a filtered view of the homepage with nothing original to say until you write it.
fiesta.json ──┐ index.html, history.html, about.html, privacy.html, 404.html
├──> build.mjs ──> colors/<slug>/index.html one per color
site.config ──┘ colors/shade/<shade>/index.html "Fiesta blue colors"
colors/era/<era>/index.html vintage / post-86 / in-production
sitemap.xml (+ image sitemap), robots.txt, site.webmanifest
Do not edit the generated .html files — the next build overwrites them. Edit the
templates in src/.
| Path | What it is |
|---|---|
fiesta.json |
The dataset. Colors, production years, notes, company timeline. Source of truth. |
site.config.json |
Base URL, analytics, AdSense, content thresholds. |
build.mjs |
The generator. Zero dependencies. |
src/lib/color.mjs |
Color conversion and CIEDE2000. |
src/lib/data.mjs |
Turns fiesta.json into the model templates render. |
src/lib/palettes.mjs |
The table-setting combination engine. |
src/lib/context.mjs |
"Where this color sits in the line" + tablescape guidance. |
src/templates/ |
Page shell, components, one function per page type. |
assets/css/main.css |
The whole design system. No framework. |
assets/js/app.js |
Progressive enhancement only — theming, filters, sorting. |
tools/verify-facts.mjs |
Guards the four auditable facts against the prose. |
tools/check.mjs |
SEO, accessibility and responsive checks on the output. |
tools/test-color.mjs |
Color math + data integrity assertions. |
tools/content-report.mjs |
Original vs boilerplate word counts. |
tools/link-graph.mjs |
Internal link graph: orphans, inbound counts, click depth. |
tools/optimize-images.py |
WebP derivatives + social cards. The only Python. |
.lastmod.json |
Per-page content hashes. Keeps <lastmod> honest — commit it. |
Every facet worth ranking for already has a real page, because a query string never will:
| Pages | URL shape | Ranks for |
|---|---|---|
| 9 shade hubs | /colors/shade/blue/ |
"Fiesta blue colors" |
| 3 era hubs | /colors/era/vintage/ |
"vintage Fiesta colors", "current Fiesta colors" |
| 1 spectral page | /colors/rainbow/ |
"ROYGBIV", "Fiesta color meanings" |
| One per color | /colors/lapis/ |
"Fiesta Lapis", "Fiesta 337" |
The ROYGBIV page is deliberately one page, not seven. Seven pages of color
psychology would be indistinguishable from every listicle on the internet; one
page that sorts a real palette into the seven bands by measured hue angle is
something only this site can publish. src/lib/spectrum.mjs does the sorting,
and the disagreements between hue and name are the point — Poppy and Persimmon
measure into Red despite being named Orange, vintage Yellow measures into
Orange, Evergreen measures into Blue.
Each shade hub carries a hand-written intro from shadeNotes and a grid built
from the data, so adding a color updates every hub that should mention it and no
others.
The links between them are checked, not assumed. npm run links reports inbound
count and click depth per page group, and npm run check fails the build on
an orphan (nothing links to it) or an unreachable page (no path of links from the
homepage reaches it).
Two deliberate choices in that graph:
- Header and footer links are excluded from inbound counts. They appear on every page and would flatten the measurement into noise. They still count for reachability — a page linked only from the footer is not an orphan, but nothing is recommending it either.
- The history timeline auto-links color names in its prose, with the years attached invisibly so the two Reds are distinguishable. That single page carries more outbound links than any other.
Decade pages are deliberately absent. "Fiesta colors of the 1990s" is a real
query, but ten more templated grids is exactly the pattern that got the site a
"Low value content" response from AdSense. Revisit after approval, and only with
real intros — the mechanism is already there in shadeNotes.
Things that are known, deliberate, or waiting on you.
Publisher ID ca-pub-4126541105328321 is live: the google-adsense-account meta tag and
the loader script are in the <head> of every page, and ads.txt is at the domain root —
which is where AdSense looks, and the reason the custom domain mattered.
Google returned "Low value content." The fix is original writing, not code. npm run content tracks the gap. Two things worth knowing:
noindexdoes not hide a page from an AdSense reviewer. It only affects search indexing. The content thresholds are SEO hygiene, not an AdSense lever.- No ad units are placed yet. Fill in
adsense.slotsafter approval and the<ins>units appear in boxes whose height is already reserved, so an ad cannot shift the layout.
Highest-leverage next step: two or three substantial articles drawing on ten years inside the company — how to identify an unmarked piece, vintage vs Post 86 in the hand, how a new color gets chosen. That is expertise nobody else has, and it is worth more than sixty short notes.
Three things in the notes came from outside fiesta.json, so npm run verify cannot check
them:
- The uranium oxide story on both Reds — the 1943 wartime requisition and the 1959 return. Well documented publicly, and your data corroborates the timing.
- Medium Green as the hardest vintage color to find — collector consensus as I understand it.
- The 500 Raspberry presentation bowls — this one is from your own 1997 history entry, so it is solid.
- The 2001 history entry in
fiesta.jsonspells it "Pearl Grey"; the color is named "Pearl Gray". One character. - The 2016 history entry says Plum retired, but so does the 2015 entry, and
prodEndsays 2015. Probably the 2016 entry should read "Paprika retires". - The three era hubs are the thinnest pages on the site. They have written ledes but no
shadeNotesequivalent.
- Search Console is verified and collecting on the new domain. The
googleSiteVerificationtoken insite.config.jsonbelongs to the oldthekicker.github.ioproperty and verifies nothing now — blank it if the new property is DNS-verified. - Google Analytics — the measurement ID still works, but update the data stream's URL in the GA4 admin so referral exclusions are right.
Static first. Every color, description and link is in the HTML the server sends. JavaScript adds filtering, sorting and theming on top. With JS off the site is a complete, readable, crawlable guide — which is also why search engines index it on the first pass.
The hex is the source of truth, not the headline. A color page leads with the number a collector reads off the back of a plate and the colors it pairs with. Everything derived still comes from that one hex value.
Pairings say where they come from. The first combination on a color page, where one exists, is the pairing named in that color's own description — a person wrote it, so it outranks a formula, and it is labelled as such. The rest each state their rule. Colors closer than ΔE 12 never share a set, and neutrality is judged by LCh chroma rather than HSL saturation, which badly misjudges very light and very dark colors.
Say what we don't know. Fiesta doesn't publish hex values, and fired glaze varies by run, thickness, lighting and display. The site says so rather than implying a precision it doesn't have.
Generated pages have to earn their indexing. A template can produce sixty pages in a second; that doesn't make them worth submitting.
Accessibility is a feature. Targets WCAG 2.2 AA, and npm run check fails the build on
a missing alt, an unlabelled control, a skipped heading level, a dead link, ambiguous link
text, or a target="_blank" that doesn't announce itself. Color is never the only carrier
of information. Swatch labels pick black or white by contrast ratio. The color ribbon
becomes a grid of ~45px tappable squares below 768px, because at phone width each band would
otherwise be about 4px — well under the 24px SC 2.5.8 asks for.
Fast, because it's small. No Bootstrap, no jQuery, no icon font, no webfont. One stylesheet, one script, SVG icons inline. Images ship as WebP with original fallbacks — the sources were 10.7 MB and are now 0.31 MB.
<lastmod> means something. Every page's content is hashed into .lastmod.json and its
sitemap date only advances when that hash moves.
Responsive down to 320px. No fixed-width anything; every auto-fill grid track is guarded
with minmax(min(100%, …), 1fr) and npm run check warns if one isn't.
Canonical at https://fiesta-color-guide.com. Two files decide that:
| File | Role |
|---|---|
site.config.json → baseUrl |
The canonical origin. Every canonical tag, Open Graph URL, sitemap entry, schema @id and the Sitemap: line in robots.txt is built from it. |
CNAME |
What GitHub Pages serves the site as. Must match baseUrl's host. |
All internal links are relative, so the site works from a domain root or a project subpath
unchanged. npm run check fails if any absolute URL points at a github.io host, so a
half-finished domain move can't ship.
DNS. For an apex domain on GitHub Pages: four A records and four AAAA records
pointing at GitHub's Pages IPs, plus a CNAME record for www → thekicker.github.io.
Take the current IPs from
GitHub's docs
rather than any tutorial — they have changed before. Then Settings → Pages → Custom domain,
and tick Enforce HTTPS once the certificate issues.
Because CNAME holds the apex, GitHub redirects www to it automatically, and 301-redirects
the old thekicker.github.io/Fiesta-Color-Guide/* URLs, so existing links and ranking follow.
This project is a hobby of mine and closely tied to my history with The Fiesta Tableware Company (formerly Homer Laughlin), where I worked from June 2014 to March 2024 in a variety of roles. It's very much a family affair — my father spent 25 years there, my mother worked at Hall China for five years, and many friends and relatives have worked within these companies as well. Fiesta is a true staple of our community and one we hold in deep admiration.
Though I am a previous employee, this project is not affiliated with or endorsed by them in any way. I have been careful not to release information about a new color before it is announced.
Corrections are genuinely welcome — dates in particular. Open an issue or send a pull request.
Made in the USA. The Fiesta Tableware Company's history dates back to 1871, upholding the tradition of crafting quality tableware on American soil for over 150 years.
5-year limited warranty. Fiesta® products are warranted free from defects in material and workmanship for five years from the date of purchase.
Microwave, oven and dishwasher safe. Since the 1986 reintroduction, Fiesta® dinnerware has been made to move from fridge to microwave to oven (to 350°F) to dishwasher.
Lead safe. Since 1986 no lead-containing raw materials are used. All raw materials meet California Proposition 65 settlement requirements, with lead leachability below 0.002 ppm for all Fiesta® colors. The company notes trace amounts of lead exist in raw materials and that any claim of 100% lead-free ceramic dinnerware is misleading.
The Fiesta Tableware Company · Fiesta Factory Direct · USA Dinnerware Direct
Facebook · Instagram · Pinterest · TikTok · YouTube · X/Twitter
Post86 Reference Guide · Texas Cooking · Wikipedia · Fiesta Tableware Company Collectors Organization · Homer Laughlin China Collectors Association · DISHES: Fiesta Documentary · r/Fiestaware
Collector's Encyclopedia of Fiesta · The Collector's Encyclopedia of Homer Laughlin China · Fiesta Ware — A Little Collectible Book · Post 86 Fiesta: Identification and Value Guide
Wayfair · Everything Kitchens · Macy's · Walmart · Belk · Home Depot · Replacements · Zola · Dillard's
fiesta.json is CC0-ish in spirit — take it, a link back is appreciated.
Colors, production years, shade families, descriptions, notes and the company timeline all
live there. Code is MIT. Product photographs and the Fiesta® name belong to The Fiesta
Tableware Company and are used here for identification and reference only.