HEX, RGB, HSL, HWB, CIELAB, CIE LCH, OKLab, OKLCH, CMYK 및 Display P3 간에 색상을 변환하세요. 원본과 대상 형식을 선택하고, CSS 문법 또는 숫자만으로 값을 입력하면 culori 라이브러리로 계산한 CSS에 바로 사용할 수 있는 결과를 얻을 수 있습니다. 대상 색 영역을 벗어난 색상은 CSS Color 4 규격에 따라 매핑됩니다. 코드와 디자인 도구 간에 색상을 옮겨 쓰는 개발자와 디자이너를 위한 도구입니다.
10가지 형식, 즉 HEX, RGB, HSL, HWB, CIELAB (lab), CIE LCH (lch), OKLab, OKLCH, CMYK 및 Display P3를 지원합니다. 어느 형식이든 원본 또는 대상 형식으로 지정할 수 있어 90가지 변환 방향이 가능합니다. 결과는 CSS의 최신 Color 4 문법을 사용합니다. 예를 들면 rgb(255 136 0) 또는 oklch(0.7442 0.1812 56.46)입니다.
원본 형식의 전체 CSS 표기법(예: hsl(32 100% 50%) 또는 color(display-p3 1 0.5 0))을 입력하거나, HSL을 선택한 상태에서 32, 100%, 50%처럼 숫자만 입력하세요. 16진수 코드는 #을 포함하거나 생략할 수 있으며 3, 4, 6 또는 8자리 형식이 지원됩니다. 값은 선택한 원본 형식과 일치해야 합니다. 따라서 HSL 페이지에서 rgb() 값을 입력하면 잘못 변환되는 대신 거부됩니다.
culori에는 CMYK 모드가 없으므로 변환기는 0부터 1까지의 sRGB 값에 표준 단순 공식을 사용합니다. K = 1 - max(R, G, B), C = (1 - R - K) / (1 - K)이며 M과 Y에도 같은 방식이 적용됩니다. 역방향은 R = (1 - C) x (1 - K)와 같은 방식으로 계산합니다. 이는 ICC 프로필 변환이 아니므로 특정 인쇄기나 용지의 출력과 일치하지 않습니다. 화면에서의 근사치와 대략적인 사양에 사용하세요.
cmyk(0%, 47%, 100%, 0%), 장치별 cmyk(0 0.47 1 0) 또는 숫자 네 개를 사용하세요. 퍼센트 기호가 있는 값은 백분율로 처리합니다. 단위가 없는 값은 0부터 1까지의 분수로 읽습니다. 단, 값 중 하나가 1보다 크면 모두 백분율로 읽으므로 0, 47, 100, 0은 예상대로 작동합니다. CMYK 출력은 소수점 이하 최대 두 자리의 백분율로 표시됩니다.
Lab, LCH, OKLab, OKLCH 및 Display P3는 sRGB로 표시할 수 없는 색상을 표현할 수 있습니다. 대상이 HEX, RGB, HSL, HWB 또는 CMYK처럼 모두 sRGB인 형식이거나 Display P3인 경우, 색 영역을 벗어난 색상은 CSS Color 4 알고리즘으로 매핑됩니다. 이 알고리즘은 색상이 영역 안에 들어올 때까지 OKLCH 채도를 낮추며 결과에 안내 문구가 표시됩니다. Lab, LCH, OKLab 및 OKLCH 대상에는 범위 제한이 없어 매핑되지 않습니다.
예. CMYK를 제외한 모든 대상 형식에서 유지됩니다. 입력에 rgb(255 136 0 / 50%) 또는 #ff880080과 같은 알파 값이 있으면 CSS 함수 안에서는 / 0.5로, 8자리 16진수 코드에서는 알파 값으로 표시됩니다. CMYK에는 알파 채널이 없으므로 알파 값이 제거됩니다.
RGB 채널은 0부터 255까지의 정수로 반올림됩니다. HSL, HWB 및 CMYK 백분율과 Lab 및 LCH 값은 소수점 이하 두 자리, OKLab 값과 OKLCH 명도 및 채도, Display P3 채널은 소수점 이하 네 자리, 색상각은 소수점 이하 두 자리로 반올림됩니다. 반올림 전에 모든 계산은 배정밀도로 수행되므로 왕복 변환 결과는 원래 값의 반올림 범위 안에 머뭅니다.
CIELAB 및 CIE LCH는 D50 백색점을 사용하며, sRGB의 D65 백색점에서 Bradford 색순응을 적용합니다. 이는 CSS lab() 및 lch() 함수의 정의와 정확히 같습니다. 명도 범위는 0부터 100까지입니다. OKLab 및 OKLCH는 Bjorn Ottosson이 만든 지각 색 공간으로, CSS oklab() 및 oklch()에서 사용되며 명도 범위는 0부터 1까지입니다.
페이지 양식에서는 한 번에 색상 하나만 변환합니다. 도구를 직접 호출하는 클라이언트는 줄마다 색상을 하나씩 보내 최대 100개까지 처리할 수 있으며, 같은 순서로 줄마다 변환된 값을 하나씩 받을 수 있습니다. 각 색상은 최대 100자까지 입력할 수 있습니다.
무채색에는 색상각이 없으며, CSS에서는 이를 none으로 표시할 수 있습니다. 변환기는 none을 지원하지 않는 도구에서도 값이 작동하도록 대신 0을 씁니다. 채도 또는 크로마가 0이면 색상각은 화면에 보이는 결과에 영향을 주지 않습니다.
HEX 색상을 RGB(으)로 한 번에 변환하세요. HEX 값을 CSS 문법 또는 숫자만으로 입력하면 CSS에 맞게 반올림된 정확한 RGB 값을 얻을 수 있으며, 계산에는 culori 라이브러리가 사용됩니다. RGB에서 색상을 표시할 수 없는 경우 CSS Color 4 규격에 따라 색 영역 안의 가장 가까운 색상으로 매핑됩니다. 스타일시트, 디자인 도구 및 사양 간에 색상을 옮겨 쓰는 개발자와 디자이너를 위한 도구입니다.
HEX 색상을 HSL(으)로 한 번에 변환하세요. HEX 값을 CSS 문법 또는 숫자만으로 입력하면 CSS에 맞게 반올림된 정확한 HSL 값을 얻을 수 있으며, 계산에는 culori 라이브러리가 사용됩니다. HSL에서 색상을 표시할 수 없는 경우 CSS Color 4 규격에 따라 색 영역 안의 가장 가까운 색상으로 매핑됩니다. 스타일시트, 디자인 도구 및 사양 간에 색상을 옮겨 쓰는 개발자와 디자이너를 위한 도구입니다.
HEX 색상을 HWB(으)로 한 번에 변환하세요. HEX 값을 CSS 문법 또는 숫자만으로 입력하면 CSS에 맞게 반올림된 정확한 HWB 값을 얻을 수 있으며, 계산에는 culori 라이브러리가 사용됩니다. HWB에서 색상을 표시할 수 없는 경우 CSS Color 4 규격에 따라 색 영역 안의 가장 가까운 색상으로 매핑됩니다. 스타일시트, 디자인 도구 및 사양 간에 색상을 옮겨 쓰는 개발자와 디자이너를 위한 도구입니다.
HEX 색상을 CIELAB 색 공간(으)로 한 번에 변환하세요. HEX 값을 CSS 문법 또는 숫자만으로 입력하면 CSS에 맞게 반올림된 정확한 CIELAB 색 공간 값을 얻을 수 있으며, 계산에는 culori 라이브러리가 사용됩니다. CIELAB 색 공간에서 색상을 표시할 수 없는 경우 CSS Color 4 규격에 따라 색 영역 안의 가장 가까운 색상으로 매핑됩니다. 스타일시트, 디자인 도구 및 사양 간에 색상을 옮겨 쓰는 개발자와 디자이너를 위한 도구입니다.
HEX 색상을 CIE LCH(으)로 한 번에 변환하세요. HEX 값을 CSS 문법 또는 숫자만으로 입력하면 CSS에 맞게 반올림된 정확한 CIE LCH 값을 얻을 수 있으며, 계산에는 culori 라이브러리가 사용됩니다. CIE LCH에서 색상을 표시할 수 없는 경우 CSS Color 4 규격에 따라 색 영역 안의 가장 가까운 색상으로 매핑됩니다. 스타일시트, 디자인 도구 및 사양 간에 색상을 옮겨 쓰는 개발자와 디자이너를 위한 도구입니다.
HEX 색상을 OKLab 색 공간(으)로 한 번에 변환하세요. HEX 값을 CSS 문법 또는 숫자만으로 입력하면 CSS에 맞게 반올림된 정확한 OKLab 색 공간 값을 얻을 수 있으며, 계산에는 culori 라이브러리가 사용됩니다. OKLab 색 공간에서 색상을 표시할 수 없는 경우 CSS Color 4 규격에 따라 색 영역 안의 가장 가까운 색상으로 매핑됩니다. 스타일시트, 디자인 도구 및 사양 간에 색상을 옮겨 쓰는 개발자와 디자이너를 위한 도구입니다.
OneClick Pro은 일상 업무에 활용할 수 있는 150개 이상의 웹 도구를 무료로 모아 제공합니다. 이미지와 단위를 변환하고, 코드를 포맷하고 검증하고, 도메인과 SEO를 확인하고, 텍스트와 날짜, 숫자를 다룰 수 있습니다. 모든 도구는 가입이나 구독 없이 사용할 수 있으며, 입력한 내용은 결과를 계산하는 데만 사용되고 저장되지 않습니다. 한 번 쓰는 작업을 위한 빠른 도구 모음으로 활용하거나, 매일 자주 쓰는 도구를 북마크해 두세요.