MUTools

デザイン・配色の無料ツール

デザイン・配色ツールについて

配色やビジュアル作りに役立つ無料ツールを集めました。カラーピッカー・カラーコード変換・配色パレット生成・CSS グラデーション・コントラストチェッカー・ファビコン生成などを、登録不要・ブラウザだけで使えます。

デザイン・配色のタグが付いたツール一覧

ファビコン生成

画像をアップロードするだけで favicon.ico や Apple Touch・Android・PWA 用アイコンを全サイズ一括生成し、site.webmanifest と設置用 HTML も自動出力します。背景色・余白・角丸も調整可能。画像は外部に送信せずブラウザ内だけで処理するので、無料・登録不要で安全に使えます。

  • ジェネレーター
  • デザイン・配色

カラーピッカー

画像から色をスポイトで抽出し、カラーコードを取得できるツール。ルーペで拡大しながらピクセル単位で色を調べられ、HEX / RGB / HSL 切替やパレットのエクスポートに対応。無料・登録不要で、ブラウザだけで完結します。

  • デザイン・配色
  • 業務効率化

カラーコード変換

HEX・RGB・HSL・HSV・OKLCH のカラーコードを相互変換できる無料ツール。透明度付きの RGBA・8桁 HEX・HSLA にも対応し、入力した色を全フォーマットへ一括変換してワンクリックでコピーできます。CMYK の参考値も表示。ブラウザだけで完結します。

  • コンバーター
  • デザイン・配色

コントラストチェッカー

前景色（文字色）と背景色のコントラスト比をリアルタイムに算出する無料のコントラストチェッカー。WCAG 2.1 / 2.2 の AA・AAA 基準への合否判定に加え、合格色の自動提案・色覚特性シミュレーション・APCA にも対応。配色のアクセシビリティをブラウザだけで確認できます。

  • チェッカー
  • デザイン・配色
  • アクセシビリティ

配色パレット生成

ベースカラーを1色選ぶだけで、補色・類似色・トライアドなど配色理論に基づくカラーパレットを自動生成する無料の配色ジェネレーター。CSS変数・Tailwind・SCSS・JSON形式でエクスポートでき、コントラストの目安も確認できます。ブラウザだけで完結します。

  • ジェネレーター
  • デザイン・配色

CSSグラデーション生成

色や方向、カラーストップをGUIで操作してCSSグラデーションを自動生成する無料ツール。線形・放射・円錐（conic）グラデーションに対応し、不透明度の調整やCSS変数・Tailwind・SCSS形式での出力、共有URLにも対応。コピペですぐ使え、ブラウザだけで完結します。

  • ジェネレーター
  • 開発
  • デザイン・配色

他のタグ