· Blog · 1 min read
사이트 색상 팔레트
현재 사이트에서 사용 중인 색상과 나머지 팔레트 정리
사용 중인 색상
| HEX | 미리보기 | 사용 |
|---|---|---|
#2C2A24 | 다크모드 페이지 배경 (--aw-color-bg-page) | |
#E8E3D8 | 제목 텍스트 (--aw-color-text-heading), 라이트모드 배경 | |
#C8C0B0 | 본문 텍스트 (--aw-color-text-default) | |
#A89070 | 프라이머리 버튼 배경, 링크 (--aw-color-primary) | |
#7A8A7A | 프라이머리 버튼 호버 (--aw-color-secondary) | |
#D4603A | 강조 텍스트, 드래그 선택, GitHub 잔디 (--aw-color-accent) | |
#2C2A24e6 | 스크롤 시 헤더 배경 (불투명도 90%) |
나머지 팔레트
| HEX | 미리보기 | 추천 |
|---|---|---|
#3A3830 | 카드, 코드블록 배경 등 배경 보조층에 활용 | |
#4A4A5A | 툴팁, 뱃지, 태그 등 보조 UI 요소 강조색 |
CSS 변수 전체
.dark {
--aw-color-primary: #A89070; /* 프라이머리 버튼 */
--aw-color-secondary: #7A8A7A; /* 호버 버튼 */
--aw-color-accent: #D4603A; /* 강조, 선택, 잔디 */
--aw-color-text-heading: #E8E3D8; /* 제목 */
--aw-color-text-default: #C8C0B0; /* 본문 */
--aw-color-text-muted: rgb(200 192 176 / 66%); /* 보조 텍스트 */
--aw-color-bg-page: #2C2A24; /* 배경 */
}