コンピューターで色の16進コードを見つけます

著者: Judy Howell
作成日: 28 J 2021
更新日: 1 J 2024
Anonim
Illustrator CCWebデザインテクニック:Webで利用する16進数のカラーコードの仕組みを知る|lynda.com 日本版
ビデオ: Illustrator CCWebデザインテクニック:Webで利用する16進数のカラーコードの仕組みを知る|lynda.com 日本版

コンテンツ

HTMLとCSSでは、色は16進コードによって区別されます。 Webページを作成している、または別のHTMLプロジェクトで作業していて、コンピューター画面の画像、Webサイト、またはウィンドウの特定の色に一致する要素を含めたい場合は、その色の16進コードを見つける必要があります。このwikiHowは、さまざまな無料ツールを使用して、任意の色の16進コードをすばやく見つける方法を示しています。

ステップに

方法1/4:Macでデジタルカラーメーターを使用する

  1. Macでデジタルカラーメーターを開きます。 このツールはmacOSの一部であり、画面上の任意の色の色の値を区別できます。 Finderを開き、フォルダをダブルクリックします プログラム、フォルダをダブルクリックします ユーティリティ 次にダブルクリックします デジタルカラーメーター それを開きます。
  2. 16進コードを検索する色にマウスカーソルを移動します。 マウスを動かすと、ツールの値がリアルタイムで更新されます。水平方向と垂直方向の両方の開口部をロックするまで、この場所からマウスを動かさないでください。
    • このツールを使用して、Web上の色を認識することもできます。 Safariなどのブラウザ(または他のブラウザ)を開き、認識したい色のWebサイトにアクセスします。
  3. 押す ⌘コマンド+L。. これにより、水平方向と垂直方向の両方のギャップがロックされます。つまり、マウスを動かしてもカラー値は変化しません。
  4. 押す ⇧シフト+⌘コマンド+C。 16進コードをクリップボードにコピーします。 をクリックして16進コードをコピーすることもできます メニューとクリック 色をテキストとしてコピーする 選ぶ。
  5. 押す ⌘コマンド+V。 コピーしたコードを貼り付けます。 コードをHTMLコード、テキストファイル、またはテキストを入力できる他の場所に直接貼り付けることができます。
  6. 押す ⌘コマンド+L。 カラーファインダーのロックを解除します。 別の色を決定したい場合は、これによりロックが解除され、カーソルが再び色値ファインダーとして機能します。

方法2/4:Windows用のカラーコップの使用

  1. カラーコップをインストールします。 Color Copは、画面上の任意の色の16進コードをすばやく見つけるために使用できる小さな無料のユーティリティです。このアプリは次のように入手できます。
    • Webブラウザでhttp://colorcop.net/downloadにアクセスします。
    • クリック colorcop-setup.exe 「自己インストール」の下。ファイルが自動的にダウンロードされない場合は、 セーブ または OK ダウンロードを開始します。
    • ダウンロードしたファイルをダブルクリックします(フォルダ内にあります) ダウンロード 通常、ブラウザタブの左下にあります)。
    • 画面の指示に従って、アプリケーションをインストールします。
  2. カラー警官を開きます。 スタートメニューにあります。
  3. スポイトを識別したい色にドラッグします。 他のアプリケーションやWebサイトの色を含め、画面上の任意の色を識別できます。
  4. マウスボタンを離して、16進コードを表示します。 コードは、プログラムの中央の空白スペースに表示されます。
  5. 16進コードをダブルクリックしてを押します Ctrl+C。. これにより、16進コードがクリップボードにコピーされます。
  6. 必要な場所にコードを貼り付けます。 あなたはできる Ctrl + V HTMLやCSSコードなど、必要な場所に16進コードを貼り付けるために使用します。

方法3/4:Imagecolorpicker.comを使用する

  1. に移動 https://imagecolorpicker.com コンピューター、電話、またはタブレットで。 この無料ツールを使用して、アップロードされた画像の任意の色の16進コードを判別できます。この方法は、Android、iPhone、iPadを含むすべてのWebブラウザで機能します。
  2. 画像をアップロードするか、URLを入力してください。 自分の画像をアップロードするか、オンライン画像またはWebサイトを使用するかを決定する必要があります。どちらの方法でも画像やウェブページを表示できるので、好きな色を選ぶことができます。
    • 画像をアップロードするには、下にスクロールして[ 画像をアップロードする、次に、コンピューター、電話、またはタブレットの画像に移動し、アップロードするオプションを選択します。
    • Webサイトを使用するには、[このボックスを使用してWebサイトのHTMLカラーコードを取得する]オプションまで下にスクロールし、URLを入力して、ボタンをクリックまたはタップします。 ウェブサイトを取る ウェブサイトを選択します。
    • ウェブサイト全体ではなくウェブ上の直接画像を選択するには、[このボックスを使用してこのURLから画像のHTMLカラーコードを取得する]ボックスに画像のURLを入力し、クリックまたはタップします 画像を撮る.
  3. 画像/サイトのプレビューで必要な色をクリックまたはタップします。 これにより、画面の左下隅に色の16進コードが表示されます。
  4. コピーアイコン(16進コードの右側にある2つの重なっている正方形)をクリックまたはタップして、16進コードをクリップボードにコピーします。 次に、それを任意のテキストファイルまたは入力領域に貼り付けることができます。

方法4/4:Firefoxの使用(Webでの色付け用)

  1. PCまたはMacでFirefoxを開きます。 Firefox Webブラウザーには、Web上の任意の色の16進コードを識別するために使用できる無料のツールが付属しています。 Firefoxがインストールされている場合は、[スタート]メニュー(Windows)または[アプリケーション]フォルダー(macOS)にあります。
    • Firefoxはhttps://www.mozilla.org/en-US/firefoxから無料でダウンロードできます。
    • Firefoxは、Webサイトの色の値のみを返します。ブラウザの外部でツールを使用することはできません。
  2. 決定したい色が含まれているWebサイトにアクセスします。 色が必要な要素が表示されていることを確認してください。
  3. メニューをクリックします . これらは、Firefoxの右上隅にある3本の水平線です。
  4. クリックして ウェブ開発者-メニュー。 別のメニューが展開されています。
  5. クリックしてください ピペット. マウスカーソルが大きな円に変わります。
  6. 決定したい色をクリックします。 色の16進値は、マウスをその場所に移動するとすぐに更新されます。マウスをクリックするとすぐに、Firefoxは16進コードをクリップボードに保存します。
  7. 必要な場所にコードを貼り付けます。 あなたはできる コントロール+ V 使用(PC)または コマンド+ V (Mac)16進コードをHTML、CSS、またはその他の種類のテキストファイルに貼り付けます。

チップ

  • 他にも、カラーピッカーを使用して色の16進コードを判別できるWebサイト、ブラウザー拡張機能、および画像編集プログラムがあります。
  • あなたが見つけようとしている色のウェブページの作成者が誰であるかを知っているなら、彼らがどの16進コードを使用したかをいつでも尋ねることができます。 Webサイトのソースコードを検索して、そこにリストされている16進コードを見つけることもできます。