Design Color Hub

Color Hub

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

50+ Modules

5 Categories

OKLCH Perceptually Uniform

工作台

Workspace Project palette dashboard: WCAG contrast, CMYK print simulation, scheme switching

取色

Image Extract Extract primary and accent colors from images Screen Picker Pick any color from your screen Limited Palette 3 or 5 color challenge, optimal contrast algorithm Brand Reverse One color → Primary / Accent / Neutral / Surface system

调色

Color Schemes Primary, harmony, wheel and scheme generator Color Scale Generate 50–950 UI scale OKLCH Scale Perceptually uniform steps, truly equal lightness intervals Radix 12 shadcn / Radix named scale and semantic system Monochrome Generate UI hierarchy palette from a single hue Hue Ring Complementary, analogous and triadic hue relationships Hue Shift Apply hue rotation at light and dark ends, natural transition Style Palette Morandi, macaron, earthy tones OKLCH generator

调整

Gradient Generate linear, radial and conic gradients Color Blend Mix two colors by ratio and generate transition palettes Semantic Tokens Assign primary, background, text and state colors Dark Adapt Light / dark theme pairing, auto-derive dark mode values Temperature Analyze warm/cool balance and visual tendency Area Contrast Simulate primary, secondary and accent color areas Ratio Palette Goethe, golden ratio and Fibonacci area distribution Palette Tools Compare, deduplicate, Delta E and reduce colors

检查

Contrast Fix Auto-fix text and background contrast ratios APCA Contrast Next-gen accessibility contrast standard check Value Preview Grayscale check for clear palette hierarchy Scene Preview Business card, VI and packaging color simulation Multi-Scene App, web, email, social and presentations Dataviz Palette Perceptually uniform, color-blind friendly chart palettes

交付

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 Tailwind Export Generate tailwind.config.js / v4 @theme, multi-scale Shadow Derive hue-shifted chromatic shadows from primary color Favorites Save, manage and apply color palettes Export Spec CSS, JSON, CSV and SVG

Resources

Color Library Traditional, popular and standard color libraries Templates Apply color systems by scene and industry Inspiration Cinematic, natural and masterwork color palettes Guides In-depth articles and interactive color theory