如何Generate Color Palettes
Create harmonious 颜色 palettes 从进制颜色 using 颜色 theory.
问题
你有 brand 颜色和 need 完整 palette 的 harmonious colors 为设计系统.
前置条件
- Understanding 的颜色 theory
- Knowledge 的颜色 harmonies
步骤
-
1. Choose a base color and harmony type
Select your base color (e.g., brand blue #0066CC). Choose a harmony scheme: complementary (opposite on the wheel), analogous (adjacent), triadic (evenly spaced), or split-complementary. The harmony type determines the relationship between palette colors.
输入base: #0066CC, harmony: analogous输出scheme selected -
2. Generate the palette
Convert the base color to HSL, then rotate the hue to generate harmony colors. For analogous, use ±30° hue shifts. For complementary, use 180°. For triadic, use 120° and 240°. Generate shades and tints by adjusting lightness for a full range.
输入base + analogous输出#0066CC, #003DCC, #0099CC, ... -
3. Refine and organize
Review the generated palette for visual harmony and accessibility. Add neutral colors (grays) for text and backgrounds. Ensure sufficient contrast between palette colors. Organize into a design system with primary, secondary, accent, and neutral roles.
输入raw palette输出structured design system
预期结果
harmonious 颜色 palette 具有充分 variety 和 contrast 为设计系统.
常见错误
- Palette colors clash
- Try a different harmony type. Analogous is safest; complementary can be jarring. Adjust saturation and lightness to harmonize.
- Insufficient contrast for text
- Check contrast ratios between palette colors. Ensure at least one combination meets WCAG 4.5:1 for text.
排障指引
- If the palette feels off, adjust the base color's saturation or try a different harmony.
- Test the palette in context (buttons, text, backgrounds) before finalizing.
安全限制
- Color palette generation is a design tool with no security implications.