カラーコンバーター
HEX・RGB・HSL・CMYKの色コードをブラウザ上でリアルタイム変換。無料のカラーピッカー＆コンバーター、100%プライベート。
1
HEX
#00E695
RGB
rgb(0, 230, 149)
RGBA
rgba(0, 230, 149, 1)
HSL
hsl(159, 100%, 45%)
HSLA
hsla(159, 100%, 45%, 1)
HSV
hsv(159, 100%, 90%)
HSVA
hsva(159, 100%, 90%, 1)
CMYK
cmyk(100%, 0%, 35%, 10%)
CMYKA
cmyka(100%, 0%, 35%, 10%, 1)
機能
100%ブラウザベース
すべての色変換はブラウザ内で行われます。データがデバイスの外へ出ることはありません。
無料・登録不要
ユーザー登録なし、制限なし、隠れた料金も一切ありません。
瞬時に結果表示
入力するそばからリアルタイム変換。すべてのフォーマットがライブで更新される様子を確認できます。
ビジュアルカラーピッカー＆画面スポイト
内蔵ピッカーで視覚的に色を選ぶことも、ワンクリックで画面上のどこからでも色を取得することもできます（デスクトップ版Chrome/Edge）。すべてのフォーマットが同時に更新されます。
カラーコンバーターの使い方
- 入力フォーマット（HEX・RGB・HSL・CMYK）を選び、入力欄に色の値を入力します。
- 入力すると、コンバーターが他のすべての対応フォーマットで色を即座に表示します。
- ビジュアルカラーピッカーを使って、スペクトラムをクリックするか値を直接入力して色を選択します。
- 「画面から取得」（デスクトップ版Chrome/Edge）を使えば、画面上に見えている色ならワンクリックで取得できます。
- 変換された値はワンクリックでクリップボードにコピーでき、CSSやデザインツールにそのまま貼り付けられます。
- 安心して自由に試せます。ToolsMioはすべてをブラウザ内で処理するため、色のデータはプライベートなまま保たれます。
よくあるユースケース
WebデザインとCSS
透明度を指定できるrgba()やhsla()などのCSSプロパティに合わせて、HEXカラーをRGBやHSLに変換しましょう。ToolsMioならフォーマットの切り替えが一瞬で完了します。
ブランドガイドラインの遵守
デザインや印刷ツールごとに使われるHEX・RGB・CMYKのフォーマットを相互変換して、ブランドカラーのプラットフォーム間での一貫性を確保できます。
アクセシビリティとコントラストチェック
色をHSLに変換すると明度と彩度を分析しやすくなり、WCAGのコントラスト基準への適合を確認しやすくなります。コントラスト比ツールと併用して、アクセシブルなデザインを作りましょう。
クロスプラットフォームのデザイン引き継ぎ
開発者とデザイナーは異なる色フォーマットを使うことがよくあります。フォーマットを素早く変換すれば、FigmaのHEX値とコードのRGB値のギャップを埋められます。
色変換について知っておくべきこと
- ✓ HEXとRGBは同じ色を異なる表記で表すものです。HEXはRGB値を16進数で表記した省略形であり、ToolsMioはそれらをロスなく相互変換します。
- ✓ HSL（色相・彩度・明度）は、各チャンネルが人間が知覚できる属性に対応しているため、色を調整する際に直感的に使いやすいフォーマットです。
- ✓ CMYKは主に印刷用のフォーマットです。RGBとCMYKでは色域が異なるため、画面と印刷物では色の見え方が変わる場合があります。
- ✓ 背景の上に置くテキストの色を選ぶときは、必ずコントラスト比を確認しましょう。WCAG 2.1では、通常のテキストに4.5:1以上、大きなテキストに3:1以上が求められます。
- ✓ CSSでrgba()を使う場合、アルファ値は0（完全な透明）から1（完全な不透明）の範囲で指定でき、要素の透明度を細かく制御できます。
よくある質問
データはサーバーに送信されますか？
いいえ。すべての色変換はJavaScriptによって、お使いのブラウザ内で完全に処理されます。データがサーバーへアップロードまたは送信されることは一切ありません。HEXコードを入力したり色を選択したりすると、ブラウザはネットワークリクエストを一切行わずに、対応するRGB・HSL・CMYKの値をローカルで計算します。つまり、あなたが選んだ色は完全にプライベートなまま守られ、当サイト側でログの記録、保存、分析が行われることはありません。独自のブランドカラーや機密性の高いデザインシステムを扱う場合でも、データがデバイス上に留まることを確信したうえで、安心してToolsMioをご利用いただけます。ページの読み込みが完了すればオフラインでも動作するため、インターネット接続がなくても色の変換を続けられます。私たちはプライバシーを最優限に考えています。
どの色フォーマットに対応していますか？
ToolsMioは、HEX、RGB、HSL、CMYKという4つの主要な色フォーマット間の変換に対応しています。HEXはCSSやHTMLで使われる標準的な略記法で、#FF5733のような6桁のコードで色を表現します。RGB（赤・緑・青）は色を0〜255の3つの数値で表し、プログラミングやデジタルデザインで広く使われています。HSL（色相・彩度・明度）は人間の知覚に基づいて色をより直感的に記述でき、明度や彩度を調整するだけで色のバリエーションを簡単に作れます。CMYK（シアン・マゼンタ・イエロー・キー/黒）は、専門的な印刷やグラフィックデザインで使われるカラーモデルです。この4つのフォーマットすべてに対応しているため、ToolsMioは画面上のデザインと印刷制作の間のギャップを埋め、あらゆるメディアとワークフローで色の一貫性を保てるようにします。
HEXからRGBへ変換するには？
ToolsMioを使えば、HEXからRGBへの変換はとてもシンプルです。HEXのカラーコード（例：#00E5A0）を入力欄に貼り付けるか入力するだけで、対応するRGB値が即座に表示されます。ツールは6桁のHEXコードを解析して赤・緑・青の各チャンネルを表す3つのペアに分割し、各ペアを16進数から10進数へ変換します。コードを入力せずに視覚的に色を選びたい場合は、内蔵のカラーピッカーを利用できます。スペクトラムをクリックするか具体的な値を入力すれば、すべてのフォーマット変換がリアルタイムで更新されます。また、別のフォーマットから始めたい場合は、RGB・HSL・CMYKの値を直接入力すると、対応するHEXが並んで表示されます。変換結果はワンクリックでクリップボードにコピーでき、CSSやデザインツールでそのまま使えます。
カラーピッカーは付いていますか？
はい！ToolsMioには完全にインタラクティブなビジュアルカラーピッカーが搭載されており、色の選択や探索がとても簡単です。スペクトラム上の好きなところをクリックして色相を選び、スライダーで明度と彩度を調整できます。ピッカーを動かすと、HEX・RGB・HSL・CMYKの4つのフォーマットすべてがリアルタイムで更新されるため、同じ色が異なるシステムではどのように表現されるのかを正確に把握できます。デザインのモックアップや写真から特定の色を合わせたい場合に特に便利です。さらに、各フォーマットの入力欄に正確な値を直接入力して、選択色を細かく調整することも可能です。カラーピッカーはサーバーに依存せず完全にブラウザ内で動作するため、プロジェクトのさまざまな配色を試しながら、即時のフィードバックと完全なプライバシーを手に入れられます。
画面上のどこからでも色を取得できますか？
はい。HEX入力欄の横にある「画面から取得」ボタンをクリックすると、画面スポイトが有効になります（デスクトップ版のChromeとEdgeで対応）。カーソルが虫眼鏡に変わり、画面全体のどのピクセルでもサンプリングできます。他のブラウザタブ、他のアプリケーション、写真など、見えているものであれば何でも、スクリーンショットの撮影やアップロードなしで取得できます。一度クリックすると、サンプリングした色がすべてのフォーマット欄（HEX、RGB、HSL、CMYKなど）に即座に反映されます。FirefoxやSafariなど、EyeDropper APIにまだ対応していないブラウザでは、このボタンは自動的に非表示になります。その場合はHEXコードを貼り付けるか、ビジュアルピッカーをご利用ください。画面のサンプリングはすべてデバイス上で完結し、画像がサーバーにキャプチャ・保存・送信されることは一切ないため、プロセスは完全にプライベートです。