Frequently asked questions

ihatecolors generates palettes using color theory math in the HSL color model. Each mood maps to specific hue ranges, saturation bounds, and lightness distributions. We apply one of five classical harmony rules (complementary, analogous, triadic, split-complementary, or tetradic), then score the result by contrast spread, lightness variance, and harmony quality. If a generated palette scores below our threshold, we retry until it passes.

Clicking the lock icon on a color slot preserves that hex value across randomizations. The generator rebuilds the palette around your locked colors — the harmony rule is applied using the locked hues as anchors. You can lock any combination of the four slots.

Yes. The generator listens for the spacebar globally on the /generator page, as long as you're not focused on a text input. It's the fastest way to iterate — no mouse required.

Palette saving requires a Supabase connection. If you're running locally without a Supabase .env, the save button is hidden and mock data is used instead. With Supabase connected, saved palettes go into a moderation queue before appearing in the Explore feed.

WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios for readable text. AAA means a contrast ratio of 7:1 or higher — the strictest level. AA means 4.5:1 or higher — the baseline for most compliance requirements. "Fail" means the contrast is below 4.5:1 and the color pair should not be used for body text. The generator shows three pairs: background vs text, background vs accent, and accent vs text.

Yes. WCAG scores only apply to text-on-background contrast. A neon palette with Fail scores on some pairs is fine for decorative use, illustration, or design elements that don't contain text. Use good judgment: match your contrast to your use case.

No. We show you the WCAG grades so you can make an informed decision — we don't filter out low-contrast palettes. Some moods (Night, Neon) intentionally produce dramatic combinations that don't meet body text standards. Check the scores before using any palette for an accessibility-sensitive project.

Each palette comes with a structured prompt you can paste into Claude, ChatGPT, Midjourney, or Stable Diffusion. It specifies the hex values for each UI role (background, primary accent, secondary, body text) and includes a mood and emotional context sentence. AI tools respond better to structured color instructions than vague mood words.

Each AI tool parses color instructions differently. Midjourney appends style flags like --style raw to prevent it from overriding your palette. ChatGPT gets an explicit instruction to use the hex values consistently. Claude and Stable Diffusion get the base prompt without modification. Toggle between tools in the generator to see the formatted version before copying.

The Explore page at /explore shows all approved palettes. Use the mood filter pills to filter by category, the season and use case dropdowns for more specific filtering, and the sort control to sort by newest, most saved, trending, or most copied.

Palette submission is coming in Phase 3. When it launches, you'll be able to submit a 4-color hex set with optional mood tags and use case tags. All submissions go through a moderation step before appearing in the Explore feed.

"Save" means a user clicked the bookmark/save button to add a palette to their collection. "Copy" means a user clicked a hex value or "copy all" to copy the colors to their clipboard. Both metrics are tracked to measure which palettes are most useful in practice.

ihatecolors is built on Astro with React islands for interactive components. The color generation engine is pure TypeScript with no runtime dependencies — all HSL math is implemented from scratch. Palette data is stored in Supabase. Styling uses Tailwind plus CSS custom properties.

Most of ihatecolors is static — palette detail pages, the color theory guide, the home page. Astro renders these as static HTML at build time, with React hydrated only where interaction is needed (the generator, the filter bar). This results in faster page loads and better Core Web Vitals for the content-heavy pages that get indexed.

No. The entire generation engine runs client-side in the browser. There are no API calls for color generation — all HSL math, harmony rule selection, and scoring happens locally. Supabase calls happen only for saving and fetching palettes.