ツールキット
オンラインカラーツール
デザイナーと開発者のための無料カラーツール：変換、コントラスト、混色、カラー名、透明度、画像パレット、グラデーション、OKLCH、Tailwind マッチング、UI 濃淡スケール。すべてブラウザ内で動作します。
スタジオツール
目的からツールを選ぶ
目の前の課題から始めましょう。結果はすぐに表示されます。
変換
RGB から HEX への変換ツール（RGBA・HSL・OKLCH 対応）
RGB・RGBA の値を HEX、HEX8、HSL、HSV、OKLCH に即座に変換。CSS、デザイントークン、UI カラーシステムに使えます。
HEX から RGB への変換ツール（HSL・HSV・OKLCH 対応）
3・4・6・8 桁の HEX カラーコードを RGB、RGBA、HSL、HSV、OKLCH に変換。アルファ透明度にも対応しています。
カラー透明度計算ツール - RGBA と HEX アルファ
不透明度のパーセントを RGBA、HSLA、8 桁 HEX のアルファ値に変換。白・黒・任意の背景の上での見え方をリアルタイムでプレビューできます。
HEX 透明度早見表 - CSS 用アルファ値
不透明度のパーセントを 2 桁の HEX アルファ値と 8 桁 HEX カラーコードに変換。RGBA のプレビュー付きです。
OKLCH 変換ツール - HEX・RGB・HSL を OKLCH に
HEX・RGB・HSL の色を OKLCH に変換し、モダンな CSS カラー構文を HEX、RGB、HSL、HSV の値と一緒にコピーできます。
RGB から CMYK への変換 - HEX の CMYK 値
RGB・HEX・HSL の色を印刷用の CMYK パーセントに変換。シアン・マゼンタ・イエロー・ブラックの値、総インキ量、各種 Web カラー形式を確認できます。
CMYK から HEX への変換 - CMYK を RGB に
CMYK のパーセントを Web 用の HEX・RGB・HSL カラーコードに変換。シアン・マゼンタ・イエロー・ブラックをスライダーで調整し、画面用の色をコピーできます。
HSL から HEX への変換 - HSL・HSLA をカラーコードに
HSL・HSLA の色を HEX・RGB・OKLCH に変換。色相・彩度・明度をスライダーで調整し、CSS 用のカラーコードをすぐにコピーできます。
チェック
カラーコントラストチェッカー - WCAG AA・AAA
文字色と背景色のコントラストを WCAG AA・AAA 基準でチェック。通常テキスト、大きなテキスト、ボタン、リンク、ダークモードの色の組み合わせをプレビューできます。
カラー名検索 - CSS カラー名と中国の伝統色名
任意の HEX・RGB・HSL 値に最も近い CSS カラー名と中国の伝統色名を、知覚的な OKLab マッチングで探せます。
Tailwind カラー変換ツール - 最も近いクラスを探す
任意の HEX・RGB・HSL の色を最も近い Tailwind CSS パレットの色に変換し、bg・text・border・ring のクラス名をコピーできます。
色覚シミュレーター - 配色と画像の見え方を確認
P型・D型・T型色覚と全色盲での配色や画像の見え方をシミュレーションし、色覚特性のある人が混同しやすい色の組み合わせを見つけます。
作成
オンラインカラーミキサー・混色計算ツール
2 つのデジタルカラーを任意の比率で混ぜ、混色結果の HEX・RGB・HSL をコピー。5 段階・10 段階のなめらかなグラデーションも作成できます。
画像パレット抽出ツール - 写真から色を取得
写真やスクリーンショットをアップロードして、主要な HEX カラーをブラウザ内で抽出。UI デザイン、ブランディング、ムードボード用のパレットをコピーできます。
CSS グラデーションジェネレーター（中間色付き）
2 色の CSS 線形グラデーションを作成し、角度を調整して background の CSS をコピー。なめらかな中間色も書き出せます。
カラー濃淡ジェネレーター - 50〜900 の UI スケール
ひとつのベースカラーから 50〜900 の濃淡スケールを生成し、CSS 変数をコピー。ティント、シェード、UI 用のカラートークンをプレビューできます。
配色ジェネレーター - カラーパレットを自動生成
ワンクリックで配色を自動生成。スペースキーで切り替え、気に入った色をロックし、CSS・SCSS・Tailwind・JSON で書き出せます。
ランダムカラージェネレーター - HEX・RGB・HSL
ランダムな色を HEX・RGB・HSL のカラーコード付きで生成。明るい色・暗い色・パステル・ビビッド・ニュートラルから選び、ワンクリックでコピーできます。
補色ジェネレーター - 反対色・反転色を調べる
HEX や RGB の色の補色（反対色）を調べ、OKLCH による知覚的な補色、反転色、スプリット・コンプリメンタリーやトライアドの配色も表示します。
まずカラー形式を理解したいですか？
ガイドで HEX・RGB・HSL、コントラスト、透明度を学んでから、ツールで実践しましょう。