読み込み中...
読み込み中...
HEX・HEXA・RGB・RGBA・HSL・HSLAを瞬時に相互変換。WCAGコントラスト、URL共有、スポイト取得、拡張配色パレット確認まで1つの画面で使えます。
URLに現在の入力状態を反映します。共有用リンクもコピーできます。
3/4/6/8桁HEX、RGBA、HSLA の alpha に対応しています。透明度がある場合は HEXA と CSS 用 rgba()/hsl(... / a) も同時に生成します。
画面上の色を直接拾いたい場合はブラウザの EyeDropper API も使えます。
R
G
B
H (0-360)
S (0-100)
L (0-100)
0 で完全透明、1 で不透明です。RGB/HSL の両方に共通で使われます。
よく使う色
働き方を見直すなら
関連する選択肢をまとめて確認できます。
※ PRリンクを含みます
カラーコード変換ツールは、Web開発やUIデザインで使われる色の表記方法 （HEX・HEXA・RGB・RGBA・HSL・HSLA）を相互に変換するツールです。 カラーピッカーで直感的に色を選びつつ、WCAG 2.1に基づくコントラスト比の確認、 補色・類似色・トライアドに加えてスプリットコンプリメンタリーやテトラディック配色の比較、共有URLの生成までまとめて行えます。
色の表記方法
🎯
透明度付きの8桁HEXやCSSのrgba()/hsl(... / a)までまとめて生成できます。
🎨
色を視覚的に選ぶだけでなく、対応ブラウザでは画面上の色を直接取得できます。
♿
AA / AAA の目安を確認し、アクセシビリティ上の読みやすさをその場で判断できます。
🌈
補色・類似色・トライアド・スプリットコンプリメンタリー・テトラディック・明度バリエーションを比較できます。
🔗
現在の入力状態をURLパラメータに反映するので、確認中の色や配色案をそのまま共有できます。
📋
HEX、HEXA、rgb()、rgba()、hsl()、hsla() をそのまま実装へ貼り付けられます。
⚡
登録不要・無料で、入力した色データをサーバーに送らずに利用できます。
| 色 | HEX | RGB | HSL |
|---|---|---|---|
Red | #FF0000 | 255, 0, 0 | 0°, 100%, 50% |
Green | #008000 | 0, 128, 0 | 120°, 100%, 25% |
Blue | #0000FF | 0, 0, 255 | 240°, 100%, 50% |
Yellow | #FFFF00 | 255, 255, 0 | 60°, 100%, 50% |
Cyan | #00FFFF | 0, 255, 255 | 180°, 100%, 50% |
Magenta | #FF00FF | 255, 0, 255 | 300°, 100%, 50% |
Orange | #FFA500 | 255, 165, 0 | 39°, 100%, 50% |
White | #FFFFFF | 255, 255, 255 | 0°, 0%, 100% |
Black | #000000 | 0, 0, 0 | 0°, 0%, 0% |
Gray | #808080 | 128, 128, 128 | 0°, 0%, 50% |
HEXカラーコードは、色を16進数で表す方法です。#に続く6桁（例: #FF5733）で表記します。 Web開発やデザインで最もよく使われる色指定方法です。3桁の短縮形（例: #F00 = #FF0000）もあります。
RGBは赤(R)・緑(G)・青(B)の光の三原色で色を表現します（各値0〜255）。 HSLは色相(H: 0-360°)・彩度(S: 0-100%)・明度(L: 0-100%)で表現し、 直感的に色の調整がしやすいのが特徴です。
WCAG（Web Content Accessibility Guidelines）では、テキストと背景色のコントラスト比について、 AA基準で通常テキスト4.5:1以上・大テキスト3:1以上、 AAA基準で通常テキスト7:1以上・大テキスト4.5:1以上が推奨されています。
補色は色相環で正反対の色（180°）、類似色は隣接する色（±30°）、 トライアドは120°ずつ離れた3色です。いずれもデザインで調和のとれた配色を作るための基本パターンです。
はい。#RRGGBBAA や #RGBA のような透明度付きHEXに対応しています。 変換結果では rgba(255, 87, 51, 0.5) や hsl(11 100% 60% / 0.5) のようなCSS向け表記もコピーできます。
はい、完全無料でご利用いただけます。登録やインストールも不要です。 すべての処理はブラウザ内で行われます。
CSSでは color: #FF5733;（HEX）、color: rgb(255, 87, 51);（RGB）、 color: hsl(11, 100%, 60%);（HSL）のいずれの形式でも指定できます。 当ツールでコピーした値をそのままCSSに貼り付けて使えます。