컬러 팔레트 추출 가이드
디자인 레퍼런스에서 정확한 색상을 뽑아내고 브랜드 컬러를 구성하는 방법입니다.
1. 이미지 메인 색상 추출 알고리즘이란?
플로우링크의 컬러 추출기는 이미지를 서버로 전송하지 않고, 사용자의 브라우저 내에서 HTML5 Canvas API를 통해 이미지의 픽셀 데이터를 분석합니다. 수백만 개의 픽셀을 양자화(Quantization) 기법으로 그룹화하여, 가장 비중이 높고 시각적으로 돋보이는 6가지 핵심 색상의 HEX 코드를 즉시 계산해 냅니다.
2. HEX 코드 복사 및 활용
추출된 색상 블록을 클릭하면 클립보드에 `#RRGGBB` 형태의 HEX 코드가 자동으로 복사됩니다. 이 코드는 Tailwind CSS 설정 파일(`tailwind.config.js`), Figma, CSS 변수(Variables) 등에 바로 붙여넣어 사용할 수 있습니다.
// Tailwind CSS 적용 예시
theme: {
colors: {
brand: '#4F46E5', // 추출된 코드 붙여넣기
}
}
theme: {
colors: {
brand: '#4F46E5', // 추출된 코드 붙여넣기
}
}