팔레트를 CSS 변수로
4가지 색상
색상 미리보기
#1E293B
#0EA5E9
#10B981
#F43F5E
CSS 변수
:root {
--color-1: #1E293B;
--color-2: #0EA5E9;
--color-3: #10B981;
--color-4: #F43F5E;
}관련 외부 사이트
일부 링크는 제휴 링크입니다.
관련 도구
배색 생성기기준 HEX에서 보색·유사색·트라이어드 등 조화로운 컬러 팔레트를 자동 생성. 색상을 잠그고 나머지를 재생성하며 CSS 변수·Tailwind·JSON으로 내보내기.그라데이션 생성기여러 색상 정지점으로 선형·방사형·원뿔형 CSS 그라데이션을 만드세요. 각도·형태·중심을 조정하고 background CSS 또는 Tailwind 값을 원클릭으로 복사.이미지 색상 추출기이미지를 업로드하지 않고 브라우저에서 주요 색상 팔레트를 추출합니다. 각 색상의 HEX, RGB와 비율(%)을 확인하고 CSS/JSON으로 내보내세요.폰트 조합 도구엄선한 Google Fonts 제목×본문 조합을 실시간으로 미리보고 CSS를 한 번에 복사하세요.
팔레트(또는 hex 색상 코드가 포함된 텍스트)를 붙여넣으면 색상을 추출해 CSS 사용자 정의 속성, SCSS 변수 또는 Tailwind 색상 설정으로 작성합니다. 중복은 제거되고 각 색상에는 번호가 붙은 이름이 부여됩니다. 모든 처리는 브라우저에서 이루어집니다.
사용 방법
- hex 색상(또는 그것을 포함한 텍스트)을 상자에 붙여넣습니다.
- 이름 접두사를 설정하고 CSS, SCSS 또는 Tailwind 출력을 선택합니다.
- 생성된 코드를 스타일시트나 설정 파일에 복사합니다.
작동 원리
도구가 텍스트에서 hex 코드(3자리 또는 6자리, # 유무 무관)를 찾아 대문자 6자리로 정규화하고, 출현 순서를 유지하며 중복을 제거합니다. 각 색상은 접두사를 사용한 번호 변수가 되어 선택한 형식(CSS :root 사용자 정의 속성, SCSS $변수 또는 Tailwind theme.extend.colors 객체)으로 포맷됩니다.
주요 기능
스마트 추출
붙여넣은 텍스트에서 hex 코드를 찾아내고 나머지는 무시합니다.
세 가지 형식
CSS 사용자 정의 속성, SCSS 변수 또는 Tailwind 설정을 출력합니다.
중복 제거
반복된 색상은 합쳐져 각 변수가 고유해집니다.
완전 비공개
색상은 브라우저에서 처리되며 업로드되지 않습니다.
활용 사례
디자인 핸드오프
디자인 툴의 팔레트를 코드 토큰으로 빠르게 변환합니다.
테마 제작
사이트 테마용 CSS 변수 세트를 만듭니다.
Tailwind 프로젝트
브랜드 색상을 Tailwind 설정에 바로 추가합니다.
스타일 가이드
일관된 변수 이름으로 색상 시스템을 문서화합니다.
참고사항
- #RGB와 #RRGGBB 모두 허용되며 정규화됩니다.
- 색상은 처음 나타난 순서를 유지하며 중복은 제거됩니다.
- 의미 있는 이름이 필요하면 붙여넣은 후 변수 이름을 변경하세요.
- 모든 처리는 기기에서 이루어지며 업로드되지 않습니다.
자주 묻는 질문
- 어떤 입력을 받나요?
- hex 코드가 포함된 텍스트라면 무엇이든 — 공백 구분, 쉼표 구분, 스타일시트에서 붙여넣기 모두 가능합니다. 색상이 아닌 텍스트는 무시됩니다.
- 단축 hex도 지원하나요?
- 네. #abc 같은 3자리 hex는 자동으로 #AABBCC로 확장됩니다.
- 변수 이름을 바꿀 수 있나요?
- 접두사로 기본 이름을 지정하면 번호가 자동으로 붙습니다. 의미 있는 이름을 원하면 결과를 편집하세요.
- Tailwind 출력이란 무엇인가요?
- colors를 theme.extend.colors 아래에 배치한 module.exports 설정으로, tailwind.config.js에 바로 병합할 수 있습니다.
- 색상이 업로드되나요?
- 아니요. 모든 처리는 브라우저에서 이루어지며 기기를 벗어나지 않습니다.