기준 색을 넣으면 색상환에서 각도를 돌려 만든 배색 여섯 벌을 보여줘요. 색을 누르면 HEX 가 복사되고, 세트째로 CSS 변수로도 복사할 수 있어요.
배색은 HSL 의 색상각만 돌리고 채도·명도는 기준 색을 그대로 따라가요. 그래서 파스텔 색을 넣으면 파스텔 배색이, 진한 색을 넣으면 진한 배색이 나와요.
각 색 위의 숫자는 그 배경과 글자색의 WCAG 대비비예요. 본문 글자는 4.5:1 이상, 큰 제목은 3:1 이상이면 접근성 기준을 만족해요.
이미지의 모든 픽셀을 세어 «가장 많은 색» 을 고르면 결과가 이상해요. 사진에는 미묘하게 다른 색이 수만 개 있어서, 사람 눈에 같은 색도 서로 다른 값으로 세지거든요.
그래서 비슷한 색을 묶는 군집화를 해요. 색 공간에서 가까운 픽셀들을 한 무리로 보고 대표색을 뽑는 방식이에요.
이때 어느 색 공간에서 «가깝다» 를 재는지가 결과를 바꿔요. RGB 에서의 거리는 사람이 느끼는 차이와 잘 안 맞아요 — 초록 영역에서는 큰 차이가 작게, 파랑 영역에서는 작은 차이가 크게 계산돼요.
주조색(dominant) — 가장 넓은 면적. 배경이나 전체 인상을 만들어요.
보조색 — 두 번째로 넓은 영역. 주조색을 받쳐요.
강조색(accent) — 면적은 작지만 눈에 띄는 색. 버튼이나 링크에 쓰기 좋아요.
흔한 배분이 60:30:10 이에요 — 주조 60%, 보조 30%, 강조 10%. 인테리어와 그래픽 디자인에서 오래 쓰인 경험칙이에요.
⚠️ 면적이 넓은 색이 항상 좋은 주조색은 아니에요. 사진의 하늘이나 배경벽이 뽑히는 경우가 많은데, 그게 그 이미지의 «인상» 은 아닐 수 있어요.
사진에서 뽑은 색은 채도가 높거나 명도가 극단적인 경우가 많아요. UI 에 그대로 쓰면 눈이 피로해요.
대비를 확인하세요. 배경과 글자색의 WCAG 대비비가 일반 텍스트 4.5:1, 큰 텍스트 3:1 이상이어야 읽혀요. `/color` 에서 확인할 수 있어요.
명도 단계를 만드세요. 하나의 색에서 밝기만 바꾼 5~11단계를 만들면 그림자·테두리·호버 상태에 쓸 수 있어요. OKLCH 색 공간에서 명도(L)만 조절하면 색상이 흔들리지 않아요.
색맹을 고려하세요. 남성의 약 8% 가 적록색맹이에요. 빨강과 초록만으로 정보를 구분하면 그 사람들에게는 같은 색이에요. 명도 차이나 모양·라벨을 함께 쓰세요.
빨강 — 서구에서는 위험·정지, 중화권에서는 행운·번영, 한국 증시에서는 상승(미국은 하락).
흰색 — 서구에서는 순수·결혼, 동아시아 전통에서는 상복.
초록 — 자연·안전이 일반적이지만 이슬람권에서는 종교적 의미가 강해요.
국제 서비스를 만든다면 색만으로 의미를 전달하지 마세요. 특히 금융·의료 서비스의 상승/하락, 정상/경고는 색과 함께 아이콘이나 문구를 두는 게 안전해요.
브랜딩 — 로고나 제품 사진에서 브랜드 색을 추출해 웹사이트에 맞출 때.
프레젠테이션 — 표지 이미지에서 색을 뽑아 슬라이드 전체 색을 통일하면 완성도가 올라가요.
데이터 시각화 — 사진의 분위기를 차트 색으로 옮길 때. 다만 범주형 데이터는 구분이 잘 되는 색이 우선이라 사진 팔레트가 항상 맞지는 않아요.
참고용 무드보드 — 마음에 드는 이미지들에서 색을 뽑아 모으면 취향의 공통점이 보여요.
색 추출은 브라우저의 Canvas 로 처리돼요. 이미지가 서버로 전송되지 않아요.
공개 전인 디자인 시안이나 제품 사진을 다룰 때 실제로 중요한 차이예요.
큰 이미지는 축소해서 분석해요 — 전체 픽셀을 다 세면 느려지는데, 색 분포는 축소해도 거의 유지되거든요.
색상환에서 180° 반대편 색이에요. 대비가 가장 세서 강조에 좋지만 넓은 면에 같이 쓰면 눈이 피로해요 — 주색 대비 10~20% 면적으로 쓰는 게 무난해요.
넓은 배경·카드에는 유사색이나 단색조가 안전하고, 버튼·배지처럼 눈에 띄어야 하는 요소엔 보색이나 분할 보색이 맞아요.
`--triadic-1: #3366CC;` 처럼 세트 이름과 순번이 붙은 커스텀 프로퍼티 목록이에요. 그대로 `:root` 안에 붙여넣으면 돼요.
아니요. 변환과 배색 계산이 모두 브라우저 안에서 끝나요.