こんにちは、id:rokuokun です。
この記事ははてなエンジニア Advent Calendar 2025 - Hatena Developer Blog の1月8日の記事です。 つまり39日目です。
昨日は 
id:magaming さんで 不動産紹介サイトの情報から住所を特定するWebアプリを作ってた - magamingのブログ という記事でした。
今回は node-vibrant というライブラリで画像から主要な色を取り出して遊んでみます。
node-vibrant
node-vibrant は指定された画像から主要な色をカラーパレットとして取り出すことができるライブラリです。
GitHub はこちら。
ドキュメントはこちら。
色を抽出する
ドキュメントをなぞるだけでできます。 https://vibrant.dev/guides/get-started/
画像から色を抽出するには以下のようにします。 本当にこれだけです。簡単です。
import { Vibrant } from "node-vibrant/browser"; const vibrant = new Vibrant("path/to/image"); const palette = await vibrant.getPalette(); console.log(palette.Vibrant?.hex);
動作例を作ってきました。
hatena-advent-2025.km3.workers.dev
この例では、ブラウザ側で処理していますが、その他 Node.js と Web Worker 上で動作します。 その場合は import するものが異なります。
// Node.js usage
import { Vibrant } from "node-vibrant/node";
// Browser usage
import { Vibrant } from "node-vibrant/browser";
あとの詳しいことはドキュメントを見てください。
https://vibrant.dev/guides/get-started/
思ったより簡単だった
思ったより簡単でした。これだけでは記事にならないので困りました。
そういえば、最近のウェッブサイトはライトテーマとダークテーマを提供するのは定番ですがそれ以外の色がないのは少し寂しいです。 都合がいいので、好きな画像でカラーテーマを変えられるページを作ってみます。
作ったもの
hatena-advent-2025.km3.workers.dev
全部 AI にお任せして作ってもらいました。記事の内容もAIが書いているので本当かは知りません。 画像を選択すると、その画像から色を抽出してテーマが自動決定されます。
URLからもできるようなってますが、CORS の都合などがあるのでアップロードする方が確実だと思います。
画像によっては見にくいこともありますが、まぁそこそこ読めるなという感じでした。
おわりに
オチはありません。
この記事ははてなエンジニア Advent Calendar 2025 - Hatena Developer Blog の1月8日の記事です。
明日(1月9日)は 
id:rmatsuoka さんです。よろしくお願いします。
