카메라로 선택한 색상을 웹사이트 CSS 변수로 변환하는 방법

디자이너들이 실제 세계에서 색상을 가져오는 이유

최고의 색상 팔레트는 대부분 화면에서 태어나지 않습니다. 패션 브랜드의 정체성을 정의하는 원단, 여행 중 촬영한 벽면이 여행 사이트의 메인 컬러가 되는 경우, 또는 클라이언트의 물리적 제품을 디지털에서 충실히 재현해야 하는 상황. 물리적 소재는 합성 스워치가 재현하기 어려운 감성적 진정성을 담고 있습니다.

항상 어려웠던 것은 번역 과정이었습니다. 색상은 보이는데, 코드가 필요합니다.

CSS 변수 기초

CSS 커스텀 프로퍼티(CSS 변수)는 값을 한 번 정의하고 어디서든 재사용할 수 있게 해줍니다. :root에 선언하면 페이지의 모든 요소가 상속받을 수 있습니다:

:root {
  --color-brand-500: hsl(220, 60%, 45%);
}

한 곳에서 값을 변경하면 이를 사용하는 모든 컴포넌트에 변경사항이 반영됩니다.

단계별 진행: 카메라에서 CSS 변수까지

Color Picker Camera: HEX RGB를 열고, 라이브 카메라를 벽, 포장지, 인쇄 카탈로그 등 원하는 소재에 향한 후 탭하여 색상을 고정합니다. 앱은 즉시 HEX, RGB, HSL 값을 표시합니다. HSL 값을 한 번의 탭으로 복사하세요.

스타일시트에 직접 붙여넣고, 명도만 조정하여 완전한 색상 스케일을 생성합니다:

:root {
  --color-brand-900: hsl(220, 60%, 20%);
  --color-brand-500: hsl(220, 60%, 45%);
  --color-brand-100: hsl(220, 60%, 90%);
}

디자인 토큰과 Figma 연동

Color Picker Camera: HEX RGB에서 저장한 팔레트를 JSON 파일로 내보낼 수 있습니다. 이 형식은 Figma의 Tokens 플러그인과 Style Dictionary 같은 도구들이 기본으로 처리하는 방식과 동일합니다. 또한 색상 하모니 기능이 색상 선택 즉시 보색, 트라이어드, 유사색 변형을 제안하므로 노트북을 열기 전에 완전한 팔레트를 구축할 수 있습니다.

카메라 촬영, JSON 내보내기, CSS 변수라는 전체 워크플로우로 물리적 세계와 스타일시트 사이의 거리를 단 몇 분으로 줄일 수 있습니다.

iOS 또는 Android에서 Color Picker Camera: HEX RGB 앱을 무료로 다운로드하세요 — 광고도, 추적도 없으며 완전히 오프라인으로 작동합니다.