カラーコンバーター
hex・rgb()・hsl() の色を貼り付ければ 3 形式まとめて変換。さらにティント&シェードの段階表まで自動生成します。
#0071e3rgb(0, 113, 227)hsl(210, 100%, 45%)読み取れない色です。#0071e3、rgb(0, 113, 227)、hsl(211, 100%, 45%) などを試してください。
スウォッチ行は、白(左)と黒(右)に 20/40/60/80% ずつ混ぜた色です。ホバー状態やダークモードのバリエーションに便利です。
このツールは完全にブラウザ内で動作します。データは端末から出ず、サーバーへアップロードされることはありません。
使い方
- 1hex・rgb()・hsl() のいずれかの形式で色を貼り付けます。
- 2変換結果を確認し、必要な形式をコピーします。
- 3下の段階表から明るい色・暗い色を取得します。
カラーコンバーター
#0071e3、rgb(0, 113, 227)、hsl(211, 100%, 45%) のいずれでも入力できます。形式は自動判別され、hex・RGB・HSL が同時に出力され、どれもワンクリックでコピー可能です。
値の下には、白と黒に 20/40/60/80% ずつ混ぜたティント&シェードの行があります。ホバー状態・枠線・ダークモード向けのバリエーションをデザインツールなしで即座に用意できます。
よくある質問
HSL から RGB へはどう変換しますか?
標準の円筒座標→RGB 変換を使います。彩度成分 c = (1 − |2L − 1|) × S、色相の区間で決まる中間値 x、そして各チャネルに m = L − c/2 を加える形です。教科書どおりの式なので、デザインツールと同じ結果になります。
色コードが無効になるのはなぜですか?
受け付けるのは #RGB / #RRGGBB、rgb(r, g, b)、hsl(h, s%, l%) です。各チャネルは範囲内(RGB は 0–255、色相は 0–360、他は 0–100%)で、各部はカンマか空白で区切ります。
ティントとシェードは何に使いますか?
ティント(白と混合)はホバー背景・バッジ・カード向き、シェード(黒と混合)は押下状態・枠線・ダークモードの表面向きです。1 つのブランドカラーから派生させると、UI の状態全体が視覚的にそろいます。
関連ツール
カラーピッカー
スウォッチで選ぶか、EyeDropper API で画面から直接スポイト。hex・RGB・HSL をワンクリックでコピーします。
すべてのツール →
QR コード生成
テキストや URL を鮮明な QR コードに。サイズ・色・誤り訂正レベルを調整でき、PNG と SVG でダウンロードできます。
すべてのツール →
アスペクト比計算
16:9 などの比率と片方の寸法があれば、もう片方を即算出。1:1 から 21:9 までのプリセットで動画・デザインに即対応。
すべてのツール →
UUID ジェネレーター
ランダムな UUID v4 をワンクリックで一括生成 — 1〜500 個ずつ、ブラウザの暗号学的乱数を使用。無料・即時・オフライン対応です。
すべてのツール →
ツールを埋め込む
1 行であなたのサイトにツールを。訪問者のブラウザ内で動きます。
<iframe src="https://zoyku.com/ja/tools/color-converter?embed=1" width="100%" height="640" style="border:0;border-radius:16px" title="Zoyku — color-converter" loading="lazy"></iframe>