색을 고르거나 HEX를 입력하고 스포이트로 화면 색을 집어 HEX·RGB·HSL·CMYK로 복사.
도구 개요 & 핵심 목적
색상 선택 창이나 HEX 코드 입력, 스포이트(지원 브라우저)로 색을 정하면 HEX·RGB·HSL·CMYK 값을 한 번에 보여 주고 눌러서 바로 복사하는 컬러 피커입니다.
단계별 올바른 사용 순서 및 절차
1STEP 1
색상 견본을 눌러 브라우저 색상 선택 창에서 색을 고르거나, HEX 코드(#3B82F6 또는 3자리 #38F)를 직접 입력합니다.
2STEP 2
화면에 보이는 색을 그대로 가져오려면 [화면 색상 추출] 단추로 스포이트를 엽니다(크롬·엣지 등 EyeDropper를 지원하는 브라우저).
3STEP 3
HEX, RGB, HSL, CMYK 네 줄 중 필요한 값을 눌러 복사합니다.
4STEP 4
자주 쓰는 색은 저장해 두고 계산 기록에서 다시 불러옵니다.
실무 및 일상에서의 상세 활용 사례
3 가지 대표 시나리오시나리오 #1
디자인 시안의 색을 CSS 코드로 옮기기
시안 이미지를 화면에 띄워 두고 스포이트로 버튼 색을 집으면 `#3B82F6` 같은 HEX와 `rgb(59, 130, 246)`, `hsl(217, 91%, 60%)`가 함께 나와 CSS에 그대로 붙여 넣을 수 있습니다.
밝기만 조절하려면 HSL의 마지막 값(명도)을 바꿔 쓰면 편합니다.시나리오 #2
인쇄물 CMYK ↔ 웹용 RGB 상호 변환
웹용 HEX `#FF5733` 코드를 넣으면 인쇄용 CMYK 근사값 `cmyk(0%, 66%, 80%, 0%)`가 나옵니다.
단순 공식으로 바꾼 근사값이라 실제 인쇄 색은 인쇄소의 색 프로필에 따라 달라질 수 있습니다.시나리오 #3
브랜드 색 기록해 두기
회사 로고의 HEX를 넣고 저장해 두면 다음에 열었을 때 기록에서 바로 불러와 RGB·HSL로 다시 꺼낼 수 있습니다.
저장 기록은 이 브라우저에만 남습니다.색공간과 변환 기준
HEX → RGB(16진수 두 자리씩), RGB → HSL(최댓값·최솟값으로 색상·채도·명도), RGB → CMYK(K = 1 − max(R,G,B), C·M·Y = (1 − 값 − K) / (1 − K))전문가 활용 팁 및 주의사항
HSL 모델은 Hue(색상 0~360°), Saturation(채도 %), Lightness(명도 %)로 이루어져 테마 어둡기/밝기 조절에 가장 직관적입니다.스포이트는 브라우저의 EyeDropper 기능을 쓰므로 사파리·파이어폭스에서는 열리지 않을 수 있습니다. 그때는 HEX를 직접 입력하세요.
자주 묻는 질문 (FAQ)
출처 및 참고자료
W3C - CSS Color Module Level 4 표준MDN Web Docs - CSS <color> 값 레퍼런스적용 기준: sRGB(IEC 61966-2-1) 기준 HEX·RGB·HSL 표기와 단순 CMYK 변환식 · 2026-11-02 확인