JavaScript カラーコード変換実装コード生成ツール
HEX(16進数)やRGBなどのカラーコードを相互に変換するJavaScriptの実装コードを生成します。
プレビュー
<p id="before" style="color: {{sample_before}}">{{sample_before}}</p>
<p>↓</p>
<p id="after" style="color: {{sample_before}}"></p>
// カラーコード変換関数
const convertColor = (val) => {
{{logic}}
};
// 変換前のカラーコード
const beforeVal = '{{sample_before}}';
// 変換処理
const afterVal = convertColor(beforeVal);
// テスト用の出力
const afterOutputArea = document.querySelector('#after');
afterOutputArea.innerText = afterVal;
機能・使い方
- HEX形式(#1E90FF等)とRGB形式(rgb(30, 144, 255)等)を相互に変換する実装コードを生成します。
- 「HEX to RGB」または「RGB to HEX」を選択すると、変換ロジックが切り替わります。
- プレビューエリアでは、選択した形式に応じたサンプル値で変換テストが行われます。
追加の情報
JavaScriptで色を扱う際、CSS変数の操作やCanvas APIでの描画、動的なスタイル適用などで形式の変換が必要になる場面が多くあります。
HEX(16進数)からRGBへの変換では parseInt(val, 16) を使用し、逆にRGBからHEXへの変換では toString(16) と
padStart(2, '0') を組み合わせるのが効率的です。