メインコンテンツへスキップ
Toolars
探索
バグを報告

デザイン · ローカルユーティリティ

RGBA → HEX 変換

RGBA to HEX Converter

rgb()・rgba() を #RRGGBB または #RRGGBBAA に変換。チャネルごとの確認と alpha の正確な丸めをローカルで行う。

タスクの道筋 / 入力から結果へ

チャンネル値を入力する

ローカルで実行 · アップロードなし

RGBA → HEX 変換の使い方、プライバシー、関連ツール

タスクの道筋 / 入力から結果へ

RGBA カラーを HEX に変換する方法

  1. 01

    チャンネル値を入力する

    「RGB または RGBA カラー」フィールドに rgb() または rgba() の値を入力します。最初は rgba(109, 94, 248, 0.8) が入力された状態で開き、64 文字まで受け付けます。赤・緑・青は 0〜255 の整数、アルファは 0〜1 の数値です。パーセント指定や範囲外のチャンネルは拒否されます。

  2. 02

    変換を実行する

    「HEX に変換」を押します。パーサーは変換前にすべてのチャンネルを検証し、フィールドを編集した時点で前の結果はクリアされるので、パネルに古い値が表示されることはありません。

  3. 03

    16 進数の結果を確認する

    結果は大文字の 16 進数値です。完全不透明なら #RRGGBB、アルファが 1 未満なら #RRGGBBAA になります。アルファバイトはアルファに 255 を掛けて丸めた値なので、0.8 は 204 になり、CC と書かれます。

  4. 04

    各チャンネルを個別に確認する

    結果のチャンネルとプレビューは alpha を 8 ビットに量子化した HEX 出力色です。例えば alpha 0.65 は 166/255 となり 0.65098 と表示されます。入力 alpha の複製ではなく出力の表示です。

  5. 05

    サンプルの変換を読み込む

    「サンプルを読み込む」を押すと、完全な実行例を見られます。rgba(14, 165, 233, 0.65) は #0EA5E9A6 に変換されます。0.65 × 255 は 166 に丸められ、16 進数では A6 だからです。「リセット」でデフォルトの入力 rgba(109, 94, 248, 0.8) に戻ります。

  6. 06

    結果をコピーまたはダウンロードする

    「出力をコピー」で 16 進数値をコピーするか、「ダウンロード」で toolars-color-hex.txt として保存します。どちらも変換が成功するまで無効のままです。

ツールの概要

処理
ブラウザー内で完結
入力の外部送信
なし
保存
一切保存しません
価格
無料

入力はブラウザに留まります。

RGBA → HEX 変換 は検証済みのローカル実行パスを使用し、隠れた入力・出力履歴を作成しません。

ローカル実行

現在のブラウザタブ内で実行されます。

隠れた処理なし

使用中のツールデータが Toolars のドキュメントレコードになることはありません。

アカウント不要

プロフィールを作成せずにコアワークフローを使えます。お気に入りはログイン後にアカウントへ同期されます。

即時リセット

タブを閉じれば、作業中のデータは消えます。

RGBA → HEX 変換 が実際に行うこと

デザイントークン、古いスタイルシート、多くの API はいまだに 16 進数カラーを求めますが、計算済みの CSS や最新のデザインツールが返すのは rgba() です。rgba(14, 165, 233, 0.65) を手で変換すれば、10 進数から 16 進数への変換が 3 回に加えてアルファバイトの計算が必要になります。RGBA → HEX 変換はこの計算を正確に行い、透明度を 8 桁の 16 進数として保持し、コピー前に入力を確認できるようパース済みのチャンネルを表示します。すべてあなたのデバイス上で実行され、どこにも送信されず、アカウントも不要です。

よくある質問

どんな入力構文が受け付けられますか?
カンマ区切りのチャンネルを持つ rgb(r, g, b) または rgba(r, g, b, a) です。赤・緑・青は 0〜255 の整数、アルファは 0.8 や .65 のような 0〜1 の数値でなければなりません。大文字小文字は区別されず、カンマの前後の空白も許容されます。rgb(50%, 30%, 20%) のようなパーセントチャンネルは仕様上拒否されます。
出力にアルファバイトが付くのはいつですか?
アルファが 1 未満のときだけです。rgba(109, 94, 248, 0.8) は #6D5EF8CC になり、同じ色でも完全不透明なら #6D5EF8 になります。16 進数表記に冗長な FF が付くことはありません。
アルファはどうやって最後のバイトになりますか?
アルファに 255 を掛けて最も近い整数に丸め、大文字の 16 進数 2 桁で書き出します。0.5 は 128 になって 80 と表示され、0.65 は 166 に丸められて A6 と表示されます。CSS が 8 桁の 16 進数カラーに使うのと同じマッピングです。
入力が拒否されたのはなぜですか?
メッセージが具体的な問題を示します。チャンネルが 255 を超えている、チャンネルが整数でない、アルファが 1 を超えている、あるいは形式が rgb() や rgba() ではない、などです。パーサーが意図的に厳密なのは、タイプミスが静かに間違った色にならないようにするためです。値を修正してもう一度変換してください。変換の過程で何かが送信されることはありません。
16 進数を rgba() に戻す変換はできますか?
できます。HEX → RGBA 変換を使ってください。#RGB、#RGBA、#RRGGBB、#RRGGBBAA を受け付け、各チャンネルを分解して確認できる rgba() 文字列を表示します。
カラーはどこかにアップロードされますか?
いいえ。変換はこのブラウザタブ内だけで実行され、入力と結果がこのタブの外に出ることはありません。アカウントも不要です。

デザインを続ける

行き止まりではなく、関連タスクへ。

完全な索引に戻らずに、別のフォーカスされたワークスペースへ移動できます。

CSS ローダージェネレーター

CSS Loader Generator

軌道リングまたは 3 ドットのローディングスピナーをサイズ・線・速度・色でデザインし、reduced motion 対応の CSS をコピー。

作成

CSS チェックボックスジェネレーター

CSS Checkbox Generator

カスタムチェックボックスのサイズ・枠線・状態色を整え、キーボード操作できる本物の input を残す CSS をコピー。

作成

CSS スイッチジェネレーター

CSS Switch Generator

トラック・つまみ・2 状態の色を持つピュア CSS トグルスイッチをデザイン。フォーカスと reduced motion 処理済みのコードをコピー。

作成

CSS clip-path ジェネレーター

CSS Clip Path Generator

ドラッグ、キーボード、座標入力で多角形を編集。4 種類のプリセットから始め、clip-path 宣言や CSS をローカルでコピーできます。

作成