Color Palette Design Lab

Use this page as a working design tool, not just a gallery. You can compare built-in options, drop in your own custom palette, and pressure-test how colors behave across real interface elements.

If your goal is to build a custom theme file, this is a fast place to prototype decisions before moving them into assets/css/my-theme.css.

Navigation Demo

Xanthan Instructions Components FAQs

Content Demo

Welcome to Xanthan

Build professional portfolios, class projects, and digital narratives. Learn more about our features.

This template emphasizes sustainability and ownership of your content.

Project Card

Short summary text over a card background.

Featured

Resource Card

Another card to compare border and text contrast.

Read more
Good palettes support hierarchy. Great palettes support hierarchy without shouting. 
--bg-page: var(--warm-white);
--text-body: var(--sage-dark);
--accent-primary: var(--sage);
Element What to check
Buttons Is text readable in hover and default states?
Cards Can you see card boundaries without harsh contrast?

Heading Hierarchy

H1 Heading - Primary Color

H2 Heading - Secondary Color

H3 Heading - Primary Variant

H4 Heading - Accent Color

Color Reference

Use this page as a workflow

  1. Start with a built-in palette and inspect hierarchy (headings, buttons, cards, quote, code, table).
  2. Switch to Custom (Edit Me) and modify the .palette-custom block at the top of this page.
  3. Compare your custom palette against built-ins before changing site-wide CSS.
  4. Move final values into your theme file (assets/css/my-theme.css) using semantic variables.

Add your own palette in 3 minutes

Edit this block near the top of the page:

.palette-custom {
  --demo-primary: #1f6f8b;
  --demo-secondary: #475569;
  --demo-accent: #f59e0b;
  --demo-bg: #f8fafc;
  --demo-bg-secondary: #e2e8f0;
  --demo-bg-nav: #0f172a;
  --demo-text: #1e293b;
  --demo-text-light: #f8fafc;
}

Then click Custom (Edit Me) in the switcher.

When you like the result, map it to Xanthan variables in your theme file:

:root {
  --bg-page: #f8fafc;
  --bg-card: #e2e8f0;
  --bg-nav: #0f172a;
  --text-body: #1e293b;
  --text-on-dark: #f8fafc;
  --accent-primary: #1f6f8b;
  --accent-border: #475569;
  --interactive-hover: #f59e0b;
}

AI prompts for palette generation

Use these as copy/paste starters in your AI assistant.

1) Generate palette directions

Give me 4 color palette directions for an academic humanities site.
For each direction include: primary, secondary, accent, page background,
card background, nav background, body text, text on dark.
Return hex values and a 1-sentence design rationale.
Avoid neon colors and keep it readable for long-form text.

2) Convert palette to Xanthan variables

Map this palette into Xanthan semantic CSS variables.
Use exactly these variable names:
--bg-page, --bg-card, --bg-nav, --text-body, --text-on-dark,
--accent-primary, --accent-border, --interactive-hover.
Return a :root block only.

Palette:
primary #______, secondary #______, accent #______,
bg-page #______, bg-card #______, bg-nav #______,
text-body #______, text-on-dark #______

3) Accessibility tune-up

Review this CSS palette for accessibility.
Identify weak contrast pairs for body text, nav links, and button labels.
Keep the palette mood the same, but suggest minimum-change replacements.
Return revised hex values and explain each change briefly.

4) Iteration prompt

Take this palette and generate two variants:
1) warmer and more welcoming
2) cooler and more technical
Keep structure and contrast similar.
Return both as Xanthan :root blocks.

Other useful comparison targets

If you want this page to be even more rigorous, add demos for:

These tend to reveal palette weaknesses faster than hero sections do.

Next steps

After choosing a direction here:

  1. Apply it in your theme file.
  2. Test on home, docs, and at least one scrollstory page.
  3. Validate contrast for body text and nav links.
  4. Ask AI for a “minimal-change polish pass” once you have real content on screen.