色変換
#ca4e4e
≈ Chestnut Rose
バリエーション
このセクションでは、選択した色を基準に、純粋な白と黒をそれぞれ10%ずつ加えたティント（明色）とシェード（暗色）を正確に生成します。
プロのアドバイスだ： ホバー状態やシャドウにはシェードを、ハイライトや背景には色合いを使う。
シェード
ベースカラーに黒を加えることで、よりダークなバリエーションが生まれる。
ティント
ベースカラーに白を加えることで、より明るいバリエーションが生まれる。
一般的な使用例
- • UIコンポーネントの状態（ホバー、アクティブ、無効）
- • シャドウとハイライトで奥行きを出す
- • 一貫したカラーシステムを構築する
デザイン・システムのヒント
これらのバリエーションは、まとまりのあるカラーパレットの基礎を形成する。プロジェクト全体の一貫性を保つためにエクスポートする。
色の組み合わせ
それぞれの配色は独自の雰囲気を持っています。配色ハーモニーを参考に、効果的な色の組み合わせを見つけましょう。
使用方法
任意の色をクリックすると、その16進数の値がコピーされる。これらの組み合わせは、視覚的な調和を生み出すことが数学的に証明されている。
なぜそれが重要なのか
色のハーモニーはバランスを生み出し、デザインに特定の感情を呼び起こす。
補色
色相環で正反対に位置する色（色相差180度）の組み合わせ。高いコントラストが生まれます。
スプリットコンプリメンタリー（分裂補色）
ベースとなる色と、その補色の両隣に位置する2色（補色から±30度）の組み合わせ。補色配色のような大胆さを持ちながら、より多様な表現が可能です。
トライアド（3色配色）
色相環で120度ずつ均等な間隔で配置された3色の組み合わせ。1色をメインカラーとし、他の2色をアクセントとして使うのが効果的です。
類似色
色相環で隣り合う3色（色相差30度）で、同じ明度と彩度を持つ組み合わせ。まとまりのある、穏やかな印象を与えます。
モノクロマティック（単色）
同じ色相で、明度を±50%変化させた3色の組み合わせ。繊細で洗練された印象を与えます。
テトラード（4色配色）
色相環で60度ずつ離れた2組の補色を組み合わせた配色です。
色彩理論の原理
バランス
ドミナントカラーを1色使い、セカンダリーカラーでサポートし、アクセントは控えめにする。
コントラスト
読みやすさとアクセシビリティのために、十分なコントラストを確保する。
ハーモニー
色彩は、統一された視覚体験を生み出すために協力し合うべきである。
カラーコントラストチェッカー
色の組み合わせをテストし、テキストの読みやすさに関するWCAGアクセシビリティ基準を満たしていることを確認する。
テキストの色
背景色
コントラスト
WCAG基準
誰もが天才だ。しかし、木登りの能力で魚を判断すれば、魚は一生、自分は劣っていると信じて生きることになるだろう。