色変換
HEX・RGB・HSL形式の相互変換。カラーピッカーから直接選択もできます。
処理が完了しました
色変換
次回は「マイツール」からすぐ開けます。保存するのはこのブラウザのツール一覧で、入力値・計算結果は保存しません。
⌥Dショートカットキー (Option+D) でも一瞬でマイツールを起動できます
使い方
- 1
色を指定
HEX・RGB・HSLのいずれかの形式で色を指定します。
- 2
自動変換
他の形式に自動変換されます。
- 3
コピー
必要な形式の値をコピーします。
このツールの特長
- HEX・RGB・HSLの相互変換
- カラーピッカーで直感的に色を選択
- 3桁の短縮HEXにも対応
- 各形式をワンクリックでコピー
こんな場面で便利
Webデザインの色指定
デザインツールのHEX値を、CSSにそのまま使えるRGBやHSLに変換できます。
ブランドカラーの統一
ブランドカラーを各形式に変換して、Web・印刷・資料で一貫させます。
デザインツール間の変換
ツールごとに求められる色形式の違いを、その場で解決できます。
詳しい説明
WebデザインやUI実装では、色をHEX（#ff0000）、RGB（rgb(255, 0, 0)）、HSL（hsl(0, 100%, 50%)）などの形式で指定します。ツールや環境によって必要となる形式は異なるため、相互変換が頻繁に必要になります。
カラーピッカーから直接色を選ぶこともできます。選択した色は3つの形式すべてに即座に変換され、それぞれワンクリックでコピーできます。
HSL形式は色相（Hue）、彩度（Saturation）、明度（Lightness）で色を表すため、色相環での調整や、同じ色相の濃淡バリエーションを作るのに適しています。
よくある質問
短縮HEX（#f00）も変換できますか?
はい。#f00のような3桁の短縮HEXも自動的に展開して変換します。
アルファ値（透明度）は扱えますか?
現在は不透明色のみ対応しています。アルファ値付きのRGBA・HSLA形式には対応していません。
色の名前（redなど）は使えますか?
現在はHEX・RGB・HSLの形式のみ対応しています。
HEXカラーコードをRGBに変換する方法は?
HEXを入力すると、RGBとHSLに自動で変換されます。
関連ガイド
ガイド色変換のやり方｜HEX・RGB・HSLと透明度の注意点
HEX・RGB・HSLの対応を数値と図で確認。3桁HEX、HSLの丸め、透明な色の合成、対応する入力形式とコピー前の検算を解説します。
ガイド配色の決め方｜補色・類似色・トライアドを用途で選ぶ
基準色から4方式のパレットを作り、背景・本文・操作色へ割り当てる手順を解説。実際の生成色数、HEXコピー、文字のコントラスト確認まで比較表と図で示します。
ガイドコントラスト比の調べ方｜WCAG 2.2の基準・透過背景・判定手順
通常文字4.5:1、大きい文字3:1を対象別に選び、実際の文字色と背景色を検査。丸めによる誤判定、プレースホルダー、ガラス調の透過背景も数値例で解説します。
関連ツール
カラーパレット生成
ベースの色から4方式の配色候補を生成。HEX・RGB・HSLを表示し、HEXコードをコピーしてデザインに使えます。
コントラストチェッカー
文字の色と背景の色のコントラスト比を計算し、WCAGの達成基準（AA・AAA）との適合を即座に判定します。読みやすい配色づくりの確認に役立ちます。
画像カラーパレット抽出
画像をアップロードすると、使われている主要な色を自動で抽出してカラーパレットを作ります。色の数（4/6/8色）を選び、HEX・RGBコードをワンクリックでコピー可能。処理はすべてブラウザ内で完結します。
画像圧縮
画像ファイルのサイズを簡単に圧縮。圧縮後の見た目と容量を確認しながら、WebサイトやSNS投稿向けに調整できます。
すべての処理はブラウザ内で実行されます。ファイルがアップロードされることはありません。
検証: 色入力・変換・コピーを回帰対象として管理
今日の豆知識
人間の目は「緑」の色の違いに最も敏感だと言われています。