📦

CSS 색상 변수 생성기 무료 온라인 — Custom Properties 코드 자동 생성

색상 팔레트를 입력하면 CSS 변수, SCSS 변수, Tailwind 설정 코드를 즉시 생성합니다.

색상 팔레트 입력

변수 이름과 색상을 입력하세요. 순서대로 CSS 변수가 생성됩니다.

팔레트 미리보기

생성된 코드

💡 색상 밝기 변형이 필요하다면 Tints & Shades 생성기를 활용하세요.

자주 묻는 질문

CSS Custom Properties(사용자 지정 속성)는 --color-primary: #8B5CF6; 처럼 CSS 파일에서 변수를 정의하고 var(--color-primary)로 재사용하는 기능입니다. 디자인 시스템 구축에 필수적입니다.

생성된 Tailwind 코드를 tailwind.config.js의 theme.extend.colors에 붙여넣으면 됩니다. 이후 text-primary, bg-primary 등의 클래스로 사용할 수 있습니다.

네, CSS 변수 탭에서 rgba 형식도 함께 생성됩니다. 투명도 적용 시 유용하게 활용할 수 있습니다.