「このサイトの文字って何のフォント？」
「画像に使われている色を知りたい」
Web制作やデザインをしていると、こんな場面は意外と多いですよね。
そんな時に便利なのが Font& Color-Checker です。
書体と色を、そのまま — Font & Color Checker
画像から色をスポイトで抜き出し、任意のサイトから書体と色を読み取る。ブラウザだけで完結する書体・配色チェッカー。
font-color-checker.fanelab.com
画像からカラーコードを取得したり、Webサイト上で使われているフォントや文字情報まで簡単に調べられるブラウザツールを作成しました。
開発したきっかけ
普段Web制作をしていると、
- デザイン画像の色を取得したい
- 配色を参考にしたい
- 使用フォントを知りたい
という場面が何度もありました。
毎回別々のサイトを開いて調べるのが面倒だったため、
「色もフォントも1つで調べられるツール」
を目指して開発しました。
主な機能
画像からカラーコードを取得
画像を読み込むだけで、
- HEXカラーコード
- RGB
- 配色一覧
を確認できます。
虫眼鏡でピンポイント取得
拡大表示（虫眼鏡）機能を搭載。
細かいアイコンや境界線など、
1ピクセル単位で近い色まで確認できます。
配色を一覧表示
画像全体で使用されている色を自動解析。
デザインの参考や、
ブランドカラーの確認にも便利です。
Webサイトのフォント解析
ブックマークバーへ専用ボタンを追加すると、
調べたいWebサイトを開いてクリックするだけで
- フォント名
- サイズ
- 太さ
- 行間
- 字間
- 文字色
- 背景色
を取得できます。
デザインの研究やコーディング時に役立ちます。
こんな方におすすめ
- Webデザイナー
- コーダー
- ブログ運営者
- Illustrator・Photoshop利用者
- 配色を参考にしたい
ぜひ使ってみてください
Web制作やデザインの作業効率を少しでも上げられるように作成しました。
ぜひ一度試してみてください👇
書体と色を、そのまま — Font & Color Checker
画像から色をスポイトで抜き出し、任意のサイトから書体と色を読み取る。ブラウザだけで完結する書体・配色チェッカー。
font-color-checker.fanelab.com
詳しい使い方は下記記事をご参照ください👇
Font & Color Checkerの使い方｜画像から色・サイトから書体を簡単に調べる方法
Font & Color Checkerは、画像から色を抽出したり、Webサイトで使用されている書体やCSS情報を調べたりできる無料ツールです。一般的なツールでは「色だけ」「フォントだけ」のように機能が分かれていることが多いですが、Font…
FANELAB
裏側話書きになる方はこちらをご参照ください👇
【裏側話】画像からフォントを探す機能を諦めた話｜でも代わりにもっと便利な機能が生まれた
Font & Color Checkerで画像からフォント検索機能を断念した理由をご紹介。代わりに採用したブックマークレットが想像以上に便利だった話です。
FANELAB