配色設定
Advertisement
ダークモード・カラースワップとは？
本ツールは、Webサイトやアプリのダークモード対応（Dark Mode UI Support）を効率化するための設計ツールです。 ライトモードで使用しているプライマリーカラーや背景色を入力すると、彩度と輝度を動的に再計算し、ダークテーマでも一貫性を損なわない最適なペアカラーを算出します。
こんなシーンで便利です
ブランドカラーのダークモード対応
企業のロゴやテーマカラーをダークモードでも認識しやすく調整。鮮やかさを保ちつつ、暗い背景に馴染む色相をシミュレーションします。
UIコンポーネントの設計
ボタン、カード、入力フォームなどのサーフェス（表面）カラーの階調を生成。要素の重なり（標高）を影ではなく色の深さで表現する設計に役立ちます。
アクセシビリティの確保
暗い背景で見落とされがちなテキストの視認性をチェック。コントラストが強すぎて目が疲れる「ハレーション」を防ぐ配色を提案します。
フロントエンド実装の効率化
CSSカスタムプロパティ（--color-bg-light: #fff; --color-bg-dark: #121212;）を定義するためのカラー値を一括で収集できます。
使い方は簡単 4ステップ
- 「背景色（Background）」や「プライマリー（Primary）」などの基本色を入力します。
- 「ダークモード色を自動生成」ボタンを押して、アルゴリズムによる推奨値を算出します。
- プレビュー画面を見ながら、実際のUIに近い見え方を確認・微調整します。
- 生成されたHEXコードをコピーし、開発環境のCSS変数やスタイルシートに適用します。
※プレビューエリアは実際のブラウザレンダリングを模しており、ライト・ダークの切り替え時のギャップを直感的に把握できます。
ご利用時の注意点
- 計算アルゴリズムについて：本ツールはHSL（色相・彩度・輝度）モデルを採用しており、ダークモードでの「彩度低下（Desaturation）」を自動的に適用しています。
- サーフェス階調：ダークモードでは影（Shadow）が見えにくいため、重なりを表現するには背景色よりわずかに明るい色（Surface）を使用するのが一般的です。
- テキストの配色：真っ白（#FFFFFF）よりも、わずかに透過させた白やグレーを使用すると、目に優しいユーザー体験になります。
Advertisement
ダークモード設計の推奨配色・基準表
GoogleのMaterial Designやアクセシビリティガイドライン（WCAG）に基づく、ダークモードUI設計の標準的な数値目安です。
| 要素の種類 | 推奨カラー/状態 | 設計のポイント・基準 |
|---|---|---|
| 基本背景色 | #121212 | 真っ黒(#000)より深いグレーが目の負担を軽減し推奨されます。 |
| プライマリー | 彩度を10〜20%低下 | 暗い背景でのハレーションを防ぐため、ライト時より彩度を落とします。 |
| テキスト（高） | 不透明度 87% | 純白よりもわずかに透過させることで、読みやすさが向上します。 |
| テキスト（中） | 不透明度 60% | 補足説明やサブタイトルに使用し、視覚的な階層を作ります。 |
| サーフェス(1dp) | 背景 + 白5%重畳 | 要素が浮いている（標高が高い）ほど、背景色を明るく設定します。 |
| エラー色 | #CF6679 | 彩度の高い赤は目に刺さるため、パステル調の赤を使用するのが一般的。手段 |
| コントラスト比 | 4.5:1 以上 | WCAG 2.1のAA準拠には、背景と文字の間でこの比率が必要です。 |
【ダークモード設計のアクセシビリティ】
モダンなUI設計では、単なる色の反転ではなく「視覚的階層（Elevation）」と「可読性（Readability）」の両立が求められます。 本ツールで生成される配色パレットは、暗い環境でのデバイス利用時に「目に刺さる光」を抑えつつ、コンテンツの識別性を保つアルゴリズムをベースにしています。
【開発者向けのTips】
CSSで実装する際は @media (prefers-color-scheme: dark) だけでなく、CSSカスタムプロパティ（変数）を活用し、生成されたHEXコードを定義することで、ライト/ダークの切り替えをスムーズに制御可能です。 また、画像やアイコンの彩度もダークモード時にはわずかに（80%程度に）落とすと、より洗練された印象を与えられます。
よくある質問（FAQ）
Q.彩度をあえて下げるのはなぜですか？
A. 暗い背景に対して高い彩度の色を配置すると、光が滲んで見える現象が起きやすく、可読性が低下するためです。彩度を10%〜20%ほど落とすのがセオリーとされています。
Q.Primary以外の色は自由に増やせますか？
A. 「+ 色を追加する」ボタンから、セカンダリーカラーやアクセントカラー、エラー色など、プロジェクトに必要なだけ色を追加して一括管理できます。
Q.保存機能はありますか？
A. 本ツールはプライバシー配慮のためサーバー保存を行いません。必要に応じて生成されたHEXコードを別途保存してください。
あなたの声で、
このツールをより鋭く。
「こんな機能が欲しい」「ここを直してほしい」といったご意見や、新しいツールのリクエストを募集しています。エンジニアが直接目を通し、開発の参考にさせていただきます。