カラーパレットを生成する方法
色理論に基づいて、ベースカラーから調和のとれたカラーパレットを作成します。
问题
ブランドカラーがあり、デザインシステム用の調和のとれたフルパレットが必要です。
前提条件
- 色彩理論の理解
- 色の調和に関する知識
ステップ
-
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
期待される結果
デザインシステムに十分な多様性とコントラストを備えた、調和のとれたカラーパレット。
よくあるエラー
- 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.