온라인 색상 선택 도구
색상환에서 색을 고르고, 채도 캔버스에서 세밀하게 조정한 다음, 프로젝트가 사용하는 모든 형식으로 결과를 확인하세요 — #RRGGBB부터 oklch()까지. 이 색상 선택 도구는 다른 도구들이 놓치는 부분까지 다룹니다: 화가용 RYB 휠을 포함한 세 가지 휠 형태, 팔레트를 자동으로 만들어주는 색상 조화 오버레이, 알파 채널, 그리고 팔레트 전체를 CSS 변수·SCSS·JSON으로 한 번에 내보내는 기능까지 — 모두 브라우저에서 로컬로 계산됩니다.
세 가지 휠, 하나가 아닙니다
휠 모드 선택기는 휠 자체의 기하학적 구조를 바꿉니다:
- HSV와 HSL은 디지털 휠로, RGB 화면이 빛을 혼합하는 방식대로 색조가 배치됩니다. 두 방식은 정사각형 캔버스가 작동하는 방식이 다릅니다: HSV는 가장 밝은 모서리가 순수한 색조이고, HSL은 순수한 색조를 밝기 50%에 두고 그 위에 흰색을 배치합니다.
- **RYB (화가용)**은 화가들이 배워온 방식대로 색조를 배치합니다 — 빨강, 노랑, 파랑을 원색으로 하고 그 사이에 주황, 초록, 보라를 둡니다. 이 방식의 실용적 가치는 색상 조화에서 드러납니다 — RYB 휠에서 빨강의 보색은 초록이고 파랑의 보색은 주황으로, 전통적인 안료 배합과 같습니다. 반면 디지털 휠은 빨강을 시안과 짝짓습니다. 일반적인 색상 선택 도구의 “보색” 팔레트가 눈으로 보기에 이상하게 느껴진 적이 있다면 바로 이 때문입니다.
팔레트를 대신 만들어주는 색상 조화
색상 조화 아래에서 규칙을 선택하면 휠이 어울리는 색을 표시하며, 이는 바로 사용할 수 있는 팔레트로 나타납니다:
- 보색 — 정반대 색 하나. 가장 강한 대비를 주므로, 주요 브랜드 색에 대비되는 단일 강조색으로 사용하세요.
- 분할 보색 — 보색의 양쪽 이웃 두 색. 대비는 거의 그대로 유지하면서 균형을 맞추기 훨씬 쉽습니다.
- 삼각(트라이애딕) — 균등한 간격의 세 색조. 생동감 있으면서도 안정적입니다. 하나를 주역으로 삼고 나머지 둘은 절제해서 사용하세요.
- 사각(테트라딕) — 네 가지 색조. 일러스트나 데이터 시각화에 어울리는 풍부한 조합이지만 UI 작업에서는 균형을 맞추기 어렵습니다.
- 유사색 — 바로 이웃한 색들. 긴장감이 낮아 배경이나 그라데이션에 적합합니다.
- 단색(모노크로매틱) — 밝기만 단계적으로 바꾼 한 가지 색조. 호버, 활성, 비활성 같은 인터페이스 상태에 가장 안전한 선택입니다.
팔레트 패널은 원하는 형식으로 전체 세트를 한 번에 복사합니다: 순수한 HEX, RGB, HSL, OKLCH, 바로 붙여넣을 수 있는 CSS 커스텀 속성(--color-1: …), SCSS 변수, 코드에 전달하기 좋은 JSON까지 선택할 수 있습니다.
무엇이든 붙여넣고, 모든 것을 확인하세요
입력 필드는 거의 모든 색상 표기를 그대로 받아들입니다: #f80, #ff8800, 알파가 포함된 8자리 HEX, rgb() / rgba(), hsl(), hwb(), lch(), oklch(), oklab(), cmyk(), 0xFF8800, 또는 rebeccapurple 같은 CSS 색상 이름까지. 무엇을 입력하든 HEX, RGB, HSL, HSV, LCH, OKLCH, CMYK의 일곱 가지 값이 서로 동기화되어 반환되며, 각각 고유한 복사 버튼이 딸려 있습니다.
미리보기 아래의 두 헬퍼 칩은 색상의 이름을 알려줍니다: 가장 가까운 CSS 색상 이름(빠른 프로토타이핑이나 색을 설명할 때 유용)과 가장 가까운 Tailwind 토큰(예: orange-500)으로, 매번 새 값을 만들지 않고 디자인 시스템 안에 머무를 수 있습니다.
미리보기 아래의 불투명도(알파) 슬라이더를 움직이면 출력값이 투명도를 포함한 형태로 바뀝니다 — #RRGGBBAA, rgba(), hsla() — 미리보기는 체크무늬 배경 위에 표시되어 투명도를 눈으로 판단할 수 있습니다.
어떤 형식을 써야 할까요?
| 형식 | 전체 이름 | 언제 사용해야 할까요? |
|---|---|---|
| HEX | Hexadecimal | 웹의 기본값. 간결하고 어디서나 지원되며 복사하기 쉽습니다. 8자리를 쓰면 알파가 추가됩니다. |
| RGB | Red, Green, Blue | 화면이 생각하는 방식. 0–255 범위의 세 가지 빛 채널로, 대부분의 API와 캔버스 코드가 기대하는 형식입니다. |
| HSL | Hue, Saturation, Lightness | 사람이 직접 편집하기 좋은 방식. “조금 더 밝게”나 “덜 채도 있게”가 숫자 하나만 바꾸면 됩니다. |
| HSV | Hue, Saturation, Value | 그래픽 소프트웨어. 포토샵과 GIMP의 색상 선택 도구 뒤에 있는 모델입니다. |
| LCH | Lightness, Chroma, Hue | 지각적으로 균일한 방식. 숫자가 같은 폭으로 바뀌면 눈에도 같은 폭으로 보입니다 — HSL이 흉내만 내던 특성입니다. |
| OKLCH | OK Lightness, Chroma, Hue | 현대적인 CSS의 선택. LCH의 파란색 계열 색조 왜곡을 해결했고, 모든 최신 브라우저에서 지원되며 디자인 토큰 시스템에 이상적입니다. |
| CMYK | Cyan, Magenta, Yellow, Key | 인쇄를 위한 방향성. 인쇄 디자이너와 소통할 때 쓰는 근사 변환값이며, 최종 값은 항상 인쇄소의 컬러 프로파일에서 결정됩니다. |
시간을 아껴주는 작은 기능들
- 기록은 저절로 유지됩니다. 최근 사용한 24가지 색상이 페이지를 새로고침해도 남아 있습니다 — 브라우저의 로컬 스토리지에만 저장되며 어디로도 업로드되지 않습니다.
- 스포이드. EyeDropper API를 지원하는 브라우저(Chrome, Edge)에서는 브라우저 창 밖을 포함해 화면 어디서든 색을 추출할 수 있습니다.
- 키보드 조작. 휠과 채도 캔버스는 화살표 키로 픽셀 단위의 정밀한 조정에 반응합니다.
- 사전 설정은 빠르게 시작하고 싶을 때 자주 쓰는 기본 색상들을 제공합니다.
자주 묻는 질문 (FAQ)
oklch()를 실제 서비스의 CSS에 써도 안전한가요?
네. Chrome, Edge, Firefox, Safari의 모든 최신 버전이oklch()를 지원하며, 디자인 토큰을 위한 선호 표기법으로 자리 잡았습니다(Tailwind CSS 4는 전체 팔레트를 이 방식으로 정의합니다). 아주 오래된 브라우저를 위해서는 바로 앞 줄에 HEX 대체값을 넣어두면 되며, 이 도구는 두 값을 모두 제공합니다.