Color tools
Ten browser-based color utilities — convert HEX to RGB and HSL, mix and blend colors, generate complementary, analogous, and triadic schemes, create tint and shade palettes, look up CSS named colors, extract CSS variables, and pick colors from images. No signup, no cloud, nothing leaves your device.
-
HEX → RGB 変換
16進カラーコードをRGB値に変換。R・G・BのコンポーネントとCSS rgb() 文字列を取得できます。
ツールを開く →
-
HEX → HSL 変換
HEXカラーをHSL（色相・彩度・輝度）に変換。テーマ設定やCSS変数作成に便利です。
ツールを開く →
-
カラーミキサー
2色を任意の比率でブレンドし、結果のHEX・RGB・HSL値をリアルタイムで確認できます。
ツールを開く →
-
補色ファインダー
任意のHEXカラーに対してカラーホイール上で180°反対の補色を即座に見つけます。
ツールを開く →
-
アナログカラージェネレーター
カラーホイール上で±30°・±60°の類似色スキームを生成してハーモニアスなパレットを作成します。
ツールを開く →
-
トライアドカラージェネレーター
カラーホイール上で120°等間隔に配置された3色のトライアドカラースキームを生成します。
ツールを開く →
-
ティント＆シェードジェネレーター
任意のベースカラーから明るいティントと暗いシェードのフルレンジを生成します。
ツールを開く →
-
カラー名検索
任意のHEX値から最も近いCSS名前付き色を探したり、色名からHEXコードを調べたりできます。
ツールを開く →
-
CSS変数エクストラクター
CSSコードを貼り付けると、すべてのカスタムプロパティ（--変数）と値をワンクリックで抽出します。
ツールを開く →
-
画像ピクセルカラーピッカー
画像をアップロードして任意のピクセルをクリックすると、HEX・RGB・HSL値を即座に取得できます。
ツールを開く →
Why browser-only color tools?
Color decisions are at the heart of every design system. These tools let you experiment freely without pasting values into a remote service or signing up for yet another SaaS product. Every conversion, blend, and palette is calculated locally in JavaScript — instant feedback with zero latency, no data sent anywhere.
Choosing the right tool
Need to translate design tokens? Use HEX to RGB or HEX to HSL to get CSS-ready values. Building a palette? Try Complementary, Analogous, or Triadic generators for harmonious schemes. Need more depth? Tints & Shades generates a full lightness range. For matching a real-world color, use Color from Image Pixel to sample any photo.