デザインツール一覧
カラーピッカー・CSSグラデーション・コントラスト比チェック・OGP生成など
5本のツールを無料・登録不要で提供
デザインでできること
デザインカテゴリには、WebデザイナーやSNS担当者・個人クリエイターが実務で使える3本のツールがあります。カラーピッカー（HEX・RGB・HSL相互変換）・CSSグラデーション生成ツール・コントラスト比チェッカーを揃えており、コードを書かずに色の管理やアクセシビリティ検証ができます。アクセシビリティ基準（WCAG 2.1）対応のコントラスト比確認・グラデーションのCSS自動生成など、日常のデザイン業務を大幅にスピードアップする機能をブラウザ上で完結させています。
基本的な使い方（3ステップ）
- ツールを選ぶ
色の変換・グラデーション生成・コントラストチェックのいずれかを選択します。
- カラーコードを入力
HEX（#RRGGBB）・RGB・HSLいずれのフォーマットでも入力できます。
- CSSコードをコピー
グラデーション生成ツールではCSSコードが自動生成され、ワンクリックでコピーできます。
デザインの全ツール一覧 （5本）
人気順に並んでいます。すべて無料・登録不要でブラウザから即使えます。
- おすすめカラーピッカー
画像をアップロードするだけでスポイトで色を取得し、HEX・RGB・HSL・HSV・CMYKの5形式で表示。主要8色を自動抽出・パレット生成・CSS変数/SCSS/JSON出力。補色・トライアドなど配色提案も。登録不要・ブラウザ完結。
- 人気OGP画像生成
OGP画像・ブログアイキャッチをブラウザだけで無料作成。Twitter/X・Facebook・Instagram・note・はてな・LinkedIn の6サイズ対応。テンプレート10種＋完全カスタム（背景色/グラデーション/画像/フォント/文字色）。PNG高解像度ダウンロード。設定をLocalStorageに保存。登録不要・サーバー送信なし。
- おすすめカラーパレット生成
ベースカラーを入力するだけで補色・類似色・トライアド・テトラード・スプリット補色・モノクロマティックの6配色を自動生成。各色のHEX/RGB/HSLをワンクリックコピー、CSS変数/Tailwind設定として一括エクスポート。登録不要・完全ブラウザ完結。
- コントラスト比チェッカー
前景色・背景色を入力するとWCAG 2.1のコントラスト比を即座に計算。AA/AAA合否をリアルタイムで確認できる無料アクセシビリティ検証ツール。
- CSSグラデーション生成
linear・radial・conic全グラデーションタイプに対応した日本語CSSグラデーション生成ツール。最大8色ストップ・20種プリセット・Tailwind出力・ワンクリックコピー。完全無料・登録不要・ブラウザ完結。
デザインの代表的な使い方・シーン別ガイド
どのツールをどんな場面で使うか、具体的な活用シーンを紹介します。
- Webデザイナー・フロントエンドエンジニア
デザインカンプのカラーコードをHEXからRGBに変換したい
カラーピッカーを使う - LP・バナー制作者
背景グラデーションのCSSコードを素早く生成したい
CSSグラデーション生成を使う - アクセシビリティ担当・UXデザイナー
テキストと背景色のコントラスト比がWCAG基準を満たすか確認したい
コントラスト比チェッカーを使う
よくある質問（FAQ）
- WCAG 2.1のコントラスト比の基準値はいくつですか?
-
WCAG 2.1 AA基準では通常テキストが4.5:1以上、大きなテキスト（18pt以上または14pt太字以上）が3:1以上必要です。AAA基準はそれぞれ7:1・4.5:1です。
コントラスト比チェッカーを試す - HEX・RGB・HSLの違いは何ですか?
-
HEXはウェブでよく使われる16進数表記、RGBは赤緑青の数値、HSLは色相・彩度・明度で色を表現します。どれも同じ色を表す別の書き方です。
カラーピッカーを試す - グラデーションの方向（角度）を変えられますか?
-
はい。角度スライダーで0度〜360度の任意の方向に設定できます。生成されるCSSコードも自動的に更新されます。
CSSグラデーション生成を試す - 色を選ぶだけでCSSコードが生成されますか?
-
はい。カラーピッカーで色を選ぶと、HEX・RGB・HSL・hsla()・rgba()など複数のCSSフォーマットが自動生成されます。
カラーピッカーを試す - 複数の色でグラデーションを作れますか?
-
はい。カラーストップを追加して3色以上のグラデーションも作成できます。各カラーストップの位置も調整可能です。
CSSグラデーション生成を試す