カラーコード変換
HEX・RGB・HSLのカラーコードを相互変換し、色をプレビューします。
カラーコード変換について
HEXはWeb制作で最も馴染み深い色表現ですが、明度や彩度を直感的に調整したい場合はHSL（色相・彩度・明度）の方が扱いやすいという特徴があります。例えば同じ色相を保ったまま明るさだけを変えたい場合、HSLならL（Lightness）の値を変更するだけで済みます。
RGBはディスプレイが実際に色を表現する仕組みに近いモデルで、赤・緑・光の3色を足し合わせる加法混色に基づいています。デザインカンプで指定されたHEXコードをCSSのRGB関数形式に変換したり、逆にRGBAで受け取った透明度付きの色をHEXA形式に変換したりする際に、このツールで即座に確認できます。
主な使い方
- 1デザインカンプのHEXカラーをCSSのRGB値に変換してコーディングする
- 2ブランドカラーを異なるフォーマットに変換してデザインシステムを整備する
- 3色の明度・彩度を調整するためにHSLに変換して確認する
- 4Tailwind CSSやFigmaで使う形式にカラーコードを変換する
よくある質問
Q. 対応しているカラー形式は何ですか？
A. HEX（#RRGGBB・#RGB）・RGB・HSLに対応しています。
Q. アルファ（透明度）チャンネルも変換できますか？
A. いいえ。現在はRGBA・HSLA・8桁HEXなどの透明度付きの形式には対応していません。不透明な色（HEX・RGB・HSL）の変換にご利用ください。
Q. 変換結果はすぐに確認できますか？
A. はい。カラーコードを入力すると各フォーマットの値と色のプレビューがリアルタイムで更新されます。
関連ツール
- CSSグラデーション/box-shadowジェネレーターlinear-gradient・radial-gradientやbox-shadowをスライダーとカラーピッカーで視覚的に調整し、CSSコードを生成します。ブラウザ完結で安全です。
- 数値進数変換2進数・8進数・10進数・16進数を相互に変換します。1つ入力するだけで他の基数の値を同時に表示し、ビット演算やカラーコード、メモリアドレスの確認に便利。ブラウザ内で完結し、データは送信されません。
- タイムゾーン変換日本時間（JST）・UTC・ニューヨーク・ロンドンなど世界各地のタイムゾーン間で日時を変換します。海外とのミーティング調整やサーバーログの時刻確認に便利。サマータイムも考慮し、ブラウザ内で完結します。
- Unixタイムスタンプ変換Unixタイムスタンプ（エポック秒・ミリ秒）と日時を相互に変換します。ISO 8601形式やローカル時刻・UTCでの表示に対応し、ログやAPIレスポンスの時刻確認に便利。ブラウザ内で完結し、データは送信されません。
- CSV ↔ JSON変換CSVをJSONに、またはJSONをCSVに相互変換します。1行目をヘッダーとして扱い、ダブルクォートで囲まれた値にも対応。データ分析やAPIデータの加工に便利です。ブラウザ内で完結し、データは送信されません。
- テキストケース変換テキストをcamelCase・snake_case・PascalCase・kebab-caseなど9種類のケースに一括変換します。変数名や関数名、定数名、ファイル名の命名規則をそろえるのに便利。ブラウザ内で完結し、データは送信されません。