Design

マテリアルデザインカラーシステム

Googleの包括的なデザインシステムで、UIコンポーネント全体における色の選択・テーマ設定・適用に対する体系的なアプローチを定義する。

Material Design's color system is built around primary and secondary color roles, each with multiple tonal variants. Material Design 3 (Material You) introduced dynamic color, which generates an entire UI palette from a single seed color using the HCT (Hue-Chroma-Tone) color space. The system defines 13 tonal palettes and maps them to specific UI roles like surface, on-surface, primary-container, and on-primary. This systematic approach ensures consistent contrast ratios and visual hierarchy. The Material color utilities provide tools for generating accessible color schemes from any starting color.

試してみる

パレットジェネレーター

補色、類似色、トライアド、スプリットコンプリメンタリー配色を使用して調和のとれたカラーパレットを生成します。

コントラストチェッカー

WCAG 2.1ガイドラインに基づいてカラーコントラスト比を確認します。通常テキストと大きなテキストのAA・AAA準拠をテストします。

関連記事

バウハウスの色彩理論：カンディンスキー、クレー、イッテン

イッテン、カンディンスキー、クレーによるバウハウス色彩理論を探索します。基本的な形色協会、色球、および現代的なデザインでのバウハウスの遺産を学びます。