Color, Decoded

A free, multi-page visual reference for UI designers. Everything you need to know about color: theory, structures, systems, accessibility, and the tools modern designers use.

Eight sections. Each one is its own page. No frameworks. No build step. Just open it.

Live demo: https://misko22.github.io/color-decoded (update this link after you deploy)

---

What's inside

Eight sections, each on its own page so you can bookmark and share them.

1. Color Theory Foundations : hue, saturation, lightness, and warm vs cool temperature
2. Palette Structures : monochromatic, analogous, complementary, triadic, split-complementary
3. The 60-30-10 Rule : the distribution principle
4. Role-Based Systems : primary, neutral, accent, semantic
5. Shade Naming Conventions : Tailwind, Material Design, Radix
6. Palettes by Industry : 12 famous brand palettes plus a live palette generator
7. Accessibility & Contrast : WCAG standards plus a live contrast checker
8. Tools Designers Use : 8 working links to the tools that matter

---

Interactive features

Two sections include real working tools.

Palette Generator (Section 6)

Pick a structure (analogous, complementary, etc.) and the generator builds a real palette using actual color theory math. Click any swatch to copy. Click "Copy as AI Prompt" to get a ready-to-paste prompt for ChatGPT or Claude.

Live Contrast Checker (Section 7)

Pick any two colors. See the contrast ratio update in real time, with WCAG AA and AAA pass/fail badges. Same formula WebAIM uses.

Copy as AI Prompt

Every palette in Section 6 has a "Copy as AI Prompt" button. It generates a complete prompt that includes the colors, the vibe, and instructions for how to use them with the 60-30-10 rule. Drop it into any AI tool and start building.

---

File structure

color-decoded/
├── index.html              (landing page with 8 section cards)
├── 01-foundations.html     (color theory)
├── 02-structures.html      (palette structures)
├── 03-ratio.html           (60-30-10 rule)
├── 04-roles.html           (role-based systems)
├── 05-shades.html          (shade naming)
├── 06-palettes.html        (famous palettes + generator)
├── 07-accessibility.html   (WCAG + contrast checker)
├── 08-tools.html           (designer tools)
└── README.md

---

How to use it

Just open index.html in any browser. That's the landing page. Click any section card to open that page.

git clone https://github.com/Misko22/color-decoded.git
cd color-decoded
open index.html

---

Deploy your own

This site is plain HTML, which means GitHub Pages hosts it for free.

1. Fork this repo (or upload the files to a new repo)
2. Go to Settings > Pages
3. Under Source, pick the main branch and the root folder
4. Save
5. Your site is live at https://YOUR-USERNAME.github.io/color-decoded

---

Built with

• HTML, CSS, and vanilla JavaScript
• Inter and JetBrains Mono fonts (Google Fonts)
• Real WCAG contrast formula for accessibility checking
• Real color theory math (HSL conversions) for the palette generator

No frameworks. No build step. No node_modules.

---

License

Free to use, share, and remix. Credit appreciated but not required.

---

About

Color, Decoded is Volume 01 of a reference series by TechAna, a personal brand at the intersection of biotech, code, and design.

Made by Joana Bala in Toronto.

• Instagram: @techana._
• LinkedIn: Joana Bala
• GitHub: @Misko22

If this helped you, follow TechAna on Instagram. New volume every month.