🖥️
🎨 PaletteForge
Desktop Only Tool
PaletteForge is built for desktop browsers color pickers, sliders, and live previews need a larger screen to work properly.
For the best experience, open this page on a laptop or desktop.
🎯 Harmony Modes
🌊 Tailwind Config
♿ WCAG Contrast
Some features may not work correctly on mobile.
PaletteForge
Color Palette & Tailwind Generator
🎯 Harmony Modes
🌊 Tailwind Config
♿ WCAG Contrast
❤ Save Palettes
Developer-Ready Color Systems
Generate accessible palettes, apply harmony modes, and preview on live UI components. Export to Tailwind, CSS, or JSON tokens instantly.
Read Walkthrough
→
Shade Scale
50 → 950
50
100
200
300
400
500
600
700
800
900
950
Live UI Component Preview
Color Blindness Simulation
Full Palette Explorer
Click any swatch to copy its hex value
Code & Exports Dashboard
High-fidelity design tokens and components for your tech stack
tailwind.config.js
CSS Variables
🔲 Shadcn/ui (React)
HSL CSS variables , drop into globals.css
🅰️ Angular + Tailwind
tailwind.config.js with Angular content paths
⚙️ Angular Standalone
Ready-to-paste @Component with :host CSS vars
🌼 DaisyUI Theme
tailwind.config with daisyui theme object
⚛️ React Component
Themed component with inline CSS vars
📦 JSON Tokens
W3C-compliant design token format