컬러 변환기란 무엇인가요?
컬러 변환기는 하나의 색상 값을 웹 디자인, CSS, 디자인 시스템 및 전달 메모에서 일반적으로 사용되는 형식으로 변환합니다. 하나의 브랜드 색상은 스타일 가이드에서 HEX로, 디자인 토큰에서는 RGB로, 테마 편집기에서는 HSL로, 인쇄 관련 메모에서는 CMYK로 저장될 수 있습니다. 이 도구는 이러한 표현을 함께 유지하여 수동으로 다시 계산하지 않고도 올바른 버전을 복사할 수 있게 합니다.
이 변환기는 의도적으로 간결합니다. 실용적인 sRGB 웹 색상(HEX, RGB, HSL, HSV 및 간단한 CMYK 근사치)에 중점을 둡니다. 전문적인 색상 관리 소프트웨어나 ICC-profile 워크플로를 대체하려는 목적은 아닙니다.
지원되는 색상 형식
| Format | Example | 권장 사용처 |
|---|---|---|
| HEX | #3366FF | CSS, 디자인 토큰, 빠른 시각적 전달 |
| RGB | rgb(51, 102, 255) | CSS 값, 캔버스 작업, 프로그래밍 방식의 색상 채널 |
| HSL | hsl(225, 100%, 60%) | 색상 조정(색상, 채도, 명도)에 적합 |
| HSV | hsv(225, 80%, 100%) | 색상 선택기 스타일의 작업 흐름 및 시각적 조정 |
| CMYK | cmyk(80%, 60%, 0%, 0%) | 최종 인쇄 관리를 위한 값이 아닌 대략적인 인쇄 메모용입니다. |
중요한 제한사항
- CMYK 출력값은 sRGB 값에서 계산되며 단지 근사치입니다.
- CSS 명명 색상, 그래디언트, Lab, LCH, OKLCH 및 Display-P3는 이 간결한 v1 범위에 포함되지 않습니다.
- Alpha 값은 일반적인 HEX/RGB/HSL 형식을 파싱할 수 있지만, 기본 스와치 미리보기는 불투명한 기본 색상을 표시합니다.
- 다른 디자인 도구는 HSL, HSV 또는 CMYK 값을 약간 다르게 반올림할 수 있습니다.
일반적인 작업 흐름
CSS 정리
스타일 가이드에서 HEX 색상을 붙여넣고 구성 요소 상태, 차트 팔레트 또는 테마 변수에 사용할 RGB 또는 HSL을 복사합니다.
디자인 전달
개발자, 디자이너 또는 콘텐츠 편집자가 서로 다른 도구를 사용할 때 여러 색상 표기법을 함께 보관합니다.
토큰 검토
공개 UI에서 사용하기 전에 색상 토큰이 예상한 색상(색상값 및 채도)에 맞는지 확인합니다.
인쇄 메모
대화용으로 대략적인 CMYK 값을 생성하되, 최종 인쇄 결과는 프로파일 인식 도구에 맡깁니다.
자주 묻는 질문
CMYK 출력이 정확한가요?
아니요. CMYK 값은 sRGB에서 단순히 변환한 것으로 대략적인 메모에 유용합니다. 최종 인쇄 작업은 용지, 잉크, 인쇄기 설정 및 ICC 프로필에 따라 달라집니다.
CSS 색상 함수를 붙여넣을 수 있나요?
일반적인 RGB, HSL, HSV 및 CMYK 스타일 함수 문법은 붙여넣을 수 있습니다. Lab, LCH, OKLCH 및 Display-P3와 같은 최신 색상 공간은 이 간결한 도구의 범위에서 의도적으로 제외되어 있습니다.
도구가 알파(투명도)를 지원하나요?
RGBA, HSLA, 8자리 HEX와 같은 일반적인 알파 형식을 파싱할 수 있지만, 주요 스와치와 복사 출력은 실용적인 불투명 웹 색상에 중점을 둡니다.
왜 값이 다른 디자인 도구와 다를 때가 있나요?
작은 차이는 보통 반올림 규칙이나 색상 관리 가정에서 발생합니다. 웹 sRGB 색상의 경우 이러한 차이는 일반적으로 매우 작습니다.
대신 대비 검사기를 언제 사용해야 하나요?
텍스트 가독성을 위해 두 색상을 비교해야 할 때는 대비 검사기를 사용하세요. 이 변환기는 한 색상만 형식 간에 변환합니다.