제목: "색상 변환기: HEX,RGB, HSL,HWB 및 CMYK 를 올바른 방법으로 변환" slug: 색상 변환기-가이드 도구: 색상 변환기 범주: 색상 유형: 클러스터

색상 변환기: HEX, RGB, HSL, HWB 및 CMYK를 올바른 방식으로 변환합니다

처음으로 컬러 비트가 인쇄 실행 중이었습니다. WordPress 제품 중 하나에 대한 랜딩 페이지를 만들고 브라우저에서 파란색 브랜드에 로그오프 한 다음 스티커 배치를 위해 동일한 "blue"를 인쇄소에 보냈습니다. 돌아온 것은 화면과 전혀 닮지 않은 평평하고 약간 회색의 네이비였습니다. 아무도 RGB 화면 색상을 CMYK 로 변환하지 않았기 때문에 프린터가 추측했고 추측이 틀렸습니다. 그날은 색상을 단일 문자열로 취급하는 것을 중단하고 한 번에 여러 언어로 말해야하는 하나의 값으로 취급하기 시작했습니다.

그것이 바로 색상 변환기의 목적입니다. 하나의 구문에 색상을 부여하고 다른 모든 구문을 다시 전달하므로 CSS 의 파란색,디자인 파일의 파란색 및 프린터가받는 파란색은 모두 동일한 색상으로 입증되었습니다. 나는 구축했다 Toolz.dev 에 색상 변환기 RGB,HSL, CMYK 를 따로따로 얻기 위하여 3 개의 다른 위치에 육 부호를 풀칠하는 것에 나는 피로했기 때문에.

TL;DR: 색상 변환기는 한 가지 색상을 가져와 HEX,RGB, HSL,HWB, CMYK 로 한 번에 다시 표현하며 가장 가까운 CSS 색상 이름도 함께 표시합니다. 화면에는 RGB 및 HEX 를 사용하고 손으로 색상을 살짝 밀고 싶을 때는 HSL 또는 HWB 를 사용하고 인쇄에는 CMYK 를 사용합니다. Toolz.dev 변환기는 브라우저에서 완전히 실행되며 알파 채널을 그대로 유지하며 붙여 넣은 것을 업로드하지 않습니다.

색상 변환기 란 무엇입니까?

색상 변환기는 일반적인 CSS 구문으로 작성된 색상을 구문 분석하고 다른 구문에서 해당 색상을 계산합니다. 어떤 구문이 존재하는지, 그리고 각 구문이 정확히 어떻게 변환되는지는 다음과 같이 정의됩니다 CSS 컬러 모듈 레벨 4니다. 수학은 복잡하지 않지만 손으로하는 것은 지루하고 오류가 발생하기 쉽습니다. 변환 #4466EE RGB에 대한 의미는 6개의 16진수 숫자를 3쌍으로 나누고 각 쌍을 16진수 숫자로 읽는 것을 의미합니다: 44 는 68, 66 는 102, 그리고 EE 는 238, 주는 rgb(68, 102, 238). 반대로 가는 것은 각 채널을 두 자리 숫자의 육각 문자열로 나누고 결합하는 것을 의미합니다. HSL 에 도달한다는 것은 채널을 정규화하고,최소값과 최대값을 찾고,그것들로부터 색조,채도, 가벼움을 계산하는 것을 의미합니다. 여러분은 새벽 2 시에 머릿속에서 그렇게 하고 싶지 않습니다.

변환기의 가치는 단지 산술을 저장하는 것이 아닙니다. 일관성을 보장하는 것입니다. 하나의 도구가 단일 구문 분석된 색상으로 모든 형식을 생성할 때 복사한 RGB 와 복사한 HSL 이 단계마다 다르게 반올림했기 때문에 약간 다른 색상을 설명할 가능성이 없습니다. 하나의 소스,하나의 진리,모든 형식.

왜 컬러 포맷이 존재하기까지 하는가?

각 색상 형식은 진정으로 한 가지 작업을 잘하기 때문에 살아남습니다.

RGB 는 화면이 작동하는 방식입니다. 디스플레이는 빨간색,녹색, 파란색 빛을 방출하고,그 세 가지를 서로 다른 강도로 혼합하면 보이는 모든 색상이 생성됩니다. 따라서 RGB 가 브라우저의 모국어가 됩니다: CSS 에 어떤 구문을 쓰든 렌더링 엔진은 픽셀을 밝히기 전에 RGB 로 해결합니다.

HEX 는 속기로 RGB 입니다. #4466EE 와 같다 rgb(68, 102, 238)는, 다만 작게 stylesheet 또는 디자인 공구에 풀칠하게 쉬운 끈으로 포장해 입니다. 그것은 더 유능하기 때문에 아닙니다 짧고 명확하기 때문에 대중적입니다.

HSL 은 색조,채도, 밝기로 색상을 설명합니다. UI 를 손으로 튜닝할 때 도달하는 형식입니다. 호버링 시 버튼을 더 어둡게 만들기 위해 밝기를 몇 점 떨어뜨리고 색조와 채도는 그대로 둡니다. 원시 RGB 에서 그렇게 하려고 한다는 것은 세 채널을 모두 동일하지 않은 양으로 변경하고 색조가 표류하지 않기를 바라는 것을 의미합니다.

HWB, CSS 컬러 모듈 레벨 4 사양(https://www.w3.org/TR/css-color-4/), 얼마나 많은 흰색과 얼마나 많은 검은 색이 혼합되어 있는지에 따라 동일한 색조를 설명합니다. 사람들이 실제로 색조와 색조에 대해 어떻게 생각하는지 깔끔하게 매핑합니다: 밝게하려면 흰색을 추가하고 어두워 지려면 검정색을 추가하십시오. 더 새롭기 때문에 브라우저 도달 범위보다 코드의 가독성이 더 중요 할 때 주로 사용합니다.

CMYK 는 인쇄 모델입니다. 프린터는 청록색,자홍색, 노란색,검은색 잉크를 흰 종이에 내려 놓고 각 잉크는 빛을 추가하지 않고 뺍니다. 그래서 생생한 화면 색상이 종이에 더 흐릿하게 보일 수 있습니다: gamuts 라고 불리는 두 모델이 생성 할 수있는 색상 범위는 서로 다릅니다. 변환기는 CMYK 근사치를 제공하지만 존재하지 않는 잉크를 발명 할 수는 없습니다.

HEX 를 RGB 로 변환하고 다시 변환하려면 어떻게 해야 합니까?

가장 일반적인 변환은 넓은 차이로 HEX를 RGB로, RGB를 HEX로 변환하는 것입니다. 다음은 수동 방법으로 내 도구를 포함한 모든 도구를 온전하게 확인할 수 있습니다.

HEX 를 RGB 로 변환하려면 여섯 자리를 세 쌍으로 나누고 각각을 0 부터 255 까지 16 진수로 읽습니다. 세 자리 속기 좋아요 #46E 각 숫자를 두 배로 늘려 확장합니다 #4466EE 먼저,RGB 를 HEX 로 변환하려면 각 채널 값을 가져와 필요한 경우 앞에 0 이 있는 두 자리 16 진수 문자열로 변환하고 해시 뒤에 결합합니다.

이렇게 반복하지 말고 값을 the 에 붙여넣으세요 컬러 컨버터 그리고 모든 형식을 한 번에 읽으십시오. 또한 시각적으로 색상을 선택하고 라이브로 업데이트하는 것을 볼 필요가있는 경우,the 색상 선택기 가 더 나은 시작점이며, 두 도구는 동일한 변환 코어를 공유하므로 숫자가 일치합니다.

RGB 대신 CMYK 를 언제 사용해야 하나요?

출력이 종이에 잉크 인 경우에만 CMYK 를 사용하십시오. 명함,스티커, 포장 및 모든 상업용 인쇄 작업은 CMYK 값을 기대하며 RGB 를 프린터로 보내는 것은 프린터 또는 소프트웨어가 귀하를 위해 변환된다는 것을 의미하며 종종 귀하가 서명하지 않은 결과로 문장에서 스티커 실수였습니다.

RGB, 그리고 그것의 HEX 속기를, 스크린에 표시될 무엇이든을 위해 사용하십시오: 웹사이트, 앱스, 사회적인 도표, 영상. 프로젝트가 진실의 당신의 근원으로 RGB 또는 HEX를 지키고 당신이 인쇄하기 위하여 떨어져 수교하는 순간에 변환기를 가진 CMYK 근사치를 생성하는 프로젝트, 그래서 당신은 CMYK 가치를 눈알로 보고 당신이 인쇄 뛰기를 요하기 전에 나쁘게 이동할 어떤 색깔든지 깃발을 달 수 있습니다.

색상 형식은 어떻게 비교합니까?

포맷	위한 최고의	알파 지원	예
육	소형 CSS, 디자인 핸드오프	8자리 양식만 해당됩니다	#4466EE
RGB / RGBA	스크린, 프로그램 색깔	예(rgba)	rgb(68, 102, 238)
HSL / HSLA	핸드 튜닝 색상과 가벼움	예(hsla)	hsl(228, 83%, 60%)
HWB	읽을 수 있는 색조와 색조	예(슬래시 알파 포함)	hwb(228 27% 7%)
CMYK	인쇄, 종이에 잉크	아니요	cmyk(71%, 57%, 0%, 7%)

이 표는 워크플로에 깔끔하게 매핑되기 때문에 염두에 둘 가치가 있습니다: HEX로 디자인하거나 시각적으로 선택하고, HSL 또는 HWB로 조정하고, RGB 또는 HEX로 화면에 전송하고, 인쇄 경계에서만 CMYK로 변환합니다.

투명성은 형식 간에 어떻게 이동합니까?

알파는 많은 변환이 조용히 잘못되는 곳입니다. 알파 채널은 불투명도를 제어합니다. 0 (완전히 투명함) 에서 1 (완전히 불투명함) 까지. RGBA 와 HSLA 는 네 번째 값으로,8 자리 HEX 는 네 번째 쌍으로 전달합니다: #4466EECC 대략 80퍼센트의 불투명도가 파란색인가요 CC 는 255 점 만점에 204 점 입니다. 일반 HEX 와 cmyk() 알파 채널이 전혀 없습니다.

Toolz.dev 변환기는 알파를 지원하는 모든 형식을 통해 알파를 보존합니다. 붙여 넣기하면 rgba(0, 0, 0, 0.5) 당신은 얻는다 #00000080 HEXA 행에서 그리고 hsla(0, 0%, 0%, 0.5) HSLA 행에서 모두 동일한 반투명 검정색을 설명합니다. 일반 HEX 또는 CMYK 행을 대신 복사하면 완전히 불투명한 색상을 복사하는 것이지 버그가 아닌 의도적인 선택입니다: 이러한 형식은 불투명도를 표현할 수 없으므로 색상을 마치 고체인 것처럼 표시합니다. 투명도가 중요하면 알파 인식 행에서 복사합니다.

CSS 색상 이름을 변환할 수 있나요?

네,그리고 양방향으로 작동합니다. 와 같은 키워드를 입력합니다 tomato, rebeccapurple, 또는 slategray 그리고 변환기는 HEX,RGB, HSL,HWB, CMYK 로 해결합니다. 148 개의 명명된 색상의 전체 세트는 CSS Color Module Level 4 사양에서 나온 것이므로 브라우저가 해결하는 것과 값이 정확히 일치합니다.

다른 방향으로 가는 것은 진정으로 유용해지는 곳입니다. 숫자 색상을 붙여넣으면 변환기는 일치하는 경우 정확한 CSS 이름을 보고하고,그렇지 않은 경우 항상 RGB 거리별로 가장 가까운 명명된 색상을 표시합니다. 가장 가까운 일치는 변수 이름을 지정하고 읽을 수 있는 디자인 문서를 작성하는 데 유용합니다: #663399 로 돌아옵니다 rebeccapurple그리고 그것에 가까운 것이 "nearest: rebeccapurple"로 돌아옵니다. 그래서 당신은 당신이 어느 동네에 있는지 알 수 있습니다.

이것이 실제 디자인 워크플로우에 어떻게 부합합니까?

프로젝트 전반에 걸쳐 실제로 색상을 사용하는 방법과 각 도구가 적합한 위치는 다음과 같습니다.

나는 일반적으로 시각적으로 원색을 선택하는 것부터 시작합니다 색상 선택기. 일단 내 브랜드가 파란색이 되면, 나는 그것을 통해 실행합니다 컬러 컨버터 HEX, RGB, HSL 및 CMYK 값을 한 곳에 잠그고 이를 설계 시스템 문서에 붙여넣어 모든 팀원과 모든 공급업체가 동일한 번호로 작업하도록 합니다.

그런 다음 팔레트를 만듭니다. 지원 음영은 HSL 의 넛지 가벼움에서 비롯되며,나는 모든 텍스트-온-배경 쌍을 X-10 으로 확인합니다 색상 대비 검사기 그래서 팔레트는 불만 사항이 접수된 후가 아니라 배송되기 전에 접근할 수 있습니다. 배경이 번성해야 할 때 그 색상 중 두 가지를 팔레트에 입력합니다 그라디언트 생성기.

마지막으로 모든 색상에 대한 반응형 간격과 타이포그래피를 위해 팔레트를 페어링합니다 CSS 클램프 발생기 그래서 크기는 색상이 일관 된 만큼 부드럽게 확장 됩니다. 색상과 레이아웃은 동일한 광택의 두 반쪽입니다.

작업하는 동안 데이터가 어디로 가는지 신경쓰는다면,이러한 도구들이 어떻게 처리하는지 읽어볼 가치가 있습니다. color converter 에 있는 모든 것은 클라이언트 측에서 실행됩니다. 제가 에 쓴 디자인 선택입니다 온라인 도구의 데이터 개인 정보 보호 가이드그리고 그것은 내 일일 키트의 나머지 부분과 나란히 놓여 있습니다 웹 개발자 툴킷.

제작에 충분히 정확한가요?

스크린 작업을 위해, 예, 자격없이. HEX, RGB, HSL, HWB는 모두 동일한 sRGB 색상의 정확한 표현이므로, 이들 사이를 깔끔하게 라운드 트립 변환: 색상을 HSL로 변환하고 뒤로하고 동일한 RGB 트리플에 착륙, 주고 또는 채널에서 반올림의 한 단위를 가져. 그 반올림은 정수 채널에서 연속 색상을 나타내는 고유, 어느 하나의 도구에서 결함이 아닙니다.

CMYK 의 경우 출력을 색상 관리 증명이 아닌 견고한 표준 근사치로 처리하십시오. 진정한 인쇄 색상은 브라우저 기반 도구가 알 수없는 프린터가 사용하는 특정 용지,잉크 및 ICC 프로파일에 따라 다릅니다. 변환기는 표준 순진한 CMYK 공식을 사용합니다. 이는 대부분의 디자인 도구가 기본적으로 보여주는 것과 정확히 일치하며 신뢰할 수있는 출발점입니다. 작업이 색상이 중요 할 때 전체 실행 전에 프린터에서 물리적 증명을 얻으십시오. 그것이 내 회색 해군 스티커가 가르쳐 준 교훈이며 잘못된 스티커 상자보다이 단락에서 배우는 것이 더 저렴합니다.

LAB 및 OKLCH와 같은 최신 색상 공간은 어떻습니까?

당신이 CSS를 밀접하게 따라 간다면 당신은 보았습니다 lab(), lch(), oklab(), 그리고 oklch() 스타일시트와 디자인 툴에 등장. 이것들은 CSS Color Module Level 4 사양에서 나온 것으로 실제 문제를 해결합니다: RGB,HSL, HWB 는 모두 sRGB 화면 모델에 묶여 있기 때문에 눈에 똑같이 다르게 보이는 두 가지 색상은 매우 다른 숫자 거리로 떨어져있을 수 있으며,넓은 색상의 디스플레이는 sRGB 가 단순히 설명 할 수없는 색상을 보여줄 수 있습니다. OK 색상 공간은 지각 적으로 균일하므로 균일하게 계단식 팔레트를 생성하고 중간에 진흙 투성이가 아닌 그라데이션을 보간하는 데 탁월합니다.

나는 의도적으로이 변환기를 일상적인 생산 CSS 에 붙여 넣는 형식에 초점을 맞추고 프린터에 손을 대었습니다: HEX,RGB, HSL,HWB, CMYK. 즉,실제 작업의 압도적 인 다수를 다루는 세트이며,그들 모두는 동일한 sRGB 색상에 깔끔하게 매핑되므로 그들 사이의 변환은 정확하고 되돌릴 수 있습니다. 더 넓은 영역 공간에는 미묘하게 잘못되기 쉬운 영역 매핑 결정이 포함되며 간단한 변환기로 혼합하면 대부분의 사람들이 필요로하지 않는 적용 범위에 대한 명확성이 교환됩니다.

내가 따르는 실용적인 규칙: 알고리즘으로 팔레트 또는 그라데이션을 생성하고 지각적으로 균일한 단계를 원할 때 OKLCH에 도달하고 구성 요소를 작성하는 일상적인 작업을 위해 HEX, RGB 및 HSL에서 디자인할 때 핸드오프 전에 결과 앵커 색상을 디자인 도구를 사용하여 HEX 또는 RGB로 변환하므로 스타일시트의 값은 이 변환기와 팀원이 읽을 수 있는 것과 동일합니다.

자주 묻는 질문

HEX 를 RGB 로 변환하려면 어떻게 해야 하나요?

여섯 자리 HEX 코드를 세 쌍으로 나누고 각각을 0 부터 255 까지의 16 진수로 읽습니다. In #4466EE, 44 는 68 (빨간색), 66 는 102 (녹색), 그리고 EE 는 238 (파란색), 주는 rgb(68, 102, 238). HEX 코드를 변환기에 붙여넣으면 RGB 값이 다른 모든 형식과 함께 즉시 나타납니다.

RGB 를 HEX 로 변환하려면 어떻게 해야 하나요?

빨간색,녹색, 파란색 값 (0 에서 255) 각각을 두 자리 16 진수로 변환하고 해시 뒤에 결합합니다. rgb(68, 102, 238) 된다 #4466EE. 변환기는 이 작업을 즉시 수행하며 알파 값이 있을 때 8자리 HEXA 형식도 제공합니다.

HSL 과 HWB 의 차이점은 무엇입니까?

HSL 은 색조,채도, 밝기로 색상을 설명하는 반면,HWB 는 동일한 색조를 얼마나 많은 흰색과 얼마나 많은 검정색이 혼합되어 있는지로 설명합니다. HWB 는 종종 색조와 색조에 대해 더 직관적입니다: 흰색을 높이면 색상이 밝아지고 흑색을 높이면 어두워집니다. 둘 다 정확히 동일한 RGB 값으로 매핑되므로 자유롭게 전환할 수 있습니다.

RGB 대신 CMYK 를 언제 사용해야 하나요?

인쇄용 CMYK,화면용 RGB 를 사용합니다. CMYK 는 청록색,자홍색, 노란색,검은색 잉크를 기반으로 한 감산 모델이므로 상업용 프린터가 기대하는 것입니다. RGB 는 첨가제이며 디스플레이에서 방출되는 빛을 설명합니다. 화면 색상은 CMYK 근사치를 가지지만 두 영역이 다르기 때문에 생생한 화면 색상은 인쇄에서 더 흐릿하게 보일 수 있습니다.

변환기는 투명성을 지원합니까?

예. 을 통해 알파 값을 제공합니다 rgba(), hsla()또는 8 자리 HEX 와 불투명도는 모든 알파 인식 출력에서 보존됩니다. 일반 HEX 와 같이 알파 채널이 없는 형식 cmyk()는, 완전히 불투명한 색깔을 보여줍니다, 그래서 투명도가 중요한 때 RGBA 또는 HEXA 산출을 검사합니다.

CSS 색상 이름을 변환할 수 있나요?

예. 와 같은 CSS 키워드를 입력합니다 tomato, rebeccapurple, 또는 slategray 그리고 변환기는 HEX,RGB, HSL,HWB, CMYK 로 해결합니다. 또한 역방향으로 작동합니다: 숫자 색상을 붙여 넣기하면 일치하는 경우 정확한 CSS 이름과 참조를 위해 가장 가까운 명명 된 색상을보고합니다.

컬러 컨버터는 무료이며 비공개인가요?

예. 변환기는 가입,제한 없음,워터마크가 없는 완전 무료입니다. 모든 구문 분석 및 변환은 클라이언트 측 JavaScript 를 사용하여 브라우저에서 실행되므로 입력한 색상은 절대로 장치에서 나가지 않으며 페이지가 로드되면 도구가 오프라인으로 계속 작동합니다.