색상 코드란?
웹 개발과 디자인에서 색상을 정확하게 지정하려면 색상 코드를 사용합니다. 가장 널리 쓰이는 세 가지 색상 표기법은 HEX, RGB, HSL입니다. 같은 색상이라도 표기 방식에 따라 다르게 보일 수 있어 변환 도구가 필요합니다. 디자이너는 포토샵에서 HEX 코드를 쓰고, CSS에서는 RGB나 HSL을 사용하는 등 상황에 따라 적절한 형식을 선택해야 합니다.
HEX 색상 코드
HEX(16진수) 색상 코드는 웹에서 가장 널리 사용되는 색상 표기법입니다. "#" 기호 뒤에 6자리 16진수(0~9, A~F)를 붙여 빨강(R), 초록(G), 파랑(B) 각 채널을 2자리씩 표현합니다. 예를 들어 #FF0000은 빨강, #00FF00은 초록, #0000FF은 파랑, #FFFFFF은 흰색, #000000은 검정입니다. CSS, HTML, 디자인 툴 어디서나 사용할 수 있어 가장 범용적인 형식입니다.
RGB 색상 모델
RGB는 빨강(Red), 초록(Green), 파랑(Blue) 세 가지 빛의 삼원색을 혼합하여 색상을 표현하는 방식입니다. 각 채널은 0~255의 값을 가지며, rgb(255, 0, 0)은 순수 빨강, rgb(255, 255, 255)는 흰색입니다. CSS에서 rgb() 함수로 직접 사용할 수 있으며, 투명도가 필요한 경우 rgba(255, 0, 0, 0.5)처럼 알파 채널을 추가할 수 있습니다. 디지털 화면은 RGB 모델로 색상을 표시하므로 화면에서 보이는 색상은 모두 RGB의 조합입니다.
HSL 색상 모델
HSL은 색조(Hue, 0~360도), 채도(Saturation, 0~100%), 밝기(Lightness, 0~100%)로 색상을 표현합니다. 사람의 색상 인식 방식과 가장 유사하여 직관적으로 색상을 조절할 수 있다는 장점이 있습니다. 예를 들어 "같은 색조에서 더 밝은 색"이 필요하면 Lightness 값만 올리면 됩니다. CSS에서 hsl() 함수로 사용하며, 색상 팔레트를 체계적으로 설계할 때 매우 유용합니다.
웹 개발에서 자주 쓰는 색상
| 색상명 | HEX | 용도 |
|---|---|---|
| Tailwind Blue | #3B82F6 | 기본 액센트, 링크 |
| Success Green | #10B981 | 성공, 완료 |
| Warning Amber | #F59E0B | 경고, 주의 |
| Error Red | #EF4444 | 에러, 삭제 |
| Gray 600 | #4B5563 | 본문 텍스트 |
이 도구의 주요 기능
컬러 피커로 시각적으로 색상을 선택하거나, HEX·RGB·HSL 필드에 직접 값을 입력하면 나머지 두 형식이 실시간으로 자동 변환됩니다. 각 필드 옆의 복사 버튼으로 클립보드에 바로 복사할 수 있어 CSS에 붙여넣기 편리합니다. 색상 단계(Shades) 행은 선택한 색상의 밝기 변형 9단계를 보여주며, 인기 색상 팔레트에서 자주 쓰이는 색을 한 번에 선택할 수 있습니다. 모든 처리는 브라우저에서 이루어지며 개인정보를 수집하지 않습니다.