-
html color에 사용할 rgb 색상표 만들기코딩 연습/코딩배우기 2024. 9. 8. 11:58반응형
html 코딩 시 color의 색상 코드를 입력할 때 참고할 수 있는 rgb 색상표를 Matplotlib 라이브러리 파이썬 코드로 쉽게 만들 수 있어서 올려봅니다.
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.html0.08MBhtml을 실행했을 때 다음과 같이 됩니다.
반응형'코딩 연습 > 코딩배우기' 카테고리의 다른 글
블로그 글 복사 - 네이버 블로그 텍스트 추출 (0) 2024.11.24 티스토리 글쓰기 - 파이썬 selenium 자동 등록 코드 (0) 2024.11.21 블로그스팟 포스팅 URL 글 목록 전체 가져오기 (0) 2024.08.25 파이썬 워드클라우드 설치, konlpy Okt() 사용 (0) 2024.02.14 파이썬 도서관리 프로그램 (0) 2024.01.03