본문으로 건너뛰기
patrache.tools

색상 선택기

HEX·RGB·HSL·OKLCH 4개 형식 색상 선택·변환·복사. 팔레트 저장. 무료.

HEX#2563EB
RGB
HSL
OKLCH
R
G
B
팔레트
lock파일이 서버로 전송되지 않습니다
공유
임베드

내 사이트에 이 도구 임베드하기

색상 선택기는 HEX·RGB·HSL·OKLCH 4개 형식으로 색상을 선택·변환·복사합니다. 팔레트 저장 기능 포함. 디자이너와 개발자를 위한 무료 온라인 도구. 색상 선택기는 웹 디자인·브랜딩·UI 작업에서 색상을 정확하게 다룰 때 도움이 됩니다.

색상 선택기 어떻게 사용하나요?

  1. 색상 피커에서 원하는 색상을 선택합니다.
  2. HEX, RGB, HSL 값을 복사합니다.
  3. 팔레트에 색상을 추가하여 관리할 수 있습니다.

색상 선택기 자주 묻는 질문

색상 코드를 직접 입력할 수 있나요?

네, HEX 코드를 직접 입력하여 정확한 색상을 선택할 수 있습니다.

HEX, RGB, HSL은 어떻게 다르고 언제 써야 하나요?

세 표기법 모두 같은 색을 다른 방식으로 적을 뿐입니다. HEX는 #FF5733처럼 짧아 디자인 파일과 CSS에 옮겨 적기 좋고, RGB는 빨강·초록·파랑 값을 직접 다루므로 코드에서 색을 계산할 때 편합니다. HSL은 색상·채도·밝기로 나뉘어 있어 '같은 색인데 조금 더 어둡게' 같은 변형을 만들 때 가장 직관적입니다.

화면에서 고른 색이 인쇄하면 다르게 나오는 이유는 무엇인가요?

화면은 빛을 더해 색을 만드는 RGB 방식이고, 인쇄는 잉크를 겹쳐 빛을 빼는 CMYK 방식이라 표현할 수 있는 색의 범위가 다릅니다. 특히 형광에 가까운 초록·주황·하늘색은 잉크로 재현되지 않아 눈에 띄게 탁해집니다. 인쇄물이 목적이라면 채도가 아주 높은 색은 피하고, 인쇄소에 CMYK 값이나 팬톤 번호로 전달하세요.

화면의 아무 지점이나 스포이드로 집어낼 수 있나요?

크롬·엣지 등 크로미움 계열 데스크톱 브라우저에서는 브라우저에 내장된 EyeDropper 기능으로 다른 창의 색까지 집을 수 있습니다. 사파리와 파이어폭스, 모바일 브라우저는 아직 이 기능을 지원하지 않으므로 스포이드 버튼이 보이지 않습니다. 그 경우 화면을 캡처해 이미지로 올린 뒤 색을 추출하면 같은 결과를 얻을 수 있습니다.

색상 선택기 잘 활용하는 방법은?

  • 웹 개발 시 HEX 코드를 직접 입력하면 브랜드 가이드라인에 맞는 정확한 색상을 빠르게 찾을 수 있습니다.
  • HSL 모드는 색조(Hue)를 기준으로 유사색이나 보색을 쉽게 찾을 수 있어 배색 작업에 유용합니다.
  • 팔레트에 색상을 추가해두면 프로젝트 전체에서 일관된 색상을 유지할 수 있습니다.

Powered by Patrache Studio Tools

광고 차단을 해제해 주세요

이 도구를 이용하려면 이 사이트의 광고 차단을 해제해 주세요. 광고 수익으로 무료 서비스를 운영합니다.

광고 차단기 아이콘을 눌러 이 사이트의 차단을 끈 뒤 다시 확인해 주세요.