カテゴリ
カラー
Web のための色の選択・変換・検証ツールです。HEX・RGB・HSL の相互変換、パレットやグラデーションの作成、色覚特性のシミュレーション、文字と背景のコントラストの WCAG アクセシビリティ基準による判定ができます。ブランドカラーを合わせるデザイナーにも、CSS の値を探す開発者にも便利で、値を調整するとプレビューが即座に更新されます。
カラーコントラスト チェッカー
文字／背景のコントラストを WCAG AA・AAA 基準でチェック。
カラーパレット ジェネレーター
ベースカラーを選んで、クラシックなカラーホイールのハーモニーを取得 — 補色、スプリット補色、トライアド、テトラド、スクエア、アナロガス、モノクロマティック。
CSS グラデーションジェネレーター
線形・放射状 CSS グラデーションを多段カラーストップでデザインし、コードをコピー。
カラーフォーマット変換
任意の色を HEX・RGB・HSL・HSV・OKLCH・CSS 変数で一括変換。
CSS Box Shadow ジェネレーター
複数レイヤーで CSS box-shadow を視覚的にデザイン — リアルタイムプレビュー + CSS / Tailwind 出力。
色覚シミュレーター
8 種類の色覚異常（CVD）で画像がどう見えるかを再現。
画像からカラーパレット抽出
画像をドロップすると Canvas で主要色を分析しパレット抽出 — HEX をコピーまたは一括取得。
CSS フィルタープレイグラウンド
blur・brightness・contrast・hue・sepia・invert など 9 種を視覚的に組み合わせ — CSS や Tailwind 任意値でコピー。
CSS clamp() 計算機（流体タイポグラフィ）
2 つのビューポート幅間でなめらかにスケールする `font-size: clamp(...)` を生成 — 1 行コピー。
Border Radius ジェネレーター
コーナーを個別ドラッグ、楕円半径、CSS コピー — チャットバブル・ピル・ブロブ・タブのプリセット付き。
CSS 三角形ジェネレーター
純 CSS で 8 方向の三角形を生成 — border トリックまたは clip-path、ルールをコピーして貼付。
CSS Cubic-Bezier カーブジェネレーター
コントロールポイントをドラッグして CSS イージング曲線を設計 — 動きをライブプレビュー、cubic-bezier() 値をコピー。
カラー ミキサー
2 色を RGB・HSL・CIELAB 空間で補間。11 段階の中間グラデーション ストリップ表示。
色のシェード・ティント生成器
基本色からティント（明るく）·シェード（暗く）·トーン（グレー混合）を生成。2〜20 ステップ、HEX·RGB·HSL 出力。
CSS 名前付きカラー
147 個の CSS / X11 named color — HEX・RGB・ライブスウォッチ、検索・色相系列別グループ化。
HSL カラーピッカー
色相・彩度・明度・アルファのスライダーで色を調整 — HEX・RGB・HSL・Tailwind 任意値をコピー。
Tailwind カラーパレット
Tailwind CSS のデフォルトパレット全体 — 22 色相 × 11 シェード（50〜950）— クリックで Tailwind クラス、HEX、rgb() としてコピー。
色温度
ケルビン値をスライドして、温かい琥珀色からニュートラルホワイト、クールブルーへと変化する黒体色を見る — 一般的な光源プリセットも。
色距離 (ΔE)
2 つの色を選んで、どれくらい知覚的に異なるかを表示 — CIE76 ΔE、CIEDE2000 ΔE、プレーンな RGB 距離と並列スウォッチ。
カラーソート
16 進カラーのリストを貼り付けて色相、彩度、明度、または知覚的明るさでソート — デザイントークンパレットを整えるのに便利。
OKLCH カラーピッカー
知覚的に均一な OKLCH 空間（明度・彩度・色相）で色を選ぶ — そして各選択が sRGB ディスプレイ色域内に収まるかを確認。
カラー補間 / グラデーションステップ
2 つの 16 進カラーを選び、N の離散中間ステップを得る — sRGB、線形 RGB、OKLab または HSL で — オプションのイージング付き。
カラートークンエクスポーター
カラーパレットを1回定義 → CSSカスタムプロパティ·Tailwind設定·SCSS·LESS·デザイントークンJSON·SwiftUI Color·Android `colors.xml` にエクスポート。ライブプレビュースウォッチ。
Conic Gradient ジェネレーター
CSS `conic-gradient()` のビジュアルビルダー — 回転角度·中心位置·カラーストップ·図形プレビュー。パイチャート·リングチャート·チェック柄·カラーホイールに便利。
カラー名検索
任意のhex/RGB色に最も近いCSS・Tailwind・XKCD色名をOKLabの知覚距離で順位付け表示。
Material Design 3 トーナルパレット
任意のソースカラーから Material You / Material Design 3 トーナルパレット（トーン 0–100）を生成。黒/白とのコントラスト比、CSS/Tailwind/JSON/SCSS 出力対応。
波長→色 変換器（nm → sRGB）
光の波長（380〜780 nm、可視光）を sRGB 近似色に変換 — クリック可能な虹グラデーションバーと、実際の太陽分光から得たフラウンホーファー吸収線リファレンス付き。
CMYK ↔ RGB カラー変換ツール（印刷用色空間）
画面用RGB/hexと印刷用CMYKパーセントを相互変換します。Simple、GCR（グレーコンポーネント置換）、UCR（アンダーカラー除去）のブラック生成方式、チャンネル分版プレビュー、総インク被覆率表示に対応。
色の明るさ比較 (HSL vs Lab L* vs WCAG vs HSP)
HSL 明度・HSV 値・WCAG 相対輝度(LRV)・CIE Lab L*(知覚明度)・Rec. 709 ルーマ・HSP 知覚明度・素朴な (R+G+B)/3 など 7 種の明るさ指標を、1 色または 2 色について同時に比較。「より明るく見えるはず」の色がなぜ暗く感じられるか即座に把握できます。
CSS ブレンドモード シミュレーター
W3C コンポジティング仕様の 16 種類の mix-blend-mode(multiply·screen·overlay·soft-light·hue·color·luminosity など)を 2 色に適用した結果を一覧比較し、各モードの CSS スニペットをコピーできます。
CSS color-mix() プレビュー (補間空間の比較)
モダン CSS の color-mix() 関数が補間空間 (srgb, hsl, oklch, lab, lch, hwb, oklab, srgb-linear) によって 2 色をどう異なる結果で混ぜるかを並べて比較 — ライブスウォッチ、計算済み hex、各空間のフルグラデーション、コピー可能な CSS 付き。
CSS clip-path ビルダー (円、楕円、多角形、Inset)
CSS `clip-path` プロパティのビジュアルビルダー — 形状を選択 (円、楕円、inset、多角形)、スライダーで数値調整、プレビュークリックで多角形の点を追加、貼り付け可能な CSS 宣言をコピー。10 種の形状プリセット (三角形、六角形、星、矢印、吹き出し、十字など) を内蔵。
CSS テキスト シャドウ ジェネレーター（マルチレイヤー）
text-shadow を何層でも重ねてネオン・3D・アウトライン・ロングシャドウ — ライブプレビューとコピー可能な CSS。