글로벌 툴 허브
현재 언어: Korean

CSS 변수 생성기

색상 토큰을 만들고 변수별 미리보기를 확인한 뒤, 바로 사용할 CSS 커스텀 속성을 복사하세요.

사용 방법

  1. brand, theme, ui 같은 변수 접두어를 입력하세요.
  2. 각 변수 이름과 색상을 수정하세요.
  3. 필요하면 행을 추가해 변수를 더 만드세요.
  4. 생성된 CSS를 복사해 스타일시트에 붙여넣으세요.

색상 미리보기

--brand-primary

--brand-secondary

--brand-accent

생성된 CSS 변수

:root {
  --brand-primary: #4f46e5;
  --brand-secondary: #06b6d4;
  --brand-accent: #f59e0b;
}

CSS 변수로 색상 체계를 더 깔끔하게 관리하세요

이 도구로 :root 색상 토큰을 빠르게 만들고, 반복 값을 줄여 스타일 수정과 유지보수를 쉽게 할 수 있습니다.

이 도구가 유용한 경우

  • 같은 색상 값을 여러 CSS 파일에 반복해서 쓰고 있을 때.
  • 검색/치환 없이 전체 색상을 안전하게 바꾸고 싶을 때.
  • 작은 웹사이트용 기본 토큰 세트를 빠르게 만들고 싶을 때.

빠른 사용 순서

  1. brand 또는 theme 같은 접두어를 정합니다.
  2. 변수 이름을 역할 중심으로 쓰고 HEX 값을 넣습니다.
  3. 생성된 :root 코드를 복사합니다.
  4. 스타일시트에 붙여넣고 반복된 하드코딩 색상을 교체합니다.

자주 하는 실수

  • 색상 이름만 기준으로 변수명을 짓고 역할을 반영하지 않는 것.
  • 파일마다 접두어 규칙이 다른 것.
  • 같은 요소에 변수와 하드코딩 값을 섞어 쓰는 것.

관련 CSS 변수 가이드

유지보수하기 쉬운 CSS 변수 워크플로를 짧은 가이드로 확인해 보세요.