メインコンテンツへスキップ
TransConvert

カラーピッカー

palette
opacity

選択中の色

任意のHex値を入力できます — 3桁・6桁どちらでも、#の有無を問いません。

調整

R
G
B
A

配色パターン

スウォッチをクリックすると、その色が選択中の色になります。

ティント & シェード

コントラスト

WCAGでは通常のテキスト(AA)で4.5:1、AAAで7:1が必要です。大きなテキストは3:1でも構いません。

履歴

ここでできること

palette

色を作る

colorize

画像から色を取得する

auto_awesome

そこから広げる

その他の画像ツール

よくある質問

色を選ぶ前に知っておきたいことをまとめました。

help

画像はどこかにアップロードされますか?

いいえ。このツールにはサーバー側の処理が一切ありません — 画像はブラウザ内で直接読み込まれ、お使いの端末の外に出ることはありません。そのため処理も瞬時に行われます。

help

HSLとHSVの違いは何ですか?

どちらも色相(Hue)で色を表しますが、残りの成分の測り方が異なります。HSLの明度(Lightness)は黒から純色を経て白まで変化するため、50%が最も鮮やかな状態です。HSVの明度(Value)は黒からその色の最も明るい状態まで変化するため、彩度100%・明度100%が最も鮮やかな状態になります。明るさ・暗さのバリエーションを選ぶにはHSLの方が扱いやすいことが多く、HSVは多くのカラーフィールドの動作に近い形式です。

help

CMYKの色がプリンターの出力と違って見えるのはなぜですか?

ここでのCMYKは、カラープロファイルを適用しない単純なRGBからの変換です。実際の印刷結果は使用するインクや用紙、プロファイルによって左右されるため、この数値は印刷用の確定仕様ではなく、あくまで目安として扱ってください。

help

画像からのパレットはどのように選ばれますか?

メディアンカット法によって選ばれます。画像内の色を1つの箱として扱い、最もばらつきの大きいチャンネルに沿って繰り返し分割し、それぞれ最終的な箱の平均色を採用します。そのため、最も多くのピクセルを占める色の似たような色合いばかりが並ぶのではなく、はっきりと異なる色が抽出されます。

help

コントラストチェックは何を教えてくれますか?

WCAGの計算式を使って、選んだ色と白・黒とのコントラスト比を示します。通常サイズのテキストはAAに合格するために少なくとも4.5:1、AAAには7:1が必要です。大きい・太字のテキストは3:1でAAに合格できます。この色のテキストが実際に読みやすいかを手早く確認する方法です。

help

ブラウザの外から色を取得できますか?

お使いのブラウザがネイティブのスポイト機能に対応している場合、「ピッカー」モードにボタンが表示され、画面上の任意のピクセルの色を取得できます。対応していない場合、他に確実な方法がないため、このボタンは非表示になります。

確かなセキュリティ対策で運用

定型文ではなく、具体的な内容をご紹介します。

cloud_off

アップロードは行われません

このツールにはサーバー側の処理がありません。画像はブラウザ内で読み込まれ、どこにも送信されません。

bolt

設計上、瞬時に処理

サーバーとの往復がないため、待ち時間も順番待ちもありません — 変更するたびに即座に反映されます。

shield

何も保存されません

保存するものは何もありません。このページからファイルがサーバーに届くことは一切ありません。

セキュリティ対策の詳細を見る →