Utilore

カラーピッカー

四角の上をなぞって色を選ぶか、すでにある色を取ります。画像からはスポイトで、ブラウザが対応していれば画面のどこからでも。コードは三つの書き方ですぐに出ます。

色を選ぶ

最近の色

画面のどこからでも色を取れるのは Chrome と Edge だけです。Safari と Firefox ではボタン自体を出しません。約束してから断るほうが、はじめから出さないより悪いからです。そちらでは画像をお使いください。スクリーンショットで十分です。

画像はこのタブから出ません。色はその場のキャンバスから読み取り、アップロードはありません。最近の色はこの端末にだけ残ります。

近い道具： カラーコード変換 · カラーパレット生成ツール · CSS グラデーション作成ツール · HEX を RGB に変換

使い方

  1. 四角をドラッグして濃さを選び、下のスライダーで色みを変えます。
  2. 半透明が必要なら不透明度を下げます。rgba として、または HEX の末尾二文字として現れます。
  3. すでにある色を取るには「画像から取る」を押して画像をクリックします。Chrome と Edge なら画面から直接も取れます。
  4. 必要な書き方の横の「コピー」を押します。色は最近の色の帯に入るので、あとで戻れます。

知っておくと便利

四角に HSV を使う理由

HSV では「彩度 × 明度」の四角が端から端まで埋まり、どの点も別の色になります。同じ四角を HSL で作ると退化します。上の行は全部白、下の行は全部黒で、面積の半分が何も選べません。選択の理由はこれだけで、テストが守っているのもこの一点です。

入口が三つあるのは、来る理由が違うから

色を選ぶことと、色を見つけることは別の仕事です。四角は選ぶためのもの。画像の上のスポイトは、すでにどこかにある色のため——スクリーンショット、ロゴ、写真の中の色です。画面から取るのは同じことを窓を出ずに行うもので、これができるのは Chrome と Edge だけです。

透明度が現れる場所

不透明度は満たない時だけ書きます。「rgba(31, 95, 214, 1)」ではなく「rgb(31, 95, 214)」です。前者はどのみち手で直すことになります。HEX では透明度が末尾の二文字になります。今のブラウザは理解しますが古い道具は理解しないので、完全不透明のときは末尾を書きません。

よくある質問

私のブラウザに「画面から取る」ボタンがないのはなぜですか。

Safari と Firefox がこの機能を持っていないからです。これはブラウザの機能であって私たちのものではなく、Chrome と Edge にしかありません。ボタンを出しておいて断るのは、はじめから出さないより悪いので、そもそも表示しません。スクリーンショットを撮って画像から取れば、結果は同じです。

写真のある一点の色を知るには。

「画像から取る」を押してファイルを選び、写真の上でポインタを動かしてください。色がポインタについてきます。クリックすればその色が残ります。画像はどこにもアップロードされません。このタブのキャンバスに描き、そこから読み取っています。

選ぶかわりに色を打ち込めますか。

できます。三つの入力欄のどれかに、よくある書き方で入れてください。#1f5fd6、1f5fd6、rgb(31, 95, 214) など。残りの二つと四角が自動で追随します。書き方を変換したいだけなら、隣のカラーコンバーターのほうが近道です。

明度をゼロまで下げると色相スライダーが飛びます。

飛ぶべきではありませんし、飛びません。黒と白には色相がないので、スライダーは赤に戻らず前の値を保ちます。意図的です。そうしないと、四角の下端に行くたびに作業していた色みを失ってしまいます。

最近の色はどこに保存されますか。

この端末のブラウザの中です。送信もされませんし、あなたと結びつくこともありません。サイトのデータを消せば、帯はまた空になります。

関連ツール