Color Palette & Gradient Tools
HEXカラー分析、補色/類似色パレット生成、グラデーションPNGダウンロード
このツールでできること
- 🎨HEX色解析 — RGBやHSLへの変換、明度・コントラスト比を即座に確認
- 🔄補色・類似色パレット — 選んだ色に調和する配色を自動生成
- ♿アクセシビリティ確認 — WCAG基準のコントラスト比で推奨テキスト色を表示
- ⬇️グラデーションPNG生成 — 2色を指定してグラデーション画像をダウンロード
動的カラー分析
URLに6桁のHEXコードを指定するだけで、その色の詳細情報ページを表示します。 ブックマークやシェアにも使えます。
おすすめカラーから探す
カラーチップをクリックすると詳細ページへ移動します。
グラデーション作成
タイプ
方向
パターン
linear-gradient(to right, #2563eb, #ec4899)
ダウンロードサイズ
×px
こんな場面で使えます
🖥
ウェブ・アプリデザイン
ボタンや背景色のコントラスト比をWCAG基準で確認。視認性の高い文字色を即座に判断できます。
📸
SNS・ブログのアイキャッチ
グラデーション生成ツールでOGP画像やサムネイルのベース素材をすぐにダウンロード。
🎨
デザインツール連携
HEXコードをそのまま入力して、FigmaやCSS用のRGB・HSL値を一発で取得できます。
🔗
配色の組み合わせ検討
補色・類似色パレットで調和のとれたブランドカラーや配色セットを自動生成します。
使い方
- URLに
/color/HEXコードを入力してカラー詳細を確認 - 補色・類似色パレットでデザインに合う配色を探す
- グラデーション作成ツールで2色を選んでPNGをダウンロード