🎨
무료 색상 변환기
HEX, RGB, HSL, HSV, CMYK 형식 간에 색상을 즉시 변환합니다. 명도 스케일과 사전 설정 스워치를 포함합니다.
한 번 로드하면 오프라인에서도 작동
색상을 HEX, RGB, HSL, HSV 및 CMYK 사이에서 변환합니다 — 라이브 미리보기 및 한 번의 탭으로 복사 가능합니다. 모든 작업이 브라우저에서 실행됩니다.
허용 형식: HEX (#fff 또는 #ffffff), RGB (255, 255, 255), 또는 HSL (360, 100%, 50%)
100%
프리셋:
HEX#14B8A6
rgb() · 레거시rgb(20, 184, 166)
rgb() · 모던rgb(20 184 166)
hsl() · 레거시hsl(173, 80%, 40%)
hsl() · 모던hsl(173 80% 40%)
oklch()oklch(70.4% 0.123 182.5)
lab()lab(67.1% -42.9 -2.3)
lch()lch(67.1% 43.0 183.1)
hsv()hsv(173, 89%, 72%)
cmyk()cmyk(89%, 0%, 10%, 28%)
RGB 값20, 184, 166
WCAG 명도 대비
흰 배경에서
2.49:1
검은 배경에서
8.44:1
🖨️ 인쇄용: 이 CMYK 값(89%, 0%, 10%, 28%)은 참고용 표준 sRGB→CMYK 근사입니다. 정확한 인쇄 색상은 프린터의 ICC 프로필이나 인쇄 견본을 사용하세요 — 화면 CMYK는 모든 잉크/용지와 일치할 수 없습니다.
밝기 스케일
스워치를 클릭하여 해당 색조로 전환
주요 용도
- 웹 디자인용 색상 변환모든 색상의 HEX, RGB 및 HSL 값을 얻습니다 — CSS 또는 Tailwind에 붙여넣을 준비가 되어 있습니다.
- 인쇄용 색상 변환 (CMYK)화면 색상(HEX/RGB)을 CMYK 값으로 변환하여 인쇄 디자인 및 전문 인쇄에 사용합니다.
- 디자인 시스템용 색상 팔레트 구축브랜드 색상을 모든 형식으로 변환하고 전체 디자인 시스템을 위해 일관된 명도 스케일을 생성합니다.
- 접근성을 위한 색상 대비 확인대비 비율 도구에서 사용할 RGB 값을 얻기 위해 색상을 변환합니다. 접근 가능한 디자인을 위한 WCAG 준수.
- Figma용 색상 변환Figma 색상 선택기 및 디자인 토큰 시스템에 붙여넣을 정확한 HEX 및 RGB 값을 가져옵니다.
사용 방법
모든 변환 로직은 전적으로 브라우저에서 실행되는 직접 작성한 JavaScript입니다. 라이브러리도 서버 호출도 없습니다. 도구는 입력을 파싱하고 순수 수학 함수 체인을 거쳐 최신 CSS Color 4 공간인 oklch()와 lab()을 포함한 11가지 출력 형식을 동시에 만듭니다.
- 1유연한 입력 파싱자체 파서는 16진수(3, 4, 6, 8자리), rgb()/rgba(), hsl()/hsla()를 기존 쉼표 구문과 최신 공백 구문 모두로 받으며, 숫자 세 개만 입력해도 됩니다. 소수나 백분율로 된 알파 값은 변환 전에 0–1 범위로 정규화됩니다.
- 2RGB를 변환의 중심으로받아들인 모든 형식은 먼저 표준 RGB 세 값으로 변환됩니다. 이 하나의 표현에서 여러 형식으로 확장됩니다. HSL과 HSV는 표준 min/max/채도 공식을 사용하고, CMYK는 키 채널을 찾아 도출하며, 지각 색 공간 계산 전에는 sRGB 선형화(IEC 61966-2-1에 정의된 구간별 감마 곡선)를 적용합니다.
- 3지각 색 공간을 직접 계산oklch()는 Björn Ottosson의 기준 3×3 행렬(LMS 세제곱근 공간)로 계산합니다. lab()과 lch()는 Bradford 색순응 변환으로 D65 백색점을 D50으로 변환하며, 이는 CSS Color 4가 lab()을 정의하는 방식과 같습니다. 브라우저 렌더링 엔진에서 쓰이는 것과 같은 공식을 외부 의존성 없이 구현했습니다.
- 4WCAG 대비와 명도 단계상대 휘도는 WCAG 2.1 공식(선형화된 R, G, B에 0.2126/0.7152/0.0722 가중)으로 계산하고, 흰색과 검정에 대한 대비율을 AA-large, AA, AAA, Fail로 판정합니다. HSL 명도 채널을 10%에서 90%까지 단계적으로 바꿔 9단계 명도 띠를 만들며, 견본을 클릭하면 그 색조를 변환할 수 있습니다.