Webサイトで使用されている色を一括で取得する

中小企業診断士 ITコンサルのTakToolsです。

ロゴとかバナー制作の際、現在のWebサイトで使われている色を確認したい状況になりました。

個々の色については、Google Chromeのプラグインなどを使えば簡単に確認できますが、１つ１つ確認するのは大変だと思います。

そこで、今回は一括でWebサイトのカラーコードを取得する方法のご紹介です。

以下２点で構成されています。ご参考にしてください。

Webサイトのカラーコードを全て取得するPython
取得カラーコードを一覧で表示するVBA

今回の環境

macOS 15.1
python
power point

1. Webサイトのカラーコードを全て取得するPython

必要なライブラリのインストール

以下のライブラリを使用します。無い場合はインストールしてください。

pip install requests beautifulsoup4 cssutils

python環境をととのえる際、error: externally-managed-environmentが出る場合には、仮想環境（venv）を作成して実行するのが良いです（ここでは割愛します）。

サンプルコード

次に、Pythonコードを実行して、ウェブページから色を抽出します。このコードは、指定されたURLのHTMLとCSSから色コード（#xxxxxxやrgb(x, x, x)形式）を取得します。

必ず、「取得したいURL」を指定してください。

import requests
from bs4 import BeautifulSoup
import cssutils
import re

# 色を抽出するための正規表現
color_pattern = re.compile(r'(#[0-9a-fA-F]{3,6}|rgb\([^)]+\))')

def extract_colors_from_url(url):
    colors = set()

    # ページのHTMLを取得
    response = requests.get(url)
    soup = BeautifulSoup(response.text, 'html.parser')

    # インラインCSS内の色を取得
    for tag in soup.find_all(style=True):
        style = tag['style']
        colors.update(color_pattern.findall(style))

    # 外部CSSのリンクを取得
    for link in soup.find_all('link', rel='stylesheet'):
        css_url = link['href']
        if css_url.startswith('//'):
            css_url = 'https:' + css_url
        elif css_url.startswith('/'):
            css_url = url + css_url

        # 外部CSSから色を取得
        css_response = requests.get(css_url)
        css_parser = cssutils.parseString(css_response.text)
        for rule in css_parser:
            if rule.type == rule.STYLE_RULE:
                style = rule.style.cssText
                colors.update(color_pattern.findall(style))

    return colors

# 取得したいURLを指定
url = 'https://example.com'
colors = extract_colors_from_url(url)
print("Extracted colors:", colors)

実行時、うまく色が取得できない状況の場合、WARNINGやERRORが出ると思いますが、今回は特に対処していません。状況にあわせてコードを修正してください。

このコードは、外部CSSファイルが相対パスで指定されている場合に対応していますが、サイトの構成によっては調整が必要な場合もありますので、ご注意ください。

取得した結果

例えば、このような色が抽出されました。

Extracted colors: {'#999', '#004a59', '#faaca8', '#444', '#c76681', '#31cdcf', '#67a671', '#da902e', '#ccc', '#f8f8f8', '#fdfaf4', '#b5cf68', '#515151', '#34e2e4', '#4e90b9', '#0bf', '#4721fb', '#eaeaea', '#fff', '#787b7b', '#00d084', '#eee130', '#74d5b5', '#eee', '#dad0ec', '#e8cba7', '#e7f5fe', '#f2f2f2', '#fbf5ec', '#edd1d9', '#9dae3e', '#f3f4f5', '#fcf0ef', '#0693e3', '#cbcecf', '#88a8db', '#330968', '#313131', '#ab1dfe', '#e9fbe5', '#f3f6f7', '#f0f0f0', '#fafae1', '#333', '#fdd79a', '#000', '#707070', '#e1e7c4', '#949494', '#2874fc', '#fdfbee', '#020381', '#ddd', '#eb4d4d', '#f25c5c'}

2. 取得カラーコードを一覧で表示するVBA

取得出来た色コードだけだと、全くわからないですよね。という事で、わかりやすい形にします。今回は、PowerPointで作成してみました。

Sub CreateColorBoxes()
    Dim shape As shape
    Dim i As Long
    Dim colors As Variant
    Dim startX As Long, startY As Long
    
    colors = Array("#fcf0ef", "#c76681", "#ddd", "#313131", "#949494", "#999", "#330968", "#eaeaea", "#e1e7c4", "#fbf5ec", "#e8cba7", "#fff", "#787b7b", "#cbcecf", "#fdd79a", "#34e2e4", "#74d5b5", "#4721fb", "#515151", "#da902e", "#eee130", "#9dae3e", "#000", "#f3f4f5", "#333", "#fafae1", "#e7f5fe", "#00d084", "#31cdcf", "#2874fc", "#020381", "#f8f8f8", "#eb4d4d", "#dad0ec", "#fdfbee", "#4e90b9", "#0bf", "#0693e3", "#ccc", "#edd1d9", "#88a8db", "#b5cf68", "#fdfaf4", "#e9fbe5", "#004a59", "#f2f2f2", "#444", "#faaca8", "#f3f6f7", "#707070", "#f25c5c", "#f0f0f0", "#eee", "#ab1dfe", "#67a671")

    For i = LBound(colors) To UBound(colors) - 1
        For j = i + 1 To UBound(colors)
            If colors(i) > colors(j) Then
                temp = colors(i)
                colors(i) = colors(j)
                colors(j) = temp
            End If
        Next j
    Next i

    startX = 10
    startY = 10

    With ActivePresentation.Slides(1)
        For i = LBound(colors) To UBound(colors)
            j = i Mod 10
            Set shape = .Shapes.AddShape(msoShapeRectangle, startX + j * 90, startY + Int(i / 10) * 80, 70, 40)
            shape.Fill.ForeColor.RGB = RGB(Val("&H" & Mid(colors(i), 2, 2)), Val("&H" & Mid(colors(i), 4, 2)), Val("&H" & Mid(colors(i), 6, 2)))

            ' Add a text box for the color code
            Set TextShape = .Shapes.AddTextbox(msoTextOrientationHorizontal, startX + j * 90, startY + Int(i / 10) * 80 + 40, 70, 20)
            TextShape.TextFrame.TextRange.Text = colors(i)
            TextShape.TextFrame.TextRange.Font.Size = 8 ' Adjust font size as needed
            TextShape.TextFrame.TextRange.Font.Bold = True
        Next i
    End With
End Sub

上記を実行すると、以下のような状態となります。若干ソート順がうまくいってませんが、まあ良いでしょう。気になる方はコードを修正してください。