カラーコンバーター
HEX, RGB, と HSL .
形式間で即座に変換、色を可視化してプロジェクト用CSSコードを取得。
#3B82F6
Click to pick color
CSS Usage
color: #3B82F6;COPY
rgb(59, 130, 246);COPY
hsl(217, 91%, 60%);COPY
#
Red
Green
Blue
Hue (°)
Sat (%)
Light (%)
一般的な使用例
🎨
Webデザイン
見つけたHEXコードをHSL値に変換し、ホバー状態用に明るい/暗いバリエーションを簡単に作成。
🖨️
印刷準備
ブランドカラーのCMYK等価値をチェックして、名刺でどう見えるか確認。
💻
開発
不透明HEXコード（例：#RRGGBBAA）をより読みやすいRGBA形式に変換してカラー問題をデバッグ。
🖌️
テーマ作成
すべてのレガシーRGB値をCSS変数用HEXに変換してカラーパレットを標準化。
使い方
このツールはWeb開発におけるカラー形式のスイスアーミーナイフとして設計。
入力＆変換
- どこにでも入力: 任意のフィールド（HEX、R/G/B、H/S/L）に値を入力。他のフィールドは自動更新。
- カラーピッカー: 大きなカラープレビューボックスをクリックしてブラウザのネイティブカラーピッカー（スポイトツール）を開く。
クリップボードにコピー
- ワンクリックコピー: HEXフィールドの横のコピーアイコンをクリック。
- CSSスニペット: プレビュー下のボックスで、任意の行（例：rgb(0,0,0)）をクリックして有効なCSSコードをコピー。
コードでのカラー変換
プログラムでHEX⇔RGB変換はよくあるタスク。JavaScriptとPythonでの実装方法。
JavaScriptHex to RGB
function hexToRgb(hex) {
// Remove hash
hex = hex.replace(/^#/, '');
// Parse components
const bigint = parseInt(hex, 16);
const r = (bigint >> 16) & 255;
const g = (bigint >> 8) & 255;
const b = bigint & 255;
return `rgb(${r}, ${g}, ${b})`;
}
console.log(hexToRgb("#ff0000"));
// Output: "rgb(255, 0, 0)"PythonPillow / Native
def hex_to_rgb(hex_val):
hex_val = hex_val.lstrip('#')
return tuple(int(hex_val[i:i+2], 16) for i in (0, 2, 4))
print(hex_to_rgb("#3B82F6"))
# Output: (59, 130, 246)CSSModern Colors
/* Classic */
.color { color: #ff0000; }
.color { color: rgb(255, 0, 0); }
/* Modern (Level 4) - Space separated */
.color { color: rgb(255 0 0); }
.color { color: rgb(255 0 0 / 50%); } /* with alpha */よくある質問
HEXとは？
HEXはRGB値の16進数表現。#で始まり6文字（0-9、A-F）が続く。最初のペアは赤、2番目は緑、3番目は青を表す。
HSLはいつ使うべき？
HSL（色相、彩度、輝度）は人間にとってより直感的。輝度を調整して明暗を作成したり、色相を調整して補色を作成するのが簡単。
不透明度（アルファ）とは？
不透明度は色の透明度を制御。RGBAでは0（完全透明）から1（完全不透明）の数値。
色覚異常はどのくらい一般的？
男性の約1/12、女性の約1/200が何らかの色覚異常。高コントラストを使用し、重要な情報を色だけに頼らないことが重要。