ColorwayKit Blog
Practical guides on brand colors, colorways and getting real code into your project — written by the team behind the ColorwayKit theme engine.
Brand Color Palette Generator: Turn a Brand Color Into a Full Web Theme
A brand color palette generator turns one hex into a complete, accessible web theme. See how the palette is built, checked and exported.
2026-09-04 · zhoujingkang
How to Add Brand Colors to Tailwind CSS (v3 & v4)
Add brand colors to Tailwind the right way: theme.extend.colors in v3, @theme variables in v4 — plus how to generate a full 50–950 scale in one minute.
2026-09-04 · zhoujingkang
What Is a Colorway? From Sneaker Colorways to Website Themes
A colorway is a specific color combination applied to one product design. Learn the meaning, how it moved from sneakers to web themes, and how to make your own.
2026-09-04 · zhoujingkang
ColorwayKit for Agents: DESIGN.md for Claude Code & Cursor
Turn one brand color into a WCAG-tested DESIGN.md your AI coding agent can follow — free workflow and templates for Claude Code and Cursor, step by step.
2026-10-02 · zhoujingkang
Why AI-Generated Websites Fail Contrast Checks (and How to Fix Them)
AI-generated sites pass the glance test and fail 4.5:1 on muted text pairs. Here is why the model gets contrast wrong, and the token-level fix.
2026-10-03 · zhoujingkang
Design System Migration Is Where Brand Colors Go to Die
Components survive a design system migration; color intent doesn't. Why hex lists and prose style guides drift, and the plain-text token file that holds.
2026-10-03 · zhoujingkang
WCAG vs APCA: Which Contrast Standard Should You Trust?
4.5:1 is legally required and perceptually flawed. APCA is perceptually better with no legal standing. Here is what each standard sees, and why we check both.
2026-10-03 · zhoujingkang
ColorwayKit MCP: Give Your AI Coding Agent a Verified Color System
Connect Claude Code or Cursor to ColorwayKit over MCP: one brand hex in — WCAG/APCA-verified design tokens for light and dark, straight into the agent.
2026-10-06 · zhoujingkang
Claude Code Skills for Brand Colors: Stop Re-Explaining Your Palette to Your Agent
Package your DESIGN.md contract as a skill so Claude Code and Cursor stop inventing hex values. Free templates, a three-step setup, and where the live MCP server fits in.
2026-10-07 · zhoujingkang
Colorblind-Safe Palettes: Check Your Brand Colors Against 8% of Your Users
WCAG AA doesn't guarantee colorblind users can read your UI. See how CVD simulation catches what contrast checks miss — with real measured numbers.
2026-10-08 · zhoujingkang
Tune Your Theme in the Browser, Pull It into Claude Code Live
Save your tuned brand theme as a cloud project, then let your AI coding agent pull it on demand via MCP — no re-exporting, no stale files, no re-describing your palette in prompts.
2026-10-08 · zhoujingkang
Colorway vs Palette: What's the Difference (and Which Do You Need)?
A palette is a set of colors; a colorway is one specific way those colors get applied to a product. The difference matters a lot when you hand colors to AI.
2026-10-13 · zhoujingkang
What Is a Colorway in Shoes? Sneaker Colorway Meaning, Explained
In sneakers, a colorway is the specific color and material assignment of one shoe model. Here's what colorway means, where the term came from, and why releases get names.
2026-10-13 · zhoujingkang
"Make It Pop": Why AI-Generated UI Colors Drift (and the Number That Stops It)
"Make it pop" gives an AI agent no measurable target, so colors drift across every generation. Here is the mechanism — and the acceptance criterion that ends it.
2026-10-13 · zhoujingkang
How to Tell If a Website Is AI-Generated: The Tell You Can't See
Font choices, purple gradients and card grids are the visible tells of AI-built sites. The strongest one — failing contrast — is invisible in screenshots. Here's how to check it.
2026-10-13 · zhoujingkang
Colorblind-Safe Dashboards: Status Colors That Survive Color Blindness
Dashboards encode meaning in red, green and amber — exactly the hues color-blind users confuse. How to build status colors and charts that survive all four deficiency types.
2026-10-13 · zhoujingkang
How to Deliver a Brand Guide to a Client (Without a Designer)
A client-ready brand guide needs color tokens, a WCAG report and files a developer can use. Here's the deliverable checklist — and how to build it in an afternoon from one hex.
2026-10-13 · zhoujingkang
WCAG vs APCA: Which Contrast Standard Should You Use?
A practical comparison of WCAG contrast ratios and APCA Lc values, with examples for body text, large text and dark mode.
2026-09-14 · zhoujingkang
How to Convert a Brand Color into Semantic Design Tokens
Turn one brand hex into roles for surfaces, text, borders and states instead of scattering raw color values across a product.
2026-09-14 · zhoujingkang
Tailwind Custom Colors: v3 and v4 Guide
Add a brand color scale to Tailwind v3 with theme.extend.colors or Tailwind v4 with CSS @theme variables.
2026-09-14 · zhoujingkang
Dark Mode Color Palette: Text, Surfaces, and Contrast
Design a dark mode color palette with layered surfaces, readable text and brand accents that do not glow or disappear.
2026-09-14 · zhoujingkang
Tech Brand Colors: A Practical Study of Brand Palettes and Accessible Web Themes
A small, transparent study of public technology brand color references and what they teach about palette roles, contrast and web themes.
2026-09-14 · zhoujingkang
Ready to try it? Turn your brand color into a full web theme — and export the whole theme in one zip.