Color Picker

색만 고르면 바로 작업 — 번거로움 없음

무거운 앱과 지나치게 복잡한 색상 도구에 지쳐 2025년에 Color Picker를 만들었습니다. 프런트엔드 개발자이자 일러스트레이터로서, 색을 재빨리 집어 살짝 다듬고 곧장 진행할 수 있는 방법이 필요했죠. 내부 도구로 시작해 동료들의 페이보릿이 되었고, 다듬어 모두가 쓰도록 웹에 공개했습니다. 계정도 학습 곡선도 없습니다 — 페이지를 열고 톤을 고른 다음 HEX, RGB, HSL, HSV 코드를 복사하세요.

우리 색상 선택기가 사랑받는 이유

디자인을 보며 ‘정확한 톤을 어떻게 낼까?’ 고민한 적이 있다면, Color Picker의 단순함을 좋아하실 겁니다. 인터페이스는 의도적으로 미니멀하게 유지했습니다:

• 클릭 한 번이면 색 끝 — 팔레트 아무 지점을 탭하면 필요한 값이 즉시 표시됩니다. 사진이나 스크린샷에서 샘플링하고 싶다면 파일을 놓고 스포이드를 사용하세요.
• 그라디언트가 쉬워집니다 — 바에서 스톱을 추가·이동해 실키한 전환을 만드세요. 선형/방사형을 전환하고 각도와 불투명도를 미세 조정한 뒤 CSS를 복사하세요.
• 제한 없음, 비용 없음 — 데스크톱·태블릿·폰의 모든 모던 브라우저에서 작동합니다. 설치할 것도, 요금도 없습니다.
• 필요할 때 확장 프로그램 — 선택형 Chrome·Edge 확장이 스포이드를 브라우저에 바로 연결해, 어떤 페이지에서도 샘플링하고 기록을 유지할 수 있습니다.

무엇에 쓰나요

사람들은 Color Picker를 다양한 방식으로 사용합니다:

• 디자이너와 제품 팀 이 인터페이스나 브랜드 팔레트를 스케치할 때 활용합니다. 조합을 탐색하고 그라디언트에 필요한 CSS를 빠르게 복사할 수 있습니다.
• 일러스트레이터와 아티스트 는 사진과 회화에서 영감을 얻기 위해 스포이드를 사용합니다. 그라디언트 도구는 부드러운 음영과 색 전환 설계에 도움을 줍니다.
• 프런트엔드 개발자 는 프로젝트 전반에서 일관된 색상 값을 생성할 때 의존합니다. 확장 프로그램으로 기존 사이트에서의 샘플링도 쉬워집니다.
• 접근성을 확인하는 모든 분 은 다양한 모델로 색을 확인하고, 대비 기준을 만족할 때까지 불투명도를 조절할 수 있습니다.

시작하기

매뉴얼은 필요 없습니다 — 간단 요약:

• 색 선택 — 팔레트의 아무 곳이나 클릭하세요. 즉시 HEX, RGB, HSV 값이 표시됩니다. 슬라이더로 색상, 채도, 밝기, 불투명도를 미세 조정하세요.
• 이미지에서 샘플 — 이미지 파일을 페이지로 끌어오거나 하나를 선택하세요. 원하는 픽셀을 클릭하면 색상 코드가 나타납니다.
• 그라디언트 만들기 — 그라디언트 바를 클릭해 스톱을 추가하고 드래그로 이동합니다. 선형/방사형을 전환하고 각도와 불투명도를 조절하세요.
• 복사하고 재사용 — 색과 그라디언트는 자동 저장됩니다. 코드나 CSS를 복사해 프로젝트에 붙여넣거나 팀과 공유하세요.