1
이미지3단계보통
이미지에서 브랜드 색상 추출 + 접근성 검증
사진·로고에서 색상 뽑아 → HEX/Tailwind 확인 → WCAG 명암비 검사.
이 레시피 시작하기(워크스페이스 캔버스는 데스크톱·태블릿 가로 모드에서 동작합니다)
이 레시피의 자동 실행은 데스크톱에서 가능합니다. 모바일에서는 아래 단계별 도구 카드에서 개별 도구를 사용할 수 있습니다.
단계 (3개)
디자인 시안이나 레퍼런스 이미지에서 마음에 드는 색을 추출해, 브랜드 토큰으로 사용할 수 있는지 즉시 검증하는 흐름입니다. 이미지 컬러 피커로 한 점을 클릭해 색을 뽑고, 색상 변환기에서 HEX·RGB·HSL과 Tailwind 11단계 쉐이드(50~950)를 확인한 뒤, 명암비 검사기로 WCAG AA·AAA 통과 여부까지 한 번에 판정합니다.
광고 배너·랜딩페이지·다크모드 디자인을 만들 때 "브랜드 색을 그대로 쓸 수 있나, 약간 조정해야 하나"를 즉석에서 결정할 수 있습니다.
이런 상황에서 활용하세요
- 경쟁사·레퍼런스 사이트의 색을 뽑아 비슷한 톤의 브랜드 색으로 시안 작업할 때
- 사진에서 추출한 메인 컬러를 다크모드 배경에 올렸을 때 글자 가독성을 점검할 때
- Figma 시안의 색을 Tailwind 토큰으로 옮기면서 접근성까지 한 번에 확인할 때
- 로고 이미지의 브랜드 색이 흰 배경·검은 배경에서 모두 통과되는지 검증할 때