디자인 도구는 HEX, 코드에서는 RGB, 색을 조정할 때는 HSL, 인쇄에서는 CMYK를 씁니다. 같은 색이라도 표기법이 제각각이라 변환이 자주 필요합니다. 이 도구는 색을 고르거나 코드를 입력하면 네 가지 형식을 한 번에 보여주고 복사까지 해줍니다.
HEX·RGB·HSL·CMYK는 무엇이 다른가
모두 같은 색을 다르게 적는 방법입니다. 어디에 쓰느냐에 따라 편한 표기가 다릅니다.
| 표기법 | 형식 | 값 범위 | 주 사용처 |
|---|---|---|---|
| HEX | #RRGGBB | 각 채널 00~FF (16진수) | 웹·CSS·디자인 툴 |
| RGB | rgb(r, g, b) | 각 채널 0~255 | 화면 출력·코드·rgba 투명도 |
| HSL | hsl(h, s%, l%) | H 0~360 · S·L 0~100% | 색 미세 조정·팔레트 생성 |
| CMYK | c, m, y, k | 각 0~100% | 인쇄(감산 혼합) |
양방향 변환과 복사
색상 피커로 색을 고르거나, HEX 칸에 코드를 직접 입력하거나, RGB 슬라이더로 미세 조정할 수 있습니다. 어느 쪽을 바꿔도 나머지 표기가 즉시 갱신됩니다. rgb()나 hsl() 형식을 그대로 붙여넣어도 인식합니다.
각 표기 옆 복사 버튼으로 코드를 바로 클립보드에 담아 CSS나 디자인 도구에 붙여넣으세요. 변환 수식이 서버가 아닌 브라우저에 들어 있어, 아직 공개 전인 브랜드 컬러를 넣어도 밖으로 새지 않습니다.
네 값을 한눈에 두고 골라 쓰기
이 변환기의 쓸모는 네 표기가 동시에 뜬다는 데 있습니다. 스타일시트에는 HEX를 붙이고, 반투명 오버레이가 필요하면 옆의 RGB 값을 rgba로 감싸 쓰고, 인쇄 시안에는 CMYK를 참고하는 식으로 상황마다 필요한 칸만 복사하면 됩니다.
색을 조금씩 굴려 보고 싶다면 HSL 쪽을 보세요. 채도(S)를 낮추면 색이 차분해지고, 명도(L)를 올리면 파스텔에 가까워집니다. 세 값이 눈앞에서 함께 움직이니 감이 아니라 숫자로 미세 조정할 수 있습니다.
- 버튼 기본색과 hover색: 색상·채도는 두고 명도만 다르게 두 값을 뽑아 두면 상태 전환이 매끄럽습니다.
- 본문 글자색: HSL의 명도(L)가 60%를 넘는 색을 흰 배경 본문에 쓰면 대체로 흐릿합니다. 대비 검사로 확인하세요.
- 브랜드 팔레트: 같은 색상(H)에서 명도만 단계별로 나누면 톤이 통일된 색 계열이 만들어집니다.
자주 쓰는 CSS 명명색
CSS는 색을 코드 대신 이름으로도 받습니다. black·white처럼 뻔한 것 말고도 tomato나 dodgerblue 같은 이름이 표준에 들어 있어, 급하게 시안을 잡을 때 요긴합니다. 다만 이름은 148개로 정해져 있어, 브랜드 색처럼 미묘한 값은 결국 HEX나 RGB로 적어야 합니다.
| CSS 이름 | HEX | RGB |
|---|---|---|
| black | #000000 | rgb(0, 0, 0) |
| white | #FFFFFF | rgb(255, 255, 255) |
| tomato | #FF6347 | rgb(255, 99, 71) |
| gold | #FFD700 | rgb(255, 215, 0) |
| dodgerblue | #1E90FF | rgb(30, 144, 255) |
| rebeccapurple | #663399 | rgb(102, 51, 153) |