その他
カラーコード変換
カラーコード変換は、HEX・RGB・HSL・HSV・OKLCH の各フォーマットを相互変換するツールです。色を 1 つ入力すると、対応する全フォーマットの表記を同時に計算して一覧表示し、それぞれの値をワンクリックでコピーできます。HEX から RGB への変換(hex rgb 変換)はもちろん、RGB から HEX、HSL 変換、RGBA 変換まで、Web・デザイン制作で必要な変換をまとめて行えます。
各フォーマットへの変換
| フォーマット | 値 | コピー |
|---|---|---|
| HEX | #1E90FF | |
| HEX8 | #1E90FFFF | |
| RGB | rgb(30, 144, 255) | |
| RGBA | rgba(30, 144, 255, 1) | |
| HSL | hsl(210, 100%, 56%) | |
| HSLA | hsla(210, 100%, 56%, 1) | |
| HSV | hsv(210, 88%, 100%) | |
| OKLCH | oklch(0.652 0.19 253) | |
| CMYK | cmyk(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・デザインツールの間で同じ色を正確に受け渡したいときに便利です。
変換はすべてお使いのブラウザ内で行われ、入力した値が外部サーバーに送信されることはありません。アカウント登録や広告クリックなしで、すぐに使えます。
使い方
- 入力欄にカラーコードを貼り付けます(HEX・RGB・HSL・HSV・OKLCH を自動判定します)。右側のカラーピッカーから色を選ぶこともできます。
- 透明度を変えたいときは、アルファスライダーで不透明度(0〜1)を調整します。
- プレビューで現在の色(透明度を含む)を確認します。
- 「各フォーマットへの変換」一覧から、HEX・8桁HEX・RGB・RGBA・HSL・HSLA・HSV・OKLCH・CMYK の値を確認します。
- 各行の「コピー」ボタンで、必要なフォーマットの値をコピーして利用します。
利用シーン
- デザインカンプの 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 の色域を超える場合は、表示可能な範囲に丸めて(クランプして)います。