🔧Toolify

無料のカラー・デザインツール — ピッカー・パレット・コントラスト・グラデーション

Web制作で実用的なカラー作業。HEX/RGB/HSL対応のカラーピッカー、パレット・グラデーション生成、文字を読みやすく保つWCAGコントラストチェッカー、色覚多様性シミュレーション、CSSシャドウ。正確な値とアクセシブルな選択をコピペで欲しいデザイナー・フロントエンド開発者向け。

カラーコード変換 — HEX・RGB・HSL 同時表示

HEX・RGB・HSLの相互変換とライブプレビュー。どの欄を編集しても他の欄が即座に同期します。

コントラストチェッカー — WCAG AA/AAA 判定

前景色と背景色のWCAGコントラスト比を計算し、AA/AAA × 通常/大きい文字の合否バッジを表示。ライブプレビュー付き。

CSSグラデーション生成(線形・放射状・円錐)

CSSグラデーションをビジュアルで作成。線形・放射状・円錐型、複数のカラーストップ、角度調整、プリセット対応。

カラーパレット生成(5つの配色スキーム)

ベース色から調和のとれたカラーパレットを生成。補色・類似色・トライアド・テトラード・モノクロマティック。スウォッチをクリックでHEXコピー。

色覚シミュレーター — 色覚異常の見え方を体験

HEXカラーを入力すると、第1色盲・第2色盲・第3色盲・全色盲の4タイプで色がどう見えるかを即座に比較できます。

CSS box-shadow ジェネレーター(ライブプレビュー付き)

CSS の box-shadow をビジュアルに作成。オフセット・ぼかし・広がり・色・不透明度・insetを調整。リアルタイムプレビュー、コピペ可。

CSSカラー名検索 — 16進数から最も近いネームドカラーを探す

任意の16進数カラーコードを入力して、最も近いCSSネームドカラーを検索。上位5件を近似距離スコア付きで表示します。

カラーシェード生成ツール — Tailwindスタイル

任意の色から11段階のカラーシェード(50〜950)を生成。Tailwind CSSスケールに準拠。各シェードのhexコードコピーやCSS変数エクスポートが可能。

ツール一覧