カラーコンバーター
HEX、RGB / RGBA、HSL、HSV、CMYKの間で色をリアルタイム変換できるグリッド形式のツールです。カラーサンプルのプレビューやCSSカラー名の検索も可能です。
使い方
- 1 HEX、RGB、HSL、HSV、CMYKのいずれかの行に色の値を入力すると、残りの4行がリアルタイムで自動的に更新されます。
- 2 HEXの行にはCSSカラー名(red、dodgerblue、rebeccapurpleなど)を直接貼り付けることもできます。
- 3 「アルファチャンネルを含める」をオンにすると、HEX-8やRGBA / HSLA / HSVA形式に拡張され、スライダーで透明度を調整できます。
- 4 各行のCopyボタンで、その値をクリップボードにコピーできます。
このツールを使う理由
- 5つの形式が常に同期されているため、別々の3つのサイトを行き来してコピー&ペーストする必要がありません。
- モダンな記法と従来の記法の両方に対応しています — rgb(255 87 51)、rgb(255, 87, 51)、rgba(255 87 51 / 0.5)のいずれも入力可能です。
- CSSカラー名の検索は、SVG / CSS4の148キーワードすべてに対応しています。
- 計算はすべてブラウザ内で完結するため、あなたのブランドカラーパレットがどこかに送信されることはありません。
よくある質問
HEXはアルファチャンネルに対応していますか?
はい。アルファのスイッチをオンにすると、HEXは8桁表記(#RRGGBBAA)に拡張されます。この形式はモダンブラウザやほとんどのデザインツールで扱えます。
HSLやHSVの値が丸められてしまうのはなぜですか?
見やすさのため、表示上は各チャンネルの値を整数パーセントに丸めています。内部の計算は完全な精度で保持されているので、RGBに戻したときも元のバイト値が正しく再現されます。
CMYKの色が印刷用ソフトと少し違って見えます。
ブラウザや大半のオンライン変換ツールは、簡易的なRGB↔CMYK変換式を使用しています。実際の印刷結果はICC、GRACoL、FOGRAなどのカラープロファイルに左右されるため、このツールの値はあくまで画面上での目安として使ってください。
HEXとRGBの変換だけできれば十分なのですが?
このツールは5つの形式すべてに対応していますが、素早く変換したいだけの場合は、一番上の行にHEX値を貼り付け、2番目の行のRGB値を読み取るだけで構いません。
カラーコンバーター とは？
カラーコンバーターは、1つの色の値を複数のカラーモデル間で相互変換するツールです。代表的なものにHEX(Web用の短縮表記)、RGB / RGBA(赤・緑・青にオプションのアルファチャンネルを加えたもの)、HSL(色相・彩度・明度)、HSV(色相・彩度・明度値)、そして印刷用のCMYK(シアン・マゼンタ・イエロー・キー)があります。このツールはあらゆる入力値を共通の内部表現に正規化した上で各形式間を変換し、結果を目で確認できるカラーサンプルのプレビューも用意しています。
機能
5つのカラーモデル
HEX、RGB / RGBA、HSL、HSV、CMYKの間で変換します。どのフィールドを編集しても、他の値がリアルタイムで更新されます。
スウォッチと名前付きカラー
ライブスウォッチで結果をプレビューでき、148種類のCSS名前付きカラーを検索できます。
無料でプライベート
すべてクライアント側で実行されます。登録不要、アップロードも一切ありません。
例
Input
#3B82F6Output
rgb(59, 130, 246) · hsl(217, 91%, 60%) · hsv(217, 76%, 96%)主な用途
-
1
CSS用のHEX ↔ RGB変換
デザイナーのHEXコードをrgb()/rgba()やHSLに変換し、スタイルシートやデザイントークンに使用できます。
-
2
印刷用CMYK
画面上の色を印刷作業向けにおおよそのCMYK内訳に変換します。
-
3
HSL/HSVで微調整
HSLまたはHSVに切り替えて、色相・彩度・明度を直感的に調整できます。
カラーコンバーター と他の選択肢の比較
| 機能 | Zerethon Tools | 一般的なオンラインツール | デスクトップアプリ |
|---|---|---|---|
| HEX / RGB / HSL / HSV / CMYK | All five | 2–3 | All five |
| Alpha channel (RGBA) | Yes | Sometimes | Yes |
| CSS named-color lookup | Yes | Rarely | Sometimes |
| Live grid (all formats) | Yes | No | Sometimes |
| Free | Yes | Yes | Often paid |
Zerethonのカラーコンバーターは、ライブグリッド上で1つの色をHEX、RGB/RGBA、HSL、HSV、CMYKの間で変換し、スウォッチプレビューとCSS名前付きカラーの検索機能を備えています。共通の内部値に正規化し、CSS Color仕様に従って各フォーマット間を相互変換します。すべての処理はブラウザ内で実行されます。
- カテゴリ
- クリエイター
- 料金
- 無料
- プライバシー
- ブラウザベース
- 登録
- 不要
参考文献
- CSS Color Module Level 4 — W3C
- <color> — CSS データ型 — MDN
プライバシー
明記されない限り、データがブラウザの外に送信されることはありません。カラーコンバーター は完全にクライアント側で動作します — サーバーへのアップロードなし、ログなし、入力内容のトラッキングなし。
基礎を学ぶ
関連ツール
YouTubeサムネイルダウンローダー
YouTube動画のサムネイルを利用可能なすべての解像度でダウンロードできます。動画URLを貼り付けるだけです。
ツールを開くOpen Graphプレビュー
URLをSNSでシェアしたときにどう表示されるか確認できます。Facebook、Twitter、LinkedIn、Slackでのシェアカードをプレビューします。
ツールを開く単語数・文字数カウント
単語数、文字数、文の数、段落数を瞬時にカウント。読書時間、朗読時間、頻出キーワードも同時に表示します。
ツールを開くLorem Ipsumジェネレーター
Lorem Ipsumのダミーテキストを段落・文・単語単位で生成します。HTMLタグで囲むオプションつき。
ツールを開くZerethon Social で作成・共有・成長しよう
無料登録。ポイントを獲得し、実績を集め、世界中のクリエイターとつながりましょう。