Weable Color

Accessibility-first workflow integration platform for VS Code. Real-time color contrast feedback, WCAG diagnostics, and seamless palette sync across VS Code, Figma, and colorStudio. Build accessible designs faster with workflow integration that works where you work.

Features

Real-time Color Analysis

• Hover tooltips with contrast ratios and WCAG compliance status
• Color previews in tooltips for instant visual feedback
• Multi-format support: Hex, RGB, RGBA, HSL, HSLA, and named colors

Accessibility Diagnostics

• Squiggly underlines for low contrast color combinations
• Problems panel integration with accessibility warnings
• Quick fix suggestions for better color alternatives

Smart Commands

• Generate Accessible Color Palette: Create 5-color WCAG-compliant palettes from any base color
• Open Color Picker: Interactive color selection with accessibility feedback
• Multi-language support: CSS, SCSS, LESS, JavaScript, TypeScript, React, HTML

Workflow Integration (Pro)

• Sync palettes from colorStudio to VS Code with one command
• Import from colorStudio: Use Weable Color: Import from colorStudio command
• Real-time sync across VS Code, Figma, and colorStudio
• Team collaboration with shared palette libraries
• Seamless workflow - no context switching between tools

Developer Experience

• Zero configuration - works out of the box
• Lightweight - minimal performance impact
• Real-time feedback - instant accessibility insights

How It Works

1. Open any file with color codes (CSS, JS, TS, HTML, etc.)
2. Hover over colors to see contrast ratios and WCAG compliance
3. Get instant feedback on accessibility issues
4. Generate palettes from any color with one command
5. Fix issues with quick-fix suggestions

Beta Feedback

We welcome your feedback to help improve Weable Color. You can share your thoughts by:

• Running the command: Weable: Send Beta Feedback from the Command Palette (Cmd+Shift+P)
• Or filling out the form: Beta Feedback Form

Supported Color Formats

/* Hex colors */
color: #ff0000;
color: #f00;

/* RGB colors */
color: rgb(255, 0, 0);
color: rgba(255, 0, 0, 0.5);

/* HSL colors */
color: hsl(0, 100%, 50%);
color: hsla(0, 100%, 50%, 0.5);

/* Named colors */
color: red;
color: blue;
color: green;
/* And 50+ more named colors */

Commands

Generate Accessible Color Palette

1. Place cursor on any color code
2. Press Cmd+Shift+P (Mac) or Ctrl+Shift+P (Windows/Linux)
3. Type "Weable: Generate Accessible Color Palette"
4. Get a new document with 5-color WCAG-compliant palette

Open Color Picker

1. Press Cmd+Shift+P (Mac) or Ctrl+Shift+P (Windows/Linux)
2. Type "Weable: Open Color Picker"
3. Use interactive color picker with accessibility feedback

Import from colorStudio (Pro Tier)

1. Generate a palette in colorStudio
2. Click "Sync to VS Code" to get a sync token
3. In VS Code, press Cmd+Shift+P (Mac) or Ctrl+Shift+P (Windows/Linux)
4. Type "Weable Color: Import from colorStudio"
5. Paste your sync token when prompted
6. Your palette is imported as a TypeScript file with CSS variables

Example Output

When you generate a palette from #ff0000 (red), you get:

// Accessible Color Palette Generated by weableColor
// Base color: #ff0000
// Generated: 2025-07-31T04:30:00.000Z

const accessiblePalette = ["#ff0000", "#ffffff", "#000000", "#cccccc", "#333333"];

// Usage:
// - Primary: #ff0000
// - Secondary: #ffffff
// - Accent: [#000000](https://github.com/weable/weable-color-vscode/issues/000000)
// - Neutral: #cccccc
// - Background: [#333333](https://github.com/weable/weable-color-vscode/issues/333333)

// CSS Variables (copy-paste ready):
:root {
  --color-primary: #ff0000;
  --color-secondary: #ffffff;
  --color-accent: [#000000](https://github.com/weable/weable-color-vscode/issues/000000);
  --color-neutral: #cccccc;
  --color-background: [#333333](https://github.com/weable/weable-color-vscode/issues/333333);
}

Pricing & Licensing

Accessibility-First Freemium Model: All 6 color harmonies are free. Pro tier focuses on workflow integration and team collaboration.

Free Tier

• All 6 color harmonies (complementary, triadic, tetradic, split-complementary, analogous, monochromatic)
• VS Code Extension (Basic)
• Real-time contrast checks
• Basic palette generation
• Community support

Pro License ($4.99/month or $49.99/year)

• Workflow integration (VS Code ↔ Figma ↔ colorStudio sync)
• Real-time palette sync across tools
• Import from colorStudio command
• Team collaboration features
• Advanced export formats (no watermark)
• API access for custom integrations
• Priority support & updates

API License ($19.99/month)

• All Pro features
• Unlimited API calls
• Team collaboration & shared libraries
• Custom integration support
• Early access to new features

Purchase licenses at weable.pro/products/weable-color/pricing

License Key Setup

1. Purchase a license from our website
2. Receive license key via email (automated delivery)
3. Open VS Code Settings
4. Search for "weableColor.licenseKey"
5. Enter your license key
6. Restart VS Code to activate full features

Our licensing system integrates with Gumroad payments and Supabase user management for secure, automated license delivery.

Installation

1. Open VS Code
2. Go to Extensions (Cmd+Shift+X)
3. Search for "Weable Color"
4. Click Install
5. Purchase a license to unlock Pro features

Supported Languages

• CSS - Full support
• SCSS/LESS - Full support
• JavaScript - Color string detection
• TypeScript - Color string detection
• React/JSX - Color prop detection
• HTML - Style attribute detection
• JSON - Color value detection
• Markdown - Inline color detection

Accessibility Standards

This extension helps you meet:

• WCAG 2.1 AA - Minimum contrast ratios
• WCAG 2.1 AAA - Enhanced contrast ratios
• Section 508 - Federal accessibility requirements
• ADA Compliance - Americans with Disabilities Act

Quick Start

1. Install the extension
2. Open a CSS file with color codes
3. Hover over colors to see accessibility info
4. Generate palettes from any color
5. Fix issues with quick-fix suggestions

Pro Workflow Integration

1. Create palettes in colorStudio (web)
2. Sync to VS Code with one click
3. Import palettes using Weable Color: Import from colorStudio command
4. Use in your code - palettes imported as TypeScript with CSS variables
5. Sync to Figma (coming soon) for complete workflow integration

Contributing

We welcome contributions! Please see our Contributing Guide for details.

License

Proprietary Software License - see LICENSE file for details.

This software is licensed, not sold. Unauthorized use is prohibited.

🔗 Links

• Website: weable.pro
• Documentation: weable.pro/docs
• GitHub: github.com/weable/weable-color-vscode
• Issues: GitHub Issues

⭐ Support

If you find this extension helpful, please:

• ⭐ Star the repository
• 📝 Report issues on GitHub
• 💬 Join our community discussions

Made with ❤️ by the Weable team