Design Color Hub

Color Hub

Professional color tool suite covering scheme generation, scale standards, accessibility checks, and design output.

40 Modules

5 Categories

OKLCH Perceptually Uniform

Create

Color Schemes Primary, harmony, wheel and scheme generator Hue Ring Complementary, analogous and triadic hue relationships Monochrome Generate UI hierarchy palette from a single hue Style Palette Morandi, macaron, earthy tones OKLCH generator Inspiration Cinematic, natural and masterwork color palettes Itten Contrast Demonstration of 7 color contrast principles Simultaneous Visual illusions of same color on different backgrounds Kobayashi 130 adjectives mapped to color coordinate regions

Extract & Parse

Image Extract Extract primary and accent colors from images Screen Picker Pick any color from your screen Color Converter HEX, RGB, HSL, CMYK, Lab and OKLCH interconversion Named Colors Chinese traditional, Japanese and CSS named color lookup Pantone ΔE nearest-match Pantone spot color lookup Temperature Analyze warm/cool balance and visual tendency Color Library Traditional, popular and standard color libraries

Scale & Standards

OKLCH Scale Perceptually uniform steps, truly equal lightness intervals Color Scale Generate 50–950 UI scale Radix 12 shadcn / Radix named scale and semantic system Hue Shift Apply hue rotation at light and dark ends, natural transition Dark Adapt Light / dark theme pairing, auto-derive dark mode values Brand Reverse One color → Primary / Accent / Neutral / Surface system Limited Palette 3 or 5 color challenge, optimal contrast algorithm Palette Tools Compare, deduplicate, Delta E and reduce colors

Design Output

Semantic Tokens Assign primary, background, text and state colors Tailwind Export Generate tailwind.config.js / v4 @theme, multi-scale Gradient Generate linear, radial and conic gradients Shadow Derive hue-shifted chromatic shadows from primary color Color Blend Mix two colors by ratio and generate transition palettes Dataviz Palette Perceptually uniform, color-blind friendly chart palettes Export Spec CSS, JSON, CSV and SVG

Preview & Validate

Multi-Scene App, web, email, social and presentations Scene Preview Business card, VI and packaging color simulation Value Preview Grayscale check for clear palette hierarchy Contrast Fix Auto-fix text and background contrast ratios APCA Contrast Next-gen accessibility contrast standard check Area Contrast Simulate primary, secondary and accent color areas Ratio Palette Goethe, golden ratio and Fibonacci area distribution Templates Apply color systems by scene and industry Print Simulation CMYK, ICC and ink quantity check Favorites Save, manage and apply color palettes

Color Hub · 40 professional modules · Runs locally, data never leaves your browser