ベースカラーからカラーパレットを生成する

1 つのベースカラーから、補色、類似色、トリアード、シェード/ティントのバリエーションを導出し、デザインシステムに活かします。

1

デザインシステムには複数の関連する色が必要です。ベース色のシェードとティントに加え、調和のとれたアクセント(補色、類似色、トライアド)。1 つのベース色からこれらを生成すると、視覚的な一貫性が保証されます。
2

カラーパレットジェネレーター →
ベース色を入力します。ツールはシェード(暗くしたもの)、ティント(明るくしたもの)、調和のとれた変種(補色、類似色、トライアド、スプリットコンプリメンタリー)を選択した形式で生成します。
3

カラーミキサー →
2 つの特定の色を混ぜて中間のシェードを見つけます。グラデーションのストップや、パレットの 2 色間のホバー状態に便利です。
4

カラーコンバーター →
生成されたパレットの色を、デザインシステムが使う形式に変換します(CSS は hex、Tailwind は HSL、Figma は RGB)。

よくある質問

シェードとティントの違いは?: シェードはベース色に黒を混ぜて(暗く)作ります。ティントは白を混ぜて(明るく)作ります。HSL で言えば、シェードは明度を下げ、ティントは明度を上げます。トーンはグレーを混ぜて(彩度を下げて)作ります。
どの調和スキームを使うべきですか?: 補色(色相環の反対側)は高いコントラストを生み、CTA アクセントに使います。類似色(隣接)は落ち着いた一体感のある見た目を生み、背景や微妙な変化に使います。トライアド(等間隔)は鮮やかでバランスのとれたパレットを生み、イラストや多分類チャートに使います。

このタスクを解決するワークフロー

Hex カラーから RGB とコントラストチェック

Hex カラーを RGB に変換し、その後 WCAG コントラスト比をチェックする。

パイプライン

関連ツール

カラーパレットジェネレーター

Generate color palettes from a base color: complementary, analogous, triadic, tetradic, or monochromatic schemes。無料、プライベート、100%クライアントサイド。

カラーミキサー

Blend two colors by ratio using normal, multiply, screen, overlay, darken, or lighten blend modes。無料、プライベート、100%クライアントサイド。

カラーコンバーター

Convert colors between HEX, RGB, HSL, HSV, and CMYK color spaces. Auto-detects input format。無料、プライベート、100%クライアントサイド。

画像カラーピッカー

Extract dominant colors from image。無料、プライベート、100%クライアントサイド。