컬러를 CSS 변수로 전환기 일련의 색상을 CSS 사용자 정의 속성(변수)으로 변환합니다.

🎨

컬러를 CSS 변수로

일련의 색상을 CSS 사용자 정의 속성(변수)으로 변환합니다.

색상 추가

컬러 피커를 사용하여 커스텀 변수 이름으로 색상을 추가합니다.

형식 선택

출력 형식을 선택하세요: HEX, RGB 또는 HSL.

CSS 복사

생성된 :root CSS 커스텀 속성 블록을 복사합니다.

Loading tool...

What Is 컬러를 CSS 변수로?

컬러를 CSS 변수로 변환하는 생성기는 이름이 지정된 컬러의 모음에서 CSS 사용자 정의 속성(:root 변수)으로 변환하여 스타일시트에 붙여넣을 수 있습니다.任意の 수의 색상을 추가하고, 각 색상에 의미 있는 변수 이름(예: "primary", "secondary", "accent")을 지정할 수 있으며, 출력 형식을 선택할 수 있습니다. HEX는 단순성, RGB 쉼표로 구분된 형식은 rgba() 유연성을 위해, HSL 쉼표로 구분된 형식은 런타임 조작을 쉽게 하기 위한 것입니다. CSS 사용자 정의 속성은 현대적인 테마 시스템의 기초이며, 다크 모드, 브랜드 테마 및 동적 색상 업데이트를 가능하게 합니다. 이 도구는 빠르게 색상 시스템을 설정할 수 있는 :root { --변수: 값; } 블록의 보일러 플레이트 코드를 생성합니다. 실시간 미리보기에서는 모든 색상을 함께 팔레트 스트립으로 표시합니다.

Why Use 컬러를 CSS 변수로?

커스텀 변수 이름으로 무제한의 색상을 추가할 수 있습니다
세 가지 출력 형식: HEX, RGB 또는 HSL
깨끗한 :root { } CSS 블록 생성
실시간 팔레트 스트립 미리보기
CSS 테마 시스템을 위한 기초

Common Use Cases

CSS 테마

라이트/다크 모드 테마를 위한 CSS 커스텀 속성을 설정합니다.

디자인 토큰

디자인 시스템 토큰을 CSS 변수로 변환합니다.

브랜드 색상

재사용 가능한 CSS 변수 세트를 브랜드 색상으로 생성합니다.

컴포넌트 라이브러리

CSS 컴포넌트 라이브러리를 위한 커스텀 色 변수를 정의합니다.

Technical Guide

CSS 사용자 정의 속성(var(--name))은 전역 범위를 위한 :root 선택기에 의해 정의됩니다. HEX 형식은 전체 색상 값을 저장합니다: --primary: #3B82F6. RGB 쉼표로 구분된 형식은 채널을 저장합니다: --primary: 59, 130, 246, 이는 rgb(var(--primary)) 또는 rgba(var(--primary), 0.5)와 같은 유연한 불투명도에 사용할 수 있습니다. HSL 형식은 다음과 같이 저장됩니다: --primary: 217, 91%, 60%, hsl(var(--primary))로 사용할 수 있습니다. RGB 및 HSL 형식은 변수를 재정의하지 않고도 사용 지점에서 불투명도를 추가할 수 있으므로 더 유연합니다. CSS 사용자 정의 속성은 모든 자식 요소에 의해 상속되며, 테마 전환을 위한 미디어 쿼리 또는 클래스 선택기에서 재정의될 수 있습니다. 또한 모든 현대적인 브라우저에서 지원되며 일반 CSS 속성과 같은 캐스케이드 방식을 따릅니다.

Tips & Best Practices

1
유연성을 위해 --primary, --secondary와 같은 의미 있는 이름을 사용하세요. --blue, --red 대신에
2
RGB 형식은 가장 유연합니다: rgba(var(--primary), 0.5)로 불투명도를 제어할 수 있습니다
3
HSL 형식으로는 색상 변형을 파생할 수 있습니다: hsl(var(--primary-h), var(--primary-s), 90%)
4
다크 모드를 위한 변수를 미디어 쿼리에서 재정의하세요: @media (prefers-color-scheme: dark) { :root { ... } }
5
변수 개수를 관리 가능하게 유지하세요. 대부분의 시스템은 5-10개의 색상 변수가 필요합니다

Related Tools

HEX를 RGB로 변환기

라이브 미리보기 스와치와 함께 즉시 HEX 색상 코드를 RGB 값으로 변환합니다.

🎨 Color Tools

HEX를 HSL로 변환하기

HEX 색상 코드를 HSL(색조, 채도, 밝기) 값으로 변환합니다.

🎨 Color Tools

색상 선택기

HEX, RGB, HSL, CMYK 출력을 지원하는 상호작용 색상 선택기입니다.

🎨 Color Tools

테일윈드 색상 찾기

任意의 HEX 코드에 가장 가까운 테일윈드 CSS 색상 클래스를 찾아보세요.

🎨 Color Tools

CSS 필터 생성기

블러, 밝기, 대조 度 등과 같은 CSS 필터 효과를 시각적 제어로 적용합니다.

🎨 CSS & Design

Frequently Asked Questions

Q 어떤 형식을 선택해야 합니까?

단순성과 가독성을 위해 HEX를 사용하세요. 불투명도 제어가 필요한 경우 RGB를 사용하고, 색상 변형을 파생하려면 HSL을 사용하세요.

Q 모든 브라우저에서 CSS 커스텀 속성이 지원되나요?

예, 2016년 이후 모든 모던 브라우저(Chrome 49+, Firefox 31+, Safari 9.1+, Edge 15+)에서 지원됩니다. IE11에서는 지원되지 않습니다.

Q 다크 모드를 위한 변수를 사용할 수 있나요?

绝対적으로. 라이트 모드 값을 :root에 정의하고, @media (prefers-color-scheme: dark) { :root { ... } } 또는 .dark 클래스에서 재정의하세요.

About This Tool

컬러를 CSS 변수로 is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.