カラーミキサー
2つの色を選んで配合比を動かすだけで、中間色、カラーステップ、すぐ貼り付けられる CSS を確認できます。
元のカラー
HEX コードを直接入力することも、カラーピッカーで選ぶこともできます。
カラー A
カラー B
配合比
0% はカラー A のまま、100% は完全にカラー B になります。
クイックプリセット
先に雰囲気を選び、その後ブランドカラーに寄せて微調整できます。CSS グラデーション
background にそのまま貼り付けて、必要に応じて角度や停止位置を調整できます。
混色結果
混色後の HEX、RGB、HSL と中間色ステップを同時に表示します。
中間色ステップ
0% から 100% までの混色プロセスを一覧できます。- カラー A とカラー B に混ぜたい 2 つの HEX コードを入力するか、カラーピッカーで色を選びます。
- スライダーを動かして、結果をカラー A 寄りにするかカラー B 寄りにするか調整します。
- 右側に HEX、RGB、HSL が即時更新されるので、デザインデータや CSS、デザインシステム資料にそのまま使えます。
- 下の中間色ステップでは複数の混色ポイントを確認でき、hover、border、背景レイヤー色の検討に便利です。
- 素早く試したい場合は、プリセットか「ランダム組み合わせ」を使って出発点を作れます。
ヒント: 出力される CSS グラデーションは完成形ではなく、2 色と中間色をプロトタイプに素早く持ち込むためのたたき台として使うのが便利です。
どんなときにこのツールを使いますか？
ブランドカラー、ボタン色、イラストの主色など 2 つの基準色があり、その中間色や段階色を探したいとき、またすぐ使える CSS グラデーションを作りたいときに役立ちます。
どの方法で色を混ぜていますか？
現在は RGB の線形補間で混色しています。直感的で高速なため、Web UI、背景、ラフなビジュアル検討の初期段階に向いています。
思っていた色と少し違って見えるのはなぜですか？
色空間ごとに混色ロジックが異なるためです。RGB は画面表示向けなので、印刷物や知覚的な均一さを重視する場合は、別の専門ツールで再調整する必要があります。
ブランド用の色スケール作成にも使えますか？
使えます。まず 5〜6 段階の中間色をすばやく作り、その中から hover、カード背景、区切り線、ハイライトに向く色を選ぶ使い方が効果的です。
RGB や HSL を直接入力できますか？
現在の主入力は HEX です。デザインと実装の間で最もやり取りしやすいためです。RGB や HSL の値がある場合は、サイト内のカラーツールで HEX に変換してから混色するとスムーズです。
生成された CSS はどこで使えますか？
Web の background にそのまま使えるほか、Figma、スライド、デザインシステム文書のたたき台としても使えます。
色彩コントラストとアクセシビリティ：WCAG基準・コントラスト比の計算原理と改善テクニック
色彩コントラスト比はアクセシブルなWebデザインの中核指標で、弱視・色盲・一般ユーザーのさまざまな環境での読みやすさに影響します。WCAG 2.1のAA/AAAレベル・相対輝度計算公式・よくある設計ミスと修正策を解説します。
カラーコード完全ガイド：RGB・HEX・HSL の変換原理とデザイン活用
RGB・HEX・HSL はすべて同じ色を表しますが、まったく異なる方法で記述します。本記事では各色モデルの設計思想・変換の数学・使い分けの基準から、WCAG アクセシビリティ対応まで徹底解説します。
画像フォーマットの選び方：JPG・PNG・WebP・GIF の違いと使い分け完全ガイド
なぜ PNG はJPGより何倍も大きくなるのか？WebP はいつ使うべきか？GIF はもう古いのか？圧縮の仕組みから解説し、状況別に最適なフォーマットを選ぶ判断軸を整理します。
SNS投稿の画像編集フロー：サイズ設計・ビジュアル統一・書き出し設定
SNS用クリエイティブの品質は、アイデアだけでなく制作フローで決まります。サイズ、構図、ブランド統一、書き出し設定まで、再現性のある画像編集手順を解説します。
Markdown完全ガイド：基本文法から実践活用まで
Markdownは、ライター・開発者・コンテンツクリエイターに最も使われている軽量マークアップ言語です。基本文法から高度なテクニック、各プラットフォームでの活用方法まで完全解説します。
PDF の結合・分割・圧縮ガイド：日常の文書整理を完全攻略
大きな PDF から必要なページだけ取り出したい、複数のレポートを1つにまとめたい、ファイルが大きすぎてアップロードできない――よくある PDF の悩みを、インストール不要で解決する方法を解説します。