유틸 도구 · 브라우저 실행
컬러 팔레트 변환기
HEX를 RGB·HSL·Tailwind 임의값으로 바꾸고 8개 테마 팔레트를 비교합니다.Color palette converter
HEX를 RGB·HSL·Tailwind 임의값으로 바꾸고 8개 팔레트를 비교합니다
현재 색상
Slate
Emerald
Amber Accent
Rose
Violet
Monochrome
Pastel
팔레트 색상을 선택하거나 기준 HEX를 바꿔 주세요.
빠른 사용법
세 단계로 확인합니다.
- 1기준 색상이나 팔레트 swatch를 고릅니다
native color input과 8개 테마의 32개 색상 중 작업 기준을 선택합니다.
- 2HEX·RGB·HSL 값을 비교합니다
sRGB 6자리 HEX를 숫자 채널과 HSL 표현으로 변환하고 Tailwind 임의값 표기를 봅니다.
- 3실제 디자인 토큰과 대비를 검수합니다
복사한 색상을 프로젝트 theme과 상태별 대비·dark mode에서 확인합니다.
결과 읽기
팔레트는 색상 목록이 아니라 역할과 대비 관계로 관리해야 합니다.
같은 브랜드 색도 배경·본문·border·상태에 따라 필요한 명도와 대비가 달라지므로 토큰 이름과 사용 문맥을 함께 정해야 합니다.MODELsRGB 변환
HEX를 0~255 RGB로 읽고 HSL hue·saturation·lightness를 계산합니다.
THEME8개 참고 팔레트
브랜드·중립·성공·경고·강조·단색·파스텔 비교용 색을 제공합니다.
TOKEN프로젝트 정본
Tailwind 임의값은 초안이며 실제 theme token·CSS variable·접근성 규칙을 우선합니다.
색상 변환은 브라우저 sRGB 숫자 기준이며 디스플레이 프로파일·인쇄 CMYK·Pantone을 다루지 않습니다. 본문과 UI 상태는 대비 검사 도구로 별도 확인하세요.
이럴 때 유용합니다.
- 브랜드 보조색 비교
- HEX/RGB/HSL 빠른 변환
- Tailwind 임의 색상 초안
함께 확인하세요.
- 인쇄 색상 모델 미지원
- 색상만으로 상태 구분 금지
- 프로젝트 theme token 우선
자주 묻는 질문
사용 전 알아둘 점
3자리 HEX도 입력할 수 있나요?
색상 변환 엔진은 #RGB를 #RRGGBB로 확장하지만 native color input은 6자리 값을 사용합니다.
팔레트가 자동 저장되나요?
아닙니다. 현재 페이지에서만 선택하며 복사한 값을 사용자가 프로젝트에 반영합니다.
접근성을 보장하나요?
아닙니다. 색상 조합의 대비와 색상 외 구분 수단을 별도 검토해야 합니다.