MUTools

その他

カラーコード変換

カラーコード変換は、HEX・RGB・HSL・HSV・OKLCH の各フォーマットを相互変換するツールです。色を 1 つ入力すると、対応する全フォーマットの表記を同時に計算して一覧表示し、それぞれの値をワンクリックでコピーできます。HEX から RGB への変換(hex rgb 変換)はもちろん、RGB から HEX、HSL 変換、RGBA 変換まで、Web・デザイン制作で必要な変換をまとめて行えます。

プレビュー
1.00

各フォーマットへの変換

フォーマットコピー
HEX#1E90FF
HEX8#1E90FFFF
RGBrgb(30, 144, 255)
RGBArgba(30, 144, 255, 1)
HSLhsl(210, 100%, 56%)
HSLAhsla(210, 100%, 56%, 1)
HSVhsv(210, 88%, 100%)
OKLCHoklch(0.652 0.19 253)
CMYKcmyk(88%, 44%, 0%, 0%)

CMYK は印刷向けの参考値です。色域や印刷プロファイルに依存するため、画面の sRGB から計算した近似値を表示しています。入力フォーマットとしては受け付けていません。

変換はすべてお使いのブラウザ内で行われ、入力した値が外部サーバーに送信されることはありません。

QRコード生成

URL / アドレス帳 / Wi-Fi / メール / イベント / 地理座標 / SMS / 電話 / テキストを QR コード画像に変換します。サイズ・形式・色・ロゴを選択可。ブラウザだけで完結します。

くじ引き・抽選

テキスト一覧または数値範囲からランダムに 1〜N 件を抽選します。重複なし・リール演出・抽選履歴の保存に対応。ブラウザだけで完結します。

カラーピッカー

画像から色を抽出してカラーコードを取得します。ルーペで拡大しながらピクセル単位で取得でき、HEX / RGB / HSL 切替・パレットのエクスポートに対応。ブラウザだけで完結します。

コントラストチェッカー

前景色(文字色)と背景色のコントラスト比をリアルタイムに算出する無料のコントラストチェッカー。WCAG 2.1 / 2.2 の AA・AAA 基準(通常テキスト・大きいテキスト・UIコンポーネント)への合否を判定し、合格色の自動提案・色覚特性シミュレーション・APCA にも対応。配色のアクセシビリティをブラウザだけで確認できます。

ポモドーロタイマー

25 分の集中と 5 分の休憩を繰り返す、無料で使えるオンラインのポモドーロタイマー。勉強・仕事の集中タイマーとして、円形プログレス・アラーム音・全画面・常時最前面のポップアウト表示に対応。ブラウザだけで完結します。

単位変換

長さ・重さ・温度・面積・体積・速度など、さまざまな単位を相互に換算できる無料の単位変換ツール。cm とインチ、摂氏と華氏、坪と平方メートルなどをリアルタイムに変換できます。ブラウザだけで完結します。

カラーコード変換ツールとは?

カラーコード変換は、HEX・RGB・HSL・HSV・OKLCH の各フォーマットを相互変換するツールです。色を 1 つ入力すると、対応する全フォーマットの表記を同時に計算して一覧表示し、それぞれの値をワンクリックでコピーできます。HEX から RGB への変換(hex rgb 変換)はもちろん、RGB から HEX、HSL 変換、RGBA 変換まで、Web・デザイン制作で必要な変換をまとめて行えます。

入力は形式を選ぶ必要がありません。#1E90FF のような 3桁・6桁の HEX、透明度を含む 4桁・8桁の HEX(カラーコード 8桁 変換)、rgb(30, 144, 255) / rgba(30 144 255 / 0.8)hsl(210, 100%, 56%) / hsla(...)hsv(...)oklch(0.65 0.19 253) などをそのまま貼り付けると、フォーマットを自動判定して変換します。ネイティブのカラーピッカーから色を選ぶことも、透明度(アルファ)スライダーで不透明度を 0〜1 の範囲で調整することもできます。

出力には、近年 CSS で利用が広がっている知覚的に均一な色空間 OKLCH や、印刷で使われる CMYK の参考値も含みます。HEX・RGB・HSL・HSV を行き来しながら、デザインカンプ・CSS・デザインツールの間で同じ色を正確に受け渡したいときに便利です。

変換はすべてお使いのブラウザ内で行われ、入力した値が外部サーバーに送信されることはありません。アカウント登録や広告クリックなしで、すぐに使えます。

使い方

  1. 入力欄にカラーコードを貼り付けます(HEX・RGB・HSL・HSV・OKLCH を自動判定します)。右側のカラーピッカーから色を選ぶこともできます。
  2. 透明度を変えたいときは、アルファスライダーで不透明度(0〜1)を調整します。
  3. プレビューで現在の色(透明度を含む)を確認します。
  4. 「各フォーマットへの変換」一覧から、HEX・8桁HEX・RGB・RGBA・HSL・HSLA・HSV・OKLCH・CMYK の値を確認します。
  5. 各行の「コピー」ボタンで、必要なフォーマットの値をコピーして利用します。

利用シーン

  • デザインカンプの HEX を CSS の rgb()/rgba() に直したい Web デザイナー・コーダー。
  • 透明度付きの色を 8桁 HEX や rgba で正確に指定したいフロントエンドエンジニア。
  • HSL や HSV で色相・彩度・明度を調整しながら、最終的な HEX を取得したいユーザー。
  • OKLCH で知覚的に均一な配色を設計し、対応する RGB/HEX も確認したいデザイナー。
  • 画面の色を、印刷の目安として CMYK の参考値で把握したいユーザー。
  • 複数のツールやコードの間で、同じ色を別フォーマットに変換して受け渡したい開発者。

注意点

  • HEX・RGB・HSL・HSV・OKLCH を入力フォーマットとして受け付けます。CMYK は印刷向けで色域・プロファイルに依存し、画面の sRGB から一意に逆変換できないため、出力(参考値)のみの対応としています。
  • 8桁 HEX(#RRGGBBAA)と 4桁 HEX(#RGBA)、rgba()・hsla()、および `oklch(L C H / a)` の透明度に対応します。透明度はアルファスライダーでも調整できます。
  • ネイティブのカラーピッカーは透明度を扱えない(6桁 HEX のみ)ため、ピッカーで色を選んでも現在の透明度は維持されます。
  • HSL・HSV・CMYK・OKLCH は整数や少数桁に丸めて表示するため、再変換するとごくわずかな誤差が生じることがあります。
  • OKLCH から RGB への変換で sRGB の色域を超える場合は、表示可能な範囲に丸めて(クランプして)います。

よくある質問

入力した色はサーバーに送信されますか?
送信されません。変換はすべてお使いのブラウザ内で行われます。業務で扱う色やブランドカラーでも安心してご利用いただけます。
HEX から RGB への変換の計算式は?
6桁 HEX は 2桁ずつが R・G・B の 16進数です。各 2桁を 10進数に変換すると 0〜255 の値になります(例:1E→30、90→144、FF→255 なので #1E90FF=rgb(30, 144, 255))。本ツールではこれを自動で計算し、逆方向(RGB→HEX)にも対応します。
8桁のカラーコードは変換できますか?
できます。8桁 HEX(#RRGGBBAA)の末尾 2桁は透明度(アルファ)を表します。貼り付けると透明度を含めて変換し、RGBA や HSLA でも確認できます。
HSL や HSV への変換にも対応していますか?
対応しています。色を入力すると HSL(色相・彩度・輝度)と HSV(色相・彩度・明度)の両方を同時に表示します。逆に hsl()・hsv() の文字列を貼り付けて他フォーマットへ変換することもできます。
OKLCH とは何ですか?
OKLCH は明度(L)・彩度(C)・色相(H)で色を表す、知覚的に均一な色空間です。明度を保ったまま色相を変えるなど、直感的な配色調整に向いており、近年の CSS で利用が広がっています。本ツールは sRGB との相互変換に対応します。
CMYK は入力できますか?
CMYK は出力(参考値)のみの対応です。CMYK は印刷向けの色空間で、インクや用紙・印刷プロファイルに依存するため、画面の sRGB から一意に逆変換できません。そのため本ツールでは、画面の色から計算した目安としての CMYK 値を表示し、入力フォーマットとしては受け付けていません。