마음에 드는 사진이나 디자인에서 특정 색상의 코드를 알고 싶을 때가 있습니다. 이미지에서 색상을 추출하는 여러 방법을 소개합니다.
브라우저 개발자 도구
Chrome DevTools의 Elements 패널에서 색상 값을 클릭하면 스포이드 도구가 나옵니다. 화면의 아무 곳이나 클릭해서 색상을 추출할 수 있습니다.
이미지 편집 도구
포토샵, GIMP, Figma 등에서 스포이드(Eyedropper) 도구로 클릭하면 색상 값이 표시됩니다. 추출한 값을 색상 변환기에 입력해 다른 형식으로 변환하세요.
온라인 도구
이미지를 업로드하면 주요 색상을 추출해주는 웹 서비스들이 있습니다. Adobe Color, Coolors 등에서 색상 팔레트를 자동 생성할 수 있습니다.
주의사항
이미지 압축이나 디스플레이 색상 프로파일에 따라 추출 값이 원본과 다를 수 있습니다. 정확도가 중요하면 원본 파일에서 추출하세요.
시맨틱 토큰 확장
config에 커스텀 색상을 추가할 때 의미 기반 이름을 함께 정의하세요. primary: colors.blue[500], success: colors.green[500]처럼 매핑하면 나중에 색상 체계를 바꾸기 쉽습니다. 색상 변환기로 정확한 값을 확인하세요.
다크모드 색상
dark 변형을 설정해서 다크모드용 색상을 별도로 정의할 수 있습니다. dark:bg-gray-800처럼 사용하면 자동으로 다크모드에서 적용됩니다. 색상 팔레트를 정의할 때 라이트/다크 모두 고려하세요.
실용적인 팁
색상 작업을 할 때 자주 쓰는 값들은 메모장이나 노션에 정리해두세요. 매번 검색하는 시간을 아낄 수 있습니다. 색상 변환기를 북마크해두면 필요할 때 바로 접속할 수 있습니다.