생성기색상 코드 변환

색상 코드 변환기HEX RGB HSL CMYK 상호 변환

색상 코드를 HEX, RGB, HSL, HSV, CMYK로 한 번에 바꿔 주는 온라인 컬러 코드 변환기입니다. 붙여 넣으면 바로 변환되고 밝기 단계도 함께 뽑아 줍니다.

색상 코드 변환 사용법

색상 코드 하나를 넣으면 HEX·RGB·HSL·HSV·CMYK 로 한꺼번에 바꿔 줍니다. 디자인 시안의 색을 코드로 옮길 때 씁니다.

  1. 색을 넣습니다

    #00a495 같은 hex(#00a49580 처럼 투명도가 붙은 8자리 포함), rgb(0 164 149 / 50%) 같은 새 CSS 문법, hsl·hsv·cmyk, CSS 색 이름 148개, 포토샵에서 복사한 "0, 164, 149" 까지 읽습니다. 끝의 ; 나 "--primary:" 같은 이름표가 딸려 와도 됩니다.

  2. 필요한 표기를 복사합니다

    각 줄의 값을 눌러 바로 복사합니다. CSS 에 그대로 붙여 넣을 수 있는 형태입니다.

  3. 밝기 단계를 씁니다

    같은 색의 밝기만 바꾼 단계를 함께 뽑아 줍니다. 배경·테두리·글자를 한 계열로 맞출 때 편합니다.

  4. 여러 색은 '여러 줄' 로 바꿉니다

    CSS 변수 목록이나 색 목록을 통째로 붙여 넣고 HEX·RGB·HSL 중 하나를 고르면, 줄마다 색만 골라 바꾸고 변수 이름과 ; 는 그대로 둡니다. 읽지 못한 줄은 이유와 함께 표시됩니다.

자주 묻는 질문

CMYK 값이 인쇄물과 조금 달라요
화면 색(RGB)을 잉크(CMYK)로 단순 환산한 값이라 그렇습니다. 종이와 잉크에 따라 달라지므로 인쇄용으로는 참고만 하고 실제 교정을 보세요.
HSL 과 HSV 는 뭐가 다른가요?
둘 다 색상·채도로 색을 다루지만 마지막 값이 다릅니다. HSL 은 밝기(50%가 순색), HSV 는 명도(100%가 순색)라 포토샵은 HSV, CSS 는 HSL 을 씁니다.
투명도(알파)도 다루나요?
네. #00a49580 이나 rgba(0, 164, 149, 0.5) 처럼 투명도가 있으면 HEX 는 8자리, RGB·HSL 은 rgba()·hsla() 로 함께 바꿉니다. HSV·CMYK 에는 투명도 표기가 없어 색만 보여줍니다.

생성기 다른 도구