ToolDeck의 색상 도구를 사용하면 색상 형식 간 변환, 접근성 대비 비율 확인, 팔레트 생성, CSS 그래디언트 빌드, 색상 이름 또는 Tailwind 클래스 조회를 브라우저에서 직접 수행할 수 있습니다. 색상 변환기는 HEX, RGB, HSL, HSV를 양방향으로 처리합니다. 대비 검사기는 WCAG 2.1 AA 및 AAA 준수 여부를 테스트합니다. 팔레트 생성기는 임의의 기본 색상에서 보색, 유사색, 삼색, 사색 배색을 만듭니다. CSS 그래디언트 생성기는 바로 붙여 넣을 수 있는 선형 및 방사형 그래디언트 코드를 출력합니다. 색상 이름 찾기는 임의의 값을 가장 가까운 CSS 명명 색상에 매핑하고, Tailwind 색상 찾기는 임의의 색상을 Tailwind 유틸리티 클래스에 매핑합니다. 모든 도구는 클라이언트 측에서 실행되며 서버로 데이터가 전송되지 않습니다.
색상 도구란 무엇인가요?
색상 도구는 개발자와 디자이너가 디지털 색상 값을 다루는 데 도움을 주는 유틸리티입니다. 화면에 표시되는 모든 색상은 숫자로 저장됩니다. RGB(빨강, 초록, 파랑)의 세 채널, CSS 단축 표기를 위한 16진수 트리플릿, 또는 HSL의 각도 기반 색조에 채도와 명도가 조합된 형태입니다. 이러한 표현 방식 간의 변환을 수동으로 수행하면 느리고 오류가 발생하기 쉽습니다. 특히 알파 투명도나 OKLCH 같은 최신 모델도 고려해야 할 경우에는 더욱 그렇습니다.
형식 변환 외에도 색상 작업에는 접근성 테스트, 팔레트 생성, 그래디언트 제작이 포함됩니다. WCAG 2.1은 최소 대비 비율(AA 기준 일반 텍스트 4.5:1, AAA 기준 7:1)을 정의하고 있으며, 이를 육안으로 확인하기는 어렵습니다. 조화로운 배색 생성은 HSL 색상 휠에서의 정밀한 각도 계산이 필요합니다. CSS 그래디언트는 방향, 색상 중지점, 폴백 값에 맞는 정확한 구문이 필요합니다. 수십 개의 토큰을 가진 디자인 시스템 전체에서 이 작업을 수동으로 수행하면 금방 번거로워집니다.
색상 도구는 이러한 작업을 자동화합니다. 특정 형식의 색상을 입력받아 계산을 수행하고, 변환된 값이든 접근성 판정 결과든 조화로운 색상 견본 세트든 CSS 코드 조각이든 필요한 결과를 반환합니다. 도구가 브라우저에서 실행되므로 민감한 디자인 토큰을 제3자 서비스에 업로드하지 않아도 됩니다.
ToolDeck에서 색상 도구를 사용하는 이유
ToolDeck의 색상 도구는 완전히 브라우저에서 실행됩니다. 어떤 색상 값도 기기를 벗어나지 않고, 계정이 필요하지 않으며, 확장 프로그램이나 데스크톱 소프트웨어 설치 없이 모든 도구가 즉시 로드됩니다.
🎨한 단계로 형식 변환
HEX 코드를 붙여 넣으면 RGB, HSL, HSV 값을 동시에 얻을 수 있습니다. 여러 변환기를 연결하거나 변환 공식을 기억할 필요가 없습니다.
🔒디자인 토큰 비공개 유지
모든 처리는 클라이언트 측에서 이루어집니다. 브랜드 색상, 미공개 팔레트 결정, 내부 디자인 시스템 값이 기기에 남아 있습니다.
♿즉각적인 접근성 테스트
전경/배경 쌍이 일반 텍스트와 큰 텍스트 모두에 대해 WCAG 2.1 AA 및 AAA 기준을 충족하는지 확인하세요. 단순 합격/불합격 레이블이 아닌 정확한 대비 비율을 얻을 수 있습니다.
⚡프로덕션 즉시 사용 가능한 출력 복사
모든 도구는 CSS, Tailwind 설정, 또는 디자인 도구 입력 필드에 직접 붙여 넣을 수 있는 값을 출력합니다. 재포맷이 필요하지 않습니다.
색상 도구 사용 사례
ToolDeck의 색상 도구가 시간을 절약해 주는 여섯 가지 일반적인 시나리오를 소개합니다.
디자인 시스템 유지 관리
디자인 시스템을 업데이트할 때 디자이너로부터 HEX 형식의 색상을 받지만 CSS 사용자 정의 속성에는 HSL이 필요한 경우가 많습니다.
색상 변환기는 형식 간 변환을 수행하여 수동 계산 없이 토큰 파일을 채울 수 있게 해줍니다.
접근성 감사
WCAG 준수 감사 중에는 모든 텍스트/배경 조합이 최소 대비 비율을 충족해야 합니다.
색상 대비 검사기는 일반 텍스트와 큰 텍스트 크기 모두에 대한 정확한 비율과 AA/AAA 합격 여부를 보여줍니다.
브랜드 팔레트 탐색
단일 브랜드 색상에서 시작하여 강조색과 중립 변형이 필요한 경우,
색상 팔레트 생성기는 팔레트를 확정하기 전에 옵션을 평가할 수 있도록 보색, 유사색, 삼색, 사색 조화를 계산합니다.
CSS 배경 스타일링
그래디언트가 있는 히어로 섹션이나 카드 배경을 만들 때 각도, 색상 중지점, 벤더 접두사에 맞는 정확한 CSS 구문이 필요합니다.
CSS 그래디언트 생성기를 사용하면 시각적으로 그래디언트를 빌드하고 코드를 복사할 수 있습니다.
Tailwind 마이그레이션
프로젝트를 Tailwind CSS로 마이그레이션할 때 기존 HEX 또는 RGB 값을 가장 가까운 Tailwind 유틸리티 클래스에 매핑해야 합니다.
Tailwind 색상 찾기는 가장 가까운 일치 항목을 찾고 근사값이 적합한지 판단할 수 있도록 색상 차이를 보여줍니다.
코드 리뷰 및 문서화
코드 리뷰 중에 #708090 같은 HEX 값만으로는 한눈에 알 수 없습니다.
색상 이름 찾기는 이를 SlateGray로 식별하여 리뷰와 문서를 더 읽기 쉽게 만들어 줍니다.
CSS 색상 모델 참조
CSS는 여러 색상 모델을 지원합니다. 아래 표는 가장 일반적인 여섯 가지 형식, 구문 및 일반적인 사용 사례를 요약합니다. 이 모든 형식은 ToolDeck의 색상 변환기에서 지원됩니다.
| 모델 | CSS 구문 | 채널 | 값 범위 | 일반적인 사용 |
|---|
| HEX | #rrggbb | 빨강, 초록, 파랑 | 채널당 00–ff | CSS, 디자인 핸드오프, 브랜드 가이드라인에서 가장 일반적 |
| RGB | rgb(r, g, b) | 빨강, 초록, 파랑 | 채널당 0–255 | JavaScript 캔버스 API, 계산된 스타일, 이미지 처리 |
| HSL | hsl(h, s%, l%) | 색조, 채도, 명도 | 0–360 / 0–100% / 0–100% | 디자인 토큰, 테마 생성, 프로그래밍 방식 음영 변형 |
| HSV | N/A (CSS 미지원) | 색조, 채도, 명도(Value) | 0–360 / 0–100% / 0–100% | 색상 선택기(Photoshop, Figma), 하드웨어 색상 보정 |
| OKLCH | oklch(L C H) | 명도, 채도(Chroma), 색조 | 0–1 / 0–0.4 / 0–360 | 지각적으로 균일한 팔레트 (CSS Color Level 4 사양) |
| Named | 예: slategray | 내부적으로 RGB에 매핑 | 사전 정의된 이름 148개 | 프로토타입 제작, 가독성 높은 코드, 빠른 시연 |
CSS Color Level 4 (W3C)는 lab(), lch(), color() 함수도 정의합니다. HEX와 RGB는 브라우저와 디자인 도구 전반에서 가장 널리 지원됩니다.
올바른 색상 도구 선택 방법
각 색상 도구는 서로 다른 문제를 해결합니다. 아래 가이드를 사용하여 작업에 맞는 도구를 찾으세요.
- 1
다음이 필요한 경우 HEX, RGB, HSL 또는 HSV 형식 간 색상 변환 → 색상 변환기 - 2
다음이 필요한 경우 텍스트/배경 색상 쌍이 WCAG 접근성 기준을 충족하는지 확인 → 색상 대비 검사기 - 3
다음이 필요한 경우 단일 기본 색상에서 조화로운 색상 세트 생성 → 색상 팔레트 생성기 - 4
다음이 필요한 경우 선형 또는 방사형 CSS 그래디언트를 빌드하고 코드 얻기 → CSS 그래디언트 생성기 - 5
다음이 필요한 경우 특정 색상 값에 가장 가까운 사람이 읽을 수 있는 CSS 이름 찾기 → 색상 이름 찾기 - 6
다음이 필요한 경우 임의의 색상을 가장 가까운 Tailwind CSS 유틸리티 클래스에 매핑 → Tailwind 색상 찾기
여섯 가지 도구 모두 여러 형식으로 입력을 받습니다. 색상이 어떤 형식인지 확실하지 않다면 HEX, RGB, HSL, HSV 표기를 자동 감지하는 색상 변환기로 시작하세요.
자주 묻는 질문
HEX와 RGB 색상 형식의 차이점은 무엇인가요?
HEX와 RGB는 동일한 색상 공간을 나타냅니다. #ff6600 같은 HEX 코드는 세 RGB 채널의 16진수 인코딩입니다. ff = 255(빨강), 66 = 102(초록), 00 = 0(파랑). 유일한 차이점은 표기 방식입니다. HEX는 CSS 스타일시트에서 더 간결하고, RGB는 각 채널이 이미 10진수 정수이므로 프로그래밍 방식으로 조작하기 더 쉽습니다.
HEX나 RGB 대신 HSL을 언제 사용해야 하나요?
HSL은 색조(색상 자체)를 채도와 명도로부터 분리합니다. 이를 통해 음영 변형을 만들기가 더 쉬워집니다. 색조는 고정하고 명도를 낮추면 더 어두운 음영, 높이면 더 밝은 색조를 만들 수 있습니다. 단일 기본 색상에서 라이트/다크 테마를 생성하는 디자인 시스템은 이 이유로 HSL에 토큰을 저장하는 경우가 많습니다. CSS 사용자 정의 속성도 개별 채널을 재정의할 수 있어 HSL과 잘 결합됩니다.
WCAG 2.1이 텍스트에 요구하는 대비 비율은 얼마인가요?
WCAG 2.1 Level AA는 일반 텍스트(18pt 미만 또는 14pt 굵게 미만)에 최소 4.5:1, 큰 텍스트(18pt 이상 또는 14pt 굵게 이상)에 3:1의 최소 대비 비율을 요구합니다. Level AAA는 해당 기준을 각각 7:1과 4.5:1로 높입니다. 이 비율은 WCAG 2.1 성공 기준 1.4.3에 정의된 공식을 사용하여 전경색과 배경색의 상대적 밝기로 계산됩니다.
CSS는 몇 개의 명명 색상을 지원하나요?
CSS는 SVG 1.1과 CSS3 색상 사양에서 상속된 148개의 명명 색상을 정의합니다. 이는 red, blue, white 같은 일반적인 이름부터 MediumSlateBlue, PapayaWhip, LavenderBlush 같은 구체적인 이름까지 다양합니다. 명명 색상은 고정된 RGB 값에 매핑됩니다. CSS Color Level 4 사양은 동일한 148개 이름을 유지하며 새로운 이름을 추가하지 않습니다. 브라우저는 키워드 transparent(rgba(0,0,0,0)에 해당)도 인식합니다.
지금 CSS에서 OKLCH 색상을 사용할 수 있나요?
예. oklch() 함수는 Chrome 111+, Firefox 113+, Safari 15.4+에서 지원됩니다. OKLCH는 W3C가 발표한 CSS Color Level 4 사양의 일부입니다. HSL에 비한 주요 장점은 지각적 균일성입니다. OKLCH에서 동일한 밝기 값을 가진 두 색상은 실제로 인간의 눈에 동일하게 밝게 보이는데, 이는 HSL에서는 해당하지 않습니다. 따라서 OKLCH는 일관된 지각 밝기를 가진 접근 가능한 팔레트를 생성하는 데 더 나은 선택입니다.
HSL과 HSV의 차이점은 무엇인가요?
HSL과 HSV 모두 색조를 각도로 하는 원통형 표현을 사용하지만 밝기를 다르게 정의합니다. HSL에서는 명도 50%가 순수한 색상이고, 0%는 검정, 100%는 흰색입니다. HSV에서는 명도(Value) 100%가 순수한 색상이고, 0%는 검정입니다. HSV는 채도를 낮추지 않고 흰색에 도달하는 내장된 방법이 없습니다. 디자이너와 색상 선택기(Photoshop, Figma)는 일반적으로 HSV를 사용하고, CSS는 기본적으로 HSL을 사용합니다.
임의의 HEX 색상에 대한 Tailwind 클래스를 어떻게 찾나요?
Tailwind CSS는 약 220개의 색상 클래스(22개 색조 각각 10개 음영, 그리고 black, white, transparent)로 구성된 고정 팔레트를 제공합니다. 특정 HEX 값에 가장 가까운 클래스를 찾으려면 지각적 색상 공간(예: CIELAB 또는 OKLCH)에서 해당 색상과 모든 Tailwind 견본 간의 유클리드 거리를 계산합니다. ToolDeck의 Tailwind 색상 찾기는 이 작업을 자동으로 수행하고 근사값이 충분히 좋은지 판단할 수 있도록 색상 차이와 함께 가장 가까운 일치 항목을 보여줍니다.
기밀 브랜드 색상을 온라인 도구에 붙여 넣어도 안전한가요?
도구에 따라 다릅니다. 입력을 서버로 전송하는 모든 도구는 네트워크 트래픽과 서버 로그에서 해당 값을 노출합니다. ToolDeck의 색상 도구는 클라이언트 측 JavaScript를 사용하여 완전히 브라우저에서 실행됩니다. 어떤 HTTP 요청도 색상 데이터를 백엔드로 전달하지 않습니다. 도구를 사용하는 동안 브라우저의 네트워크 탭을 열어 이를 확인할 수 있습니다. 최대한 주의하려면 초기 페이지 로드 후 도구를 오프라인에서도 사용할 수 있습니다.