한 줄 요약
GeneratePress의 전역 색상(Global Colors)에 팔레트를 등록해 두면, 테마와 GenerateBlocks 어디서든 같은 이름의 색을 골라 쓸 수 있습니다.
비유로 이해하기
회사에는 브랜드 가이드북이 있습니다. 디자이너, 마케터, 외주 업체 모두 같은 책에 적힌 색 이름을 보고 작업하니 결과물의 색이 통일됩니다. GeneratePress의 전역 색상이 우리 사이트의 브랜드 가이드북입니다.
어디에서 설정하나요?
- 관리자 화면 → 외모 → 사용자 정의하기 → 색상을 열면 맨 위에 전역 색상 동그라미들이 보입니다.
- 동그라미를 눌러 색을 바꾸거나, 새 색을 추가하고 이름(slug)을 붙일 수 있어요. 이름이 곧 변수 이름이 됩니다. 예:
accent→var(--accent) - 여기 등록한 색은 GenerateBlocks의 색상 선택칸에도 그대로 나타납니다.
홈페이지 독립학교의 실제 팔레트
- contrast #132018 (본문 글자) · contrast-2 #52635A (보조 글자) · contrast-3 #08271B (헤더·푸터 배경)
- base #F5F4EA (크림 섹션) · base-2 #FFFDF7 (기본 배경) · base-3 #FFFFFF (카드)
- accent #1F6B47 (버튼) · accent-2 #A8D672 (포인트) · accent-3 #D9F2B4 (밝은 강조)
- 추가 색: forest #123B2A, border #CBD9C9
솔직한 메모: GeneratePress 공식 규칙에서 contrast-3은 “가장 옅은 글자·테두리색”인데, 이 사이트는 contrast-3에 가장 진한 숲색을 넣어 헤더 배경으로 쓰고 있어요. 동작에는 문제가 없지만, 규칙대로라면 숲색은 forest처럼 별도 이름으로 두는 편이 헷갈리지 않습니다. 이렇게 이름과 쓰임이 어긋나지 않게 관리하는 것이 팔레트 운영의 핵심이에요.
직접 실행해 보기
이 사이트의 실제 팔레트를 그대로 옮겨 놓았습니다. 동그라미 아래 이름이 GenerateBlocks에서 보이는 이름이에요. --accent 값을 바꾸면 아래 미니 사이트의 버튼도 함께 바뀝니다.
GenerateBlocks에서는
GenerateBlocks에서 배경색이나 글자색 칸을 누르면 위의 동그라미 팔레트가 나옵니다. 여기서 고르면 블록에는 #코드 대신 var(--accent) 같은 변수가 저장되어, 전역 색상을 바꿀 때 함께 바뀝니다. 실습 삼아 GenerateBlocks로 카드 하나를 만들고, 모든 색을 팔레트에서만 골라 칠해 보세요.
참고: GeneratePress: Global Colors Overview · GeneratePress 3.1: Global Colors · MDN: Using CSS custom properties