Google chromeの便利な拡張機能の覚え書き~初心者向け 【クローム・マガジン】

サイトの色情報を簡単に取得する colorzilla

サイトの色情報を簡単に取得する colorzilla

サイトの色情報を簡単に取得する colorzilla

私が思うに、デザイナーさんやクリエイターさん向けの拡張機能と思っています。しかし、素人だってクールなサイトを作りたい!せめて配色だけでも真似てみたい。綺麗なサイトの色情報を丸裸にする colorzilla 。

Tag: 配色

chrome拡張機能インストール

colorzilla 使い方

使い方の前に、アイコンをクリックしオプションへと進んでほしい。下記画像のように設定していますがお好みでかまいません。

Eyedropper

  • Automatically start eyedropper when main button is clicked:
    • チェックを入れておくと行動が1つ省略されて便利です。アイコンをクリックで自動でスポイトが開始します
  • Outline hovered elements:ホバー時に要素を表示
  • Change cursor to crosshair:カーソルを「+」に

Auto-copy

  • カラーフォーマットを選択
    • このあたりはお好みで!

Color Format

  • 16進数を英小文字で表示

「Automatically start eyedropper when main button is clicked.」にチェックを入れておく、Auto-copyでは、16進数を選択

色を抽出

スポイトのアイコンをクリックするとカーソルが「+」になります。抽出したい色へと移動すると上部に色のステータスバーが表示されます。

色の上でクリックすると、その場でカラーコードがコピーされるのでhtmlやcssにそのまま貼り付けることができます。

抽出したい色へと移動すると上部に色のステータスが表示


抽出した色はメニューの Picked Color History から即座に確認できます。

抽出した色の確認

サイト全体で使われている色を抽出

アイコンをクリック→Webpage Color Analyserといくとスタイルシートで使われている色のカラーパレットが作成されます。

スタイルシートで使われている色のカラーパレットが作成


色の1つをクリックすると、その部分まで移動し要素を分析し表示してくれます。

要素を分析し表示

あとがき

他にも解説すべき項目があります。しかし、知識不足ゆえ私が解説できるのはここまで。もっと精進しなければ (;´Д`)

関連記事

  • サイトの色情報を簡単に取得する colorzilla

最新記事


コメント


認証コード4297

コメントは管理者の承認後に表示されます。

powered by HAIK 7.0.2
based on PukiWiki 1.4.7 License is GPL. HAIK

最新の更新 RSS  Valid XHTML 1.0 Transitional