html color에 사용할 rgb 색상표 만들기

html 코딩 시 color의 색상 코드를 입력할 때 참고할 수 있는 rgb 색상표를 Matplotlib 라이브러리 파이썬 코드로 쉽게 만들 수 있어서 올려봅니다. 

 

RGB 색상표 코드 확인하기

 

rgb 색상표 만드는 파이썬 코드

색상표 영문 이름, HEX 코드, 그리고 색상을 테이블로 표시되는 html 코드를 생성합니다.

from matplotlib import colors as mcolors


# 시작 테이블 태그
colors_html = '''
<table style="margin: 0 auto; border-collapse: collapse; width: 80%;">
    <tr style="border: 1px solid #ddd;">
        <th style="border: 1px solid #ddd; padding: 8px; text-align: center;">Color Name</th>
        <th style="border: 1px solid #ddd; padding: 8px; text-align: center;">HEX</th>
        <th style="border: 1px solid #ddd; padding: 8px; text-align: center;">Display</th>
    </tr>
'''

for key, hex_value in mcolors.CSS4_COLORS.items():
    print(f"{key:20} : {hex_value}")

    # RGB 값을 얻고 보색 계산
    rgb = mcolors.to_rgb(hex_value)  # hex 값을 RGB로 변환
    comp_rgb = [(1 - c) for c in rgb]  # RGB 보색 계산 (1에서 각 값을 뺌)
    comp_hex = mcolors.to_hex(comp_rgb)  # 다시 HEX 값으로 변환

    # 행마다 배경색 설정 (짝수 행만 색 다르게)
    row_background = "#f2f2f2" if list(mcolors.CSS4_COLORS.keys()).index(key) % 2 == 0 else "white"

    # 보색을 글자색으로, 원래 색을 배경색으로 설정
    colors_html += f'''
    <tr style="background-color:{row_background}; border: 1px solid #ddd;" onmouseover="this.style.backgroundColor='#ddd';" onmouseout="this.style.backgroundColor='{row_background}';">
        <td style="border: 1px solid #ddd; padding: 8px; text-align: center;">{key}</td>
        <td style="border: 1px solid #ddd; padding: 8px; text-align: center;">{hex_value}</td>
        <td style="border: 1px solid #ddd; padding: 8px; text-align: center; background-color:{hex_value};">
            <span style="color:{comp_hex}; font-size: 20px; font-weight: bold;">{key}</span>
        </td>
    </tr>
    '''

colors_html += '</table>'

 

 

위 코드 실행 결과, html 코드는 아래 파일을 참고하고,

 

colors_html.html

0.08MB

 

 

html을 실행했을 때 다음과 같이 됩니다.