# Color Theory and Analysis

Reference for harmony schemes, accessibility, and advanced palette features.

## Harmony Schemes

Generate complementary schemes from the dominant hue:

- Monochromatic: Variations of a single hue (tints, shades, tones)
- Analogous: Adjacent colors on the wheel
- Complementary: Opposite colors on the wheel
- Triadic: Three evenly spaced colors
- Split-complementary: Base plus the two colors adjacent to its complement
- Tetradic: Four colors forming two complementary pairs

## Extended Palette

For each primary color, derive:

- Light and dark variations
- Tints (add white)
- Shades (add black)
- Tones (add gray)
- Numeric scales: 50, 100, 200 ... 900, 950

## Accessibility

- Check WCAG 2.1 contrast ratios for every text/background pairing.
- Target 4.5:1 for normal text (AA), 3:1 for large text, 7:1 for AAA.
- Test the palette against color blindness types:
  - Protanopia (red-blind)
  - Deuteranopia (green-blind)
  - Tritanopia (blue-blind)
- Recommend accessible alternatives where a pairing fails.

## Advanced Features

Mood board: Generate color combinations, usage examples, and gradient options.

Brand matching: Compare against existing brand colors, find closest matches, and suggest similar palettes.

## Best Practices

Color extraction:
- Filter out near-white and near-black unless prominent.
- Group similar colors (within roughly 10% similarity).
- Weight by visual importance, not just raw frequency.

Palette generation:
- Maintain color harmony.
- Ensure sufficient contrast.
- Generate semantic names (primary, secondary, accent).
- Provide light and dark variations.

Export:
- Support common formats (CSS, Tailwind, SCSS, JSON, iOS, Android).
- Include usage guidelines and example implementations.

# Export Formats

Provide the palette in whichever formats the request calls for. Default to CSS variables and Tailwind config when unspecified.

## CSS Variables

```css
:root {
  --color-primary: #3B82F6;
  --color-secondary: #0EA5E9;
  --color-background: #F8FAFC;
  --color-text: #1E293B;
  --color-accent: #10B981;
}
```

## Tailwind Config

```js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#EFF6FF',
          500: '#3B82F6',
          900: '#1E3A8A',
        },
      }
    }
  }
}
```

## SCSS Variables

```scss
$primary: #3B82F6;
$secondary: #0EA5E9;
$background: #F8FAFC;
$text: #1E293B;
$accent: #10B981;
```

## JSON

```json
{
  "primary": "#3B82F6",
  "secondary": "#0EA5E9",
  "background": "#F8FAFC",
  "text": "#1E293B",
  "accent": "#10B981"
}
```

## Android XML

```xml
<color name="primary">#3B82F6</color>
<color name="secondary">#0EA5E9</color>
```

## iOS Swift

```swift
extension UIColor {
  static let primary = UIColor(hex: "3B82F6")
  static let secondary = UIColor(hex: "0EA5E9")
}
```

# Output Template

Use this structure when reporting an extracted palette. Replace bracketed values with real data.

```
COLOR PALETTE EXTRACTOR

Source: [Image / Website URL]

----------------------------------------
PRIMARY PALETTE
----------------------------------------

1. Primary Color
   HEX: #3B82F6
   RGB: rgb(59, 130, 246)
   HSL: hsl(217, 91%, 60%)
   Usage: Main brand color, primary buttons, links
   Prominence: 32%

2. Secondary Color
   HEX: #0EA5E9
   RGB: rgb(14, 165, 233)
   HSL: hsl(199, 89%, 48%)
   Usage: Accent elements, hover states
   Prominence: 18%

3. Background
   HEX: #F8FAFC
   RGB: rgb(248, 250, 252)
   HSL: hsl(210, 40%, 98%)
   Usage: Page background, cards
   Prominence: 25%

4. Text Primary
   HEX: #1E293B
   RGB: rgb(30, 41, 59)
   HSL: hsl(217, 33%, 17%)
   Usage: Body text, headings
   Prominence: 15%

5. Accent
   HEX: #10B981
   RGB: rgb(16, 185, 129)
   HSL: hsl(158, 84%, 39%)
   Usage: Success states, CTAs
   Prominence: 10%

----------------------------------------
COLOR SCALE (Tailwind-style)
----------------------------------------

Primary:
  50:  #EFF6FF  [lightest]
  100: #DBEAFE
  200: #BFDBFE
  300: #93C5FD
  400: #60A5FA
  500: #3B82F6  [base]
  600: #2563EB
  700: #1D4ED8
  800: #1E40AF
  900: #1E3A8A  [darkest]
  950: #172554

----------------------------------------
COLOR HARMONY SCHEMES
----------------------------------------

Complementary:
  Base: #3B82F6 (blue)
  Complement: #F6823B (orange)

Analogous:
  #3B82F6 (blue)
  #3BF6D9 (cyan)
  #3B3BF6 (indigo)

Triadic:
  #3B82F6 (blue)
  #F6823B (orange)
  #82F63B (green)

----------------------------------------
ACCESSIBILITY CHECKS
----------------------------------------

Contrast Ratios (WCAG 2.1):

Text on Background:
  #1E293B on #F8FAFC: 14.2:1  AAA (excellent)

Primary on Background:
  #3B82F6 on #F8FAFC: 4.8:1  AA (good)

White text on Primary:
  #FFFFFF on #3B82F6: 4.6:1  AA (good)

Accent on Background:
  #10B981 on #F8FAFC: 3.2:1  AA Large text only

Recommendations:
- Use darker shade of accent for small text
- Primary button text should be white (#FFFFFF)
- Consider #047857 for better contrast

----------------------------------------
COLOR PSYCHOLOGY
----------------------------------------

Blue (#3B82F6):
- Trust, professionalism, calm
- Common for: Tech, finance, healthcare

Cyan (#0EA5E9):
- Clarity, innovation, energy
- Common for: SaaS, communications, modern brands

Green (#10B981):
- Growth, success, health
- Common for: Environmental, finance, wellness

----------------------------------------
DESIGN SYSTEM INTEGRATION
----------------------------------------

Suggested Usage:
- Primary: Main CTAs, links, active states
- Secondary: Secondary buttons, highlights
- Background: Page/card backgrounds
- Text: Body copy, headings
- Accent: Success messages, highlights

Color Roles:
- Success: #10B981 (green accent)
- Warning: #F59E0B (generate from palette)
- Error: #EF4444 (generate complement)
- Info: #3B82F6 (primary blue)
```