색상 추출 도구로 디자인 워크플로 만들기

색상 가이드 · ← 목록으로

"이 색 마음에 드는데 코드를 모르겠다"는 순간은 작업 중 수없이 찾아옵니다. 색을 눈대중으로 맞추면 시간도 오래 걸리고 결과도 부정확합니다. 색상 추출 도구를 워크플로에 끼워 넣으면, 영감을 받은 색을 정확한 값으로 바꿔 곧장 작업에 반영할 수 있습니다. 아래 흐름을 따라 해 보세요.

1. 영감이 되는 색을 찾는다

좋아하는 웹사이트, 앱 스크린샷, 사진, 일러스트 등 어디서든 마음에 드는 색을 포착하세요. 출발점은 거창할 필요가 없습니다. 단 한 가지 핵심 색이면 팔레트 전체를 키워 나갈 수 있습니다.

2. 정확한 코드로 추출한다

Chrome·Edge 사용자는 색상 추출 도구의 "화면에서 추출" 버튼으로 화면 어디든 클릭해 색을 뽑을 수 있습니다. 다른 브라우저나 모바일이라면 이미지를 업로드한 뒤 사진 위를 클릭하면 됩니다. 추출 즉시 HEX·RGB·HSL 세 형식이 함께 표시되므로 작업 환경에 맞는 형식을 골라 복사하세요. 형식의 차이가 헷갈린다면 색상 코드 가이드를 참고하세요.

3. 명도 단계로 펼친다

추출한 색은 도구에서 색조 팔레트로 밝기 단계별로 자동 확장됩니다. 버튼 기본·hover·비활성 상태나, 배경·카드·경계선처럼 같은 색조의 여러 톤이 필요할 때 이 단계들을 그대로 가져다 쓰면 됩니다. 직접 명도를 계산할 필요가 없습니다.

4. 어울리는 색을 더한다

기준색이 정해졌다면 색상환 관계로 보조색·강조색을 더합니다. 유사색은 차분하게, 보색은 강조에 좋습니다. 배색 규칙은 색상 조화 이론에 정리해 두었습니다. 이렇게 모은 색을 팔레트 구성법에 따라 역할별로 정리하세요.

5. 코드에 적용하고 검증한다

복사한 코드를 CSS 변수나 디자인 툴의 컬러 스타일로 등록해 한 곳에서 관리하면 일관성이 유지됩니다. 마지막으로 텍스트와 배경 조합이 충분히 읽히는지 색상 대비 기준으로 점검하면 워크플로가 완성됩니다.

이렇게 쓰면 좋은 사람들

• 웹 개발자 — 시안·레퍼런스의 색을 코드로 즉시 옮겨 구현 속도를 높입니다.
• UI/UX 디자이너 — 화면에 보이는 실제 색을 정확히 추출해 시안과 결과물의 차이를 줄입니다.
• 콘텐츠 크리에이터 — 썸네일·브랜드 컬러를 일관되게 맞춰 통일감을 유지합니다.

실전 예제 — 카페 브랜드 랜딩 페이지 리디자인 케이스 스터디

실제로 위 워크플로를 어떻게 이어 쓰는지, 카페 브랜드의 랜딩 페이지를 새로 디자인하는 상황을 예로 처음부터 끝까지 따라가 보겠습니다.

1. 레퍼런스 수집

   마음에 드는 카페 인테리어 사진을 찾다가, 짙은 시멘트 벽 색이 브랜드의 차분하고 아늑한 느낌과 잘 맞는다고 판단합니다.

2. 색 추출

   사진을 색상 추출 도구에 업로드하고 벽 부분을 클릭하면 #4A3728(rgb(74, 55, 40), hsl(22°, 30%, 22%))이 추출됩니다. 이 짙은 브라운을 기본색으로 확정합니다.

3. 명도 단계 확장

   도구의 색조 팔레트 기능으로 같은 색조(22°)의 밝기 단계를 자동으로 얻어, 배경·카드·경계선에 쓸 옅은 톤부터 진한 텍스트용 톤까지 확보합니다.

4. 배색 규칙 적용

   보색 공식대로 22 + 180 = 202도를 계산해 하늘색 계열 hsl(202, 30%, 60%)을 찾고, 이 색을 예약 버튼의 강조색으로 채택합니다. 짙은 브라운 배경 위에서 시원한 하늘색 버튼이 또렷하게 도드라집니다.

5. CSS 변수로 등록

   :root { --brand-900: #4A3728; --brand-accent: hsl(202, 30%, 60%); }처럼 코드에 등록해 두면, 이후 어떤 컴포넌트를 만들어도 같은 색 변수만 참조하면 되므로 색이 흐트러지지 않습니다.

6. 대비 검증

   마지막으로 강조 버튼의 배경(hsl(202, 30%, 60%))과 버튼 안 흰 텍스트의 명암비를 WCAG 기준으로 확인해, 4.5:1을 넘는지 점검하고 부족하면 명도를 낮춰 조정합니다.

이 여섯 단계를 거치면 "사진 한 장에서 받은 영감"이 실제로 배포 가능한 색 시스템으로 완성됩니다.

자주 묻는 질문

레퍼런스 사진에서 딱 어느 픽셀을 클릭해야 할지 모르겠어요.

정답은 없습니다. 같은 사진이라도 클릭하는 위치에 따라 미묘하게 다른 색이 나오므로, 2~3곳을 추출해 보고 가장 마음에 드는 값을 고르는 것을 추천합니다.

추출한 색을 CSS 변수로 만들 때 이름은 어떻게 짓는 게 좋나요?

--blue처럼 색 이름을 그대로 쓰기보다, --brand-900, --accent처럼 역할이나 명도 단계를 담은 이름을 쓰면 나중에 색을 바꿔도 변수명을 다시 지을 필요가 없습니다.

디자인 툴(Figma 등)과 코드 사이에서 색이 미묘하게 다르게 보여요.

대부분 색공간 차이나 반올림 때문입니다. 추출 도구가 보여주는 HEX 값을 그대로 복사해 두 곳에 동일하게 입력하면 이런 오차를 줄일 수 있습니다.

워크플로를 팀 전체가 함께 쓰려면 무엇을 더 준비해야 하나요?

완성한 CSS 변수와 각 색의 용도를 짧은 문서로 정리해 공유하세요. 팔레트 구성법에서 다룬 기본·보조·강조·중립 역할 구분을 그대로 문서 항목으로 쓰면 협업이 수월해집니다.

관련 글

• HEX·RGB·HSL 색상 코드 완벽 가이드
• 색상 조화 이론 — 보색·유사색·삼각 배색
• 브랜드 컬러 팔레트 만드는 법