カラーピッカー
色を選んで微調整し、必要な形式でコードをコピーしましょう。
このデバイス内で封印済み
ブラウザ内で動作します。何もアップロードされません。
封印済み
色を選ぶ
カラーコード
HEX
RGB
HSL
OKLCH
CMYK
明るい色・暗い色
片側に明るい色、反対側に暗い色が並びます。選ぶとその色を使えます。
使い方
-
色を選ぶ
カラーエリアと色相スライダーをドラッグするか、手元のコードを入力するか、画面から色を取得します。
-
微調整する
不透明度を調整したり、明るい色・暗い色のバリエーションから好みの色合いを探したりできます。
-
コードをコピー
HEX、RGB、HSL、OKLCH、CMYKの値をコピーして、デザインやコード、文書に貼り付けます。
よくある質問
画面上の色を取得するには?
「画面から取得」を選び、画面上の好きな場所をクリックするとその色を取得できます。このスポイト機能は、パソコン版のChrome、Edge、そのほかのChromium系ブラウザで使えます。ほかのブラウザでは、カラースウォッチからシステムのカラーピッカーが開き、多くの場合そこにスポイト機能があります。
どのカラー形式を使えばよいですか?
HEXはWebデザインで最も一般的で、どこでも使えます。RGBとHSLは、CSSで値を手動で調整したいときに便利です。OKLCHは、色相が変わっても明るさが揃う新しいCSSの形式です。CMYKは印刷用の出発点として使えます。
明るい色(ティント)と暗い色(シェード)の違いは?
ティントは色に白を混ぜたもので、明るくなります。シェードは色に黒を混ぜたもので、暗くなります。このピッカーは知覚に基づく色空間で混ぜるため、各段階が均等な間隔に見えます。
キーボードで操作できますか?
はい。カラーエリアにフォーカスして矢印キーで彩度と明度を変更できます。Shiftキーを押しながらだと大きく動きます。色相と不透明度のスライダーも矢印キーで操作できます。
色を共有できますか?
はい。選んだ色に合わせてページのアドレスが更新されるので、ブックマークしたり、リンクを誰かに送ったりできます。