🪄 CSS 색상 변수 생성기 | 토큰 선언 바로 복사

토큰 접두사 (비우면 접두사 없음)

다크 모드 적용 방식

토큰 개수

라이트 모드 본문 배경 (명암비 기준)

다크 모드 본문 배경 (명암비 기준)

1번 토큰 이름

1번 라이트 모드 색 (HEX)

1번 다크 모드 색 (HEX)

2번 토큰 이름

2번 라이트 모드 색 (HEX)

2번 다크 모드 색 (HEX)

3번 토큰 이름

3번 라이트 모드 색 (HEX)

3번 다크 모드 색 (HEX)

4번 토큰 이름

4번 라이트 모드 색 (HEX)

4번 다크 모드 색 (HEX)

붙여 쓸 CSS

가진 색을 변수 선언으로 옮기는 도구

색을 정한 뒤 가장 번거로운 일은 그 색을 토큰 이름과 짝지어 라이트와 다크 두 벌의 선언으로 옮기는 작업입니다. 이 생성기는 색을 새로 만들지 않고, 이미 정한 색을 받아 :root 변수 선언과 다크 모드 대응 블록을 한 번에 뽑아 줍니다. 변수 이름은 소문자와 붙임표만 쓰도록 다듬어 오타로 깨지는 선언을 줄입니다.

함께 나오는 명암비는 W3C WCAG 의 상대휘도 정의를 그대로 써서 계산합니다. 채널을 0~1 로 바꾼 뒤 0.04045 를 기준으로 선형화하고 0.2126·0.7152·0.0722 로 가중합한 다음, 밝은 쪽과 어두운 쪽에 0.05 를 더해 나눕니다. 각 토큰 색을 같은 모드의 본문 배경과 비교하며, 일반 텍스트 AA 기준은 4.5:1 입니다. 2026년 10월 기준입니다.

명암비는 글자와 아이콘에 쓸 토큰에서만 뜻이 있습니다. 배경이나 테두리 토큰은 본문 배경과 비슷해 낮게 나오는 것이 정상입니다. 팔레트의 모든 색 쌍을 서로 맞대어 검사하는 일은 이 도구가 하지 않고 명암비 전용 도구가 담당하며, 색 단계를 만드는 기능도 지원하지 않습니다.

자주 묻는 질문

이 도구가 색을 만들어 주나요?

색을 만들지는 않습니다. 이미 정한 색을 토큰 이름과 짝지어 변수 선언으로 옮기는 도구입니다. 색 단계를 만드는 일은 심플우디의 팔레트 생성기가 담당합니다.

미디어쿼리와 속성 선택자 중 어느 쪽을 써야 하나요?

운영체제 설정을 그대로 따르려면 미디어쿼리만으로 충분합니다. 사이트에 직접 테마 전환 버튼을 둘 생각이라면 속성 선택자가 필요하고, 둘을 함께 내보내면 기본은 설정을 따르고 버튼으로 덮어쓸 수 있습니다.

명암비는 왜 함께 보여 주나요?

변수로 묶는 순간 라이트와 다크에서 같은 토큰이 서로 다른 배경 위에 놓입니다. 글자나 아이콘에 쓸 토큰이 한쪽 모드에서만 기준에 못 미치는 일이 잦아 각 모드의 명암비를 함께 적습니다.

🪄CSS 색상 변수(커스텀 프로퍼티) 팔레트 생성기

관련된 도구

다크 모드 색상 전환 가이드

OKLCH 색상 코드 변환기

가진 색을 변수 선언으로 옮기는 도구

자주 묻는 질문

관련된 도구

다크 모드 색상 전환 가이드

OKLCH 색상 코드 변환기

가진 색을 변수 선언으로 옮기는 도구

자주 묻는 질문

같은 카테고리 도구