Skip to content

πŸ§›πŸ»β€β™‚οΈ Advanced Color Harmony Generator - Transform any color into comprehensive Dracula-themed palettes

License

Notifications You must be signed in to change notification settings

Anselmoo/dracula-palette

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

77 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Dracula Palette

πŸ§›πŸ»β€β™‚οΈ Advanced Color Harmony Generator - Transform any color into comprehensive Dracula-themed palettes using 10 modern color science standards.

Dracula Color Decomposition

✨ Features

🎯 Core Features (βœ… Live)

  • 🎨 Color Harmony Generation: Transform any CSS color (hex, rgb, hsl, color names) into comprehensive Dracula-themed color harmonies
  • 🌈 Advanced Palette System: Generate extensive color palettes using 10 different color science standards
  • 🎯 Intelligent Color Matching: Find the 5 closest Dracula colors with precise similarity percentages
  • πŸ“Š Professional Color Standards: Support for Material Design 3, HSLuv, OKLCH, HCL, CAM16-UCS, IPT, Color Harmony, CIE LAB, HPLuv, and Cubehelix
  • β™Ώ Accessibility Engineering: Built-in WCAG compliance with automated "Make Accessible" color harmonies
  • πŸ“ Professional Export: Export individual colors (multiple formats) and complete palettes (CSS, SCSS, JSON)
  • πŸ“± Responsive Design: Optimized experience across desktop and mobile devices
  • ⚑ Modern Architecture: Built with Vue 3, TypeScript, and Vite for peak performance

🚧 Coming Soon

  • TailwindCSS & Figma Export: Additional export formats (code ready, UI integration pending)
  • Batch Processing: Upload and process multiple colors simultaneously
  • Advanced Color Harmonies: Split-complementary, tetradic, and complex color schemes
  • Color Vision Simulation: Preview palettes for different types of color blindness

πŸš€ Quick Start

  1. Visit the app: https://anselmoo.github.io/dracula-palette/
  2. Enter any color in the input field (try #ff0000, rgb(255,0,0), or red)
  3. See suggestions - The app will show the 5 closest Dracula colors
  4. Generate palettes - Use the palette generator to create extended color schemes
  5. Export - Download your palettes in various formats (CSS, SCSS, JSON)

🎯 Usage Guide

Basic Color Harmony Matching

  1. Enter any color in the input field (try #ff0000, rgb(255,0,0), or red)
  2. Discover harmonies - The app will show the 5 closest Dracula colors with similarity scores
  3. Click suggestions to highlight them in the palette
  4. Export individual colors - Click the export button on any color for HEX, RGB, HSL, OKLCH, LAB, etc.

Advanced Palette Generation

  1. Select a Dracula color from the main palette
  2. Choose color standards using quick category buttons:
    • Popular: Material Design 3, HSLuv, OKLCH
    • Scientific: HCL, CAM16-UCS, IPT, Cubehelix
    • Web: CIE LAB curves
    • Artistic: Color Harmony, HPLuv
    • All: All 10 standards
  3. Generate extended palette - Get 8-12 systematically created variants per standard
  4. Check accessibility - Use "Make Accessible" for WCAG-compliant variants
  5. Export your palette - Download in CSS, SCSS, or JSON format

The Dracula Advantage

Traditional color pickers give you one color. The Dracula theme gives you 10 carefully curated colors. But complex designs need hundreds of colors that work together.

This solves the original Dracula bottleneck by providing hundreds of systematically generated colors that maintain the Dracula aesthetic while offering the variety needed for complex designs.

🎨 Color Science

Support for 10 modern color standards organized by use case:

🌟 Popular Standards

πŸ”¬ Scientific Standards

🌐 Web Standards

🎨 Artistic Standards

Key Features

  • Perceptually Uniform Calculations with OKLCH-based similarity scoring
  • WCAG Accessibility Compliance with "Make Accessible" button for contrast ratios
  • Multiple Export Formats: Individual colors (HEX, RGB, HSL, OKLCH, LAB) and palettes (CSS, SCSS, JSON)

πŸ§›β€β™‚οΈ Dracula Theme Colors

Dracula Color Palette

🀝 Contributing

We welcome contributions! Please see our Contributing Guide for details on:

  • Development setup and workflow
  • Code standards and testing
  • Adding new color science algorithms
  • Submitting bug reports and feature requests

πŸš€ Release & Deployment

Automated Releases

This project uses automated releases with semantic versioning:

# Create a new release (patch version)
./scripts/release.sh patch

# Create a minor version release
./scripts/release.sh minor

# Create a major version release
./scripts/release.sh major

Available Packages

  • npm (stable): @anselmoo/dracula-palette@latest
  • npm (dev): @anselmoo/dracula-palette@dev
  • Docker (stable): ghcr.io/anselmoo/dracula-palette:latest
  • Docker (dev): ghcr.io/anselmoo/dracula-palette:dev
  • GitHub Pages: https://anselmoo.github.io/dracula-palette/

Security Features

  • Container Signing: All Docker images are signed with Cosign using GitHub's OIDC Token for enhanced security and supply chain transparency
  • Keyless Signing: No private keys required - uses GitHub's OIDC identity for tamper-proof image signatures
  • Token-Based Authentication: Docker publishing uses only GITHUB_TOKEN (no personal access tokens required)

Release Channels

  1. Development Builds (main branch): Overwritten dev tags for testing

    • npm: @anselmoo/dracula-palette@dev (always latest main)
    • Docker: ghcr.io/anselmoo/dracula-palette:dev (always latest main)
  2. Semantic Releases (Git tags): Traditional semver (v1.2.3)

    • npm: @anselmoo/dracula-palette@latest (stable releases)
    • Docker: ghcr.io/anselmoo/dracula-palette:latest (stable releases)

See scripts/README.md for detailed release documentation.

🌟 Inspiration

This project is inspired by:

πŸ“„ License

This project is licensed under the MIT License - see the LICENSE file for details.

πŸ™ Acknowledgments

  • Dracula Theme community
  • PKief for the Material Color Converter inspiration
  • BjΓΆrn Ottosson for OKLCH color space research
  • Vue.js and Vite teams for excellent developer tools

πŸ”— Links

About

πŸ§›πŸ»β€β™‚οΈ Advanced Color Harmony Generator - Transform any color into comprehensive Dracula-themed palettes

Topics

Resources

License

Contributing

Stars

Watchers

Forks

Packages

 
 
 

Contributors 3

  •  
  •  
  •