🔧GottaniTools

🎨 カラーピッカー

HEX・RGB・HSL・CMYKを相互変換。カラーパレット生成・WCAGコントラスト比確認に対応。

#3B82F6

プリセット

RGB
rgb(59, 130, 246)
r
g
b
HSL
hsl(217, 91%, 60%)
H217°
S91%
L60%
CMYK
cmyk(76%, 47%, 0%, 4%)
C76%
M47%
Y0%
K4%

🖼️ 画像からスポイト

🖼️

画像をドラッグ&ドロップ、またはクリックして選択

PNG・JPEG・WebP・GIF・SVG 対応

コントラスト比（WCAG）

白テキスト4.46:1
黒テキスト4.71:1

AA基準: 通常テキスト≥4.5、大テキスト≥3.0　／　AAA基準: 通常≥7.0

カラーパレット生成

明度バリエーション（L: 90%〜10%）

90%
80%
70%
60%
50%
40%
30%
20%
10%

カラーハーモニー（補色・類似色・三色）

補色
類似色1
類似色2
類似色3
類似色4
三色1
三色2

一括コピー

📖 使い方・活用例

HEX・RGB・HSL・CMYKのカラーコードを相互変換するツールです。カラーパレットや補色・類似色などのカラーハーモニーを自動生成し、WCAGコントラスト比によるアクセシビリティチェックもできます。

使い方

  1. 1

    カラーコードを入力

    HEX（#ff0000）・RGB・HSL・CMYKいずれかの形式で色を入力します。カラーピッカーでの選択も可能です。

  2. 2

    変換結果を確認

    入力した色が全形式に自動変換されます。コピーボタンで各値を取得できます。

  3. 3

    パレット・ハーモニーを活用

    明度バリエーションや補色・類似色・三色ハーモニーが自動生成されます。

こんな時に使える

  • ✓デザインツールで使う色をHEXからRGBに変換したいとき
  • ✓印刷物のためにRGBカラーをCMYKに変換したいとき
  • ✓ブランドカラーの明度・濃度バリエーションを一覧したいとき
  • ✓テキストと背景色の組み合わせがWCAGのアクセシビリティ基準を満たすか確認したいとき

💡 ヒント

  • コントラスト比が4.5:1以上でWCAG AA基準、7:1以上でAAA基準を満たします。
  • カラーハーモニーはデザインの配色決定に役立ちます。