色コード変換・カラーピッカー

RGBスライダーで色を作りながらHEX・RGB・HSLへ即変換。リアルタイムプレビュー付き

ファイルはサーバーに送信されません

HEX

RGB

rgb(59, 130, 246)

HSL

色相 H

彩度 S

明度 L

hsl(217, 91%, 60%)

詳しく読む — 関連ガイド記事

ガイド記事

色コードHEX・RGB・HSLの違いと使い分け — CSSで迷わない色指定

HEX・RGB・RGBA・HSLの表記ルールとCSSで使い分ける判断基準、透明度（アルファ）の扱いとアクセシビリティ配色の考え方を解説。

ガイド記事

2進数・10進数・16進数の変換 — ビット・バイト・カラーコードの基礎

コンピュータが2進数で動く理由と、16進数がプログラミングで使われる背景。手計算のやり方、JavaScriptでの変換コード、カラーコードやIPアドレスでの実例を解説。

RGBスライダーでどんなことができますか？

赤(R)・緑(G)・青(B)それぞれのスライダーを動かすと、リアルタイムで色が変わります。感覚的に色を作りながらHEX・RGB・HSLの値を同時に確認できます。

HEX・RGB・HSLの違いは何ですか？

HEXは#RRGGBBの16進数表記で、HTMLやCSSで広く使われます。RGBは赤・緑・青の強度（0〜255）で指定します。HSLは色相(Hue)・彩度(Saturation)・明度(Lightness)で表し、人間の感覚に近い調整がしやすい形式です。

どんな場面で使いますか？

スライダーで直感的に色を探してコードをコピーしたり、Figma・Illustratorからコピーした色コードをCSS用に変換したりする用途でよく使われます。HSLスライダーで明度だけ変えて同系色を作るのにも便利です。

入力した色データはサーバーに送信されますか？

いいえ、すべての処理はお使いのブラウザ内で完結します。入力した色コードが外部に送信されることはありません。

JSON整形・検証

JSONを整形・フォーマット。構文エラーも検出。コピーボタン付き。

使う →

正規表現テスター

正規表現パターンをリアルタイムでテスト。マッチ箇所のハイライト・グループキャプチャ・フラグ対応。

使う →

JWTデコード・検証

JWTをデコードしてヘッダー・ペイロード・署名を確認。有効期限チェック対応。

使う →

Base64変換（エンコード/デコード）

テキストをBase64に変換・復号。URLセーフBase64・日本語にも対応。

使う →

✓3形式を同時表示・コピー：HEX・RGB・HSLの3形式を常に同時表示。使いたい形式だけワンクリックでコピーできる
✓グラデーションスライダーで直感的な色調整：RGBスライダーは各チャンネルのグラデーションを背景に表示。現在の色に対してどの方向に変化するか視覚的に確認できる
✓HSLで同系色を簡単作成：明度(L)スライダーだけ動かせば同じ色相の明るさだけが変わるため、ホバー色・無効色・背景色などの同系色バリエーションを素早く作れる
✓ブラウザ完結・プライバシー安全：色コードはサーバーに送信されません