無料のカラー・デザインツール — ピッカー・パレット・コントラスト・グラデーション
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変数エクスポートが可能。