색상 선택기이란?
시각적으로 원하는 색상을 골라 hex, RGB, HSL 값을 확인하세요. 클릭하거나 드래그해서 원하는 톤을 찾고 코드를 복사하면 됩니다.
채도·명도 사각형 안에서 드래그해 톤을 바꾸고 색상 막대를 움직여 색 계열을 바꿉니다. hex, RGB, HSL 값이 동시에 나타나며 클릭 한 번으로 복사할 수 있습니다. 입력란에 hex를 입력하면 사각형이 곧장 그 좌표로 이동하므로, 이미 정해진 브랜드 컬러를 미세 조정할 때 무작위 색에서 시작할 필요가 없습니다.
사용 방법
- 색상 영역을 클릭하거나 셀렉터를 드래그하여 원하는 색상을 찾으세요
- 색조 슬라이더와 투명도 컨트롤로 미세 조정하세요
- hex, RGB 또는 HSL 값을 클릭 한 번으로 복사하세요
사용 시기
- 웹사이트 CSS에 쓸 강조 색상을 디자인 프로그램 없이 바로 정할 때.
- 브랜드 가이드의 hex 값을 디자인 시스템용 HSL로 변환할 때.
- 색상 슬라이더를 조금씩 옮겨 가까운 색만 모은 작은 팔레트를 만들 때.
결과
따뜻한 주황색 선택: #E67E22, rgb(230, 126, 34), hsl(28, 80%, 52%).
자주 묻는 질문
- HSL과 HSB(HSV)의 차이는 무엇인가요?
- HSL은 명도 50%에서 가장 순수한 색이 되고, 거기서 검정과 흰색 양쪽으로 대칭으로 변합니다. 밝기/어둡기를 대칭적으로 다룰 때 편합니다. Photoshop의 HSB는 명도 100%에서 가장 순수한 색이 되어 물감을 섞는 감각에 가깝습니다.
- 화면의 색과 인쇄물의 색이 왜 다르게 보이나요?
- 화면은 빛이 더해지는 RGB, 인쇄는 잉크가 빠지는 CMYK를 씁니다. 특히 강렬한 초록과 형광 파랑은 CMYK에 정확히 대응되는 색이 없습니다. 최종 확정 전에는 반드시 실제 매체에서 교정쇄로 확인하세요.
- hex 값이 기본적으로 WCAG를 통과하나요?
- 아니요. 접근성은 색상 한 쌍의 대비로 결정되므로 색 하나만으로는 판단할 수 없습니다. 전경과 배경의 hex를 짝지어 대비 비율을 측정하세요. 본문 4.5:1 이상, 큰 글자 3:1 이상이 권장됩니다.
- 화면 위에 있는 색을 어떻게 따올 수 있나요?
- 화면에서 추출을 누르면 스포이트로 화면 어디의 픽셀이든 바로 집어낼 수 있어요. 정확한 hex가 곧장 피커에 들어오니 채도·명도·투명도를 이어서 다듬으면 됩니다. (스포이트 버튼은 지원되는 환경에서만 나타나요. 지원하지 않으면 운영체제의 색상 측정기(macOS 디지털 컬러 측정기, Windows PowerToys, Chrome DevTools)로 hex를 읽어 입력란에 붙여 넣으세요.)
- 이 피커는 투명도를 지원하나요?
- 지원합니다. 색상 막대 아래의 불투명도 슬라이더로 알파를 0~100% 사이에서 자유롭게 조절할 수 있어요. 미리보기 색 뒤에는 체크 무늬가 깔려 투명도를 한눈에 확인할 수 있고, 알파가 100% 미만으로 떨어지면 RGB와 HSL 복사 버튼이 자동으로 rgba()와 hsla() 형식으로 바뀝니다.