색을 고르고, 코드를 복사하고, 하던 일을 계속하세요
색상 선택기, 그라데이션 생성기, 이미지 스포이드를 한 페이지에 담았습니다. 계정도 설치도 기다림도 없이 색을 골라 HEX, RGB, HSL, HSV로 복사하세요.
색상 코드
#0F37FFrgb(15, 55, 255)hsl(230°, 100%, 52.94%)hsv(230°, 94.12%, 100%)cmyk(94.12%, 78.43%, 0%, 0%)xyz(19.61, 10.05, 95.5)lab(37.93, 62.96, -98.45)lch(37.93, 116.86, 302.6°)트렌드 색상
트렌드 색상 전체 보기무엇이 들어 있나
스포이드
업로드한 이미지에서, 그리고 브라우저가 지원하는 경우 화면의 어디에서든 색을 뽑습니다. 파일을 페이지에 놓고 픽셀을 클릭하면 됩니다.
형식 변환
HEX, RGB, HSL, HSV, CMYK, XYZ, LAB, LCH 사이를 즉시 전환하고 어떤 값이든 CSS나 디자인 도구로 바로 복사할 수 있습니다.
그라데이션 생성기
막대 위에서 정지점을 추가하고 옮기며 선형과 방사형을 전환하고 각도와 불투명도를 맞춘 뒤 완성된 CSS를 복사합니다.
색상 기록
만든 색과 그라데이션이 브라우저에 남아 나중에 다시 보거나 다른 프로젝트에서 재사용할 수 있습니다.
조화와 변형
모든 색상 페이지에 틴트, 셰이드와 여섯 가지 조화 규칙이 있고 어느 것이든 한 번에 그라데이션으로 바꿉니다.
무료이며 사생활을 지킵니다
유료 장벽도 없고 무엇을 골랐는지 추적하지도 않습니다. 올린 이미지는 브라우저 안에서 읽히고 어디로도 전송되지 않습니다.
누구를 위한 도구인가
- 디자이너와 제품 팀
- 화면이나 브랜드 팔레트를 잡고 조합을 살펴보며 그라데이션의 정확한 CSS를 복사할 때.
- 일러스트와 회화
- 사진과 그림에서 스포이드로 색을 뽑고 부드러운 명암 흐름을 계획할 때.
- 프런트엔드 개발
- 프로젝트 전반에서 일관된 색 값을 만들고 기존 디자인에서 값을 읽어올 때.
- 접근성을 점검할 때
- 같은 색을 여러 모델에서 비교하고 명암비가 필요한 기준을 넘을 때까지 조정할 때.
사용 방법
- 1
색을 고르세요
채도 영역의 아무 곳이나 클릭한 뒤 색상과 투명도 슬라이더로 다듬으세요. HEX, RGB, HSV가 함께 갱신됩니다.
- 2
이미지에서 뽑으세요
이미지를 페이지에 끌어다 놓거나 파일을 고른 뒤 원하는 픽셀을 클릭하면 코드가 바로 나타납니다.
- 3
그라데이션을 만드세요
막대를 클릭해 정지점을 추가하고 원하는 위치로 끄세요. 선형과 방사형을 전환하고 각도를 정합니다.
- 4
복사해서 쓰세요
값이나 CSS 선언 전체를 복사하세요. 고른 것은 모두 자동으로 기록에 저장됩니다.
자주 묻는 질문
거치적거리지 않는 작은 도구
처음에는 내부용 도구였습니다. 무거운 디자인 프로그램을 켜지 않고도 색을 집어 조정하고 바로 다음 일로 넘어가고 싶었습니다. 일부러 한 페이지로, 일부러 가볍게 만들었고 앞으로도 무료입니다.
브라우저 확장 프로그램
방문한 페이지에서 바로 색을 뽑고 싶다면, Chrome과 Edge 확장 프로그램이 도구 모음에 스포이드 버튼을 추가하고 자체 기록을 남기며 이 도구를 한 번에 엽니다.