π§π»ββοΈ Advanced Color Harmony Generator - Transform any color into comprehensive Dracula-themed palettes using 10 modern color science standards.
- π¨ 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
- 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
- Visit the app: https://anselmoo.github.io/dracula-palette/
- Enter any color in the input field (try
#ff0000
,rgb(255,0,0)
, orred
) - See suggestions - The app will show the 5 closest Dracula colors
- Generate palettes - Use the palette generator to create extended color schemes
- Export - Download your palettes in various formats (CSS, SCSS, JSON)
- Enter any color in the input field (try
#ff0000
,rgb(255,0,0)
, orred
) - Discover harmonies - The app will show the 5 closest Dracula colors with similarity scores
- Click suggestions to highlight them in the palette
- Export individual colors - Click the export button on any color for HEX, RGB, HSL, OKLCH, LAB, etc.
- Select a Dracula color from the main palette
- 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
- Generate extended palette - Get 8-12 systematically created variants per standard
- Check accessibility - Use "Make Accessible" for WCAG-compliant variants
- Export your palette - Download in CSS, SCSS, or JSON format
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.
Support for 10 modern color standards organized by use case:
- CIE LAB curves
- 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)
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
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
- 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/
- 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)
-
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)
- npm:
-
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)
- npm:
See scripts/README.md for detailed release documentation.
This project is inspired by:
- Material Color Converter by PKief
- Dracula Theme official specification
- Modern color science research (OKLCH, CAM16-UCS)
This project is licensed under the MIT License - see the LICENSE file for details.
- 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