색상 코드를 변환하고 CSS에 적용하기
디자인 시안의 HEX 색상을 CSS의 RGB나 HSL로 바꾸거나, 투명도가 있는 배경색의 값을 확인할 때 사용합니다. 세 입력칸 중 하나를 수정하면 다른 두 칸과 미리보기가 즉시 바뀝니다. 별도의 실행 버튼은 없습니다.
- 색상 값만 붙여넣습니다. HEX 칸에는
#336699, RGB 칸에는rgb(51, 102, 153)처럼 넣습니다.color:나 끝의 세미콜론은 빼세요. - 변환 결과와 미리보기를 확인합니다. HEX 앞의 색상 버튼으로 고를 수도 있습니다. 색상 선택기는 불투명 색을 선택하므로 선택 시 알파값이 1로 바뀝니다.
- 원하는 형식의 복사 버튼을 누릅니다. CSS에서는
color: #336699;또는background-color: rgba(51, 102, 153, 0.5);처럼 속성값으로 사용하세요.
바로 확인하는 변환 예시
아래 예시 버튼을 누르면 입력칸과 미리보기에 해당 색을 적용합니다.
| HEX 예시 | RGB | HSL |
|---|---|---|
| rgb(51, 102, 153) | hsl(210, 50%, 40%) | |
| rgb(255, 0, 0) | hsl(0, 100%, 50%) | |
| rgb(128, 128, 128) | hsl(0, 0%, 50.2%) | |
| rgba(0, 0, 0, 0.501961) | hsla(0, 0%, 0%, 0.501961) |
입력 형식과 범위
- HEX:
#RGB,#RGBA,#RRGGBB,#RRGGBBAA를 받습니다. #은 생략할 수 있고 대소문자는 구분하지 않습니다.#0f08은#00ff0088로 확장됩니다. - RGB: 각 채널은 0~255의 정수입니다.
rgb(255, 0, 0),rgba(255, 0, 0, 0.5)처럼 쉼표를 사용하세요. - HSL: 색조는 도 단위 숫자, 채도·명도는 0~100%입니다.
hsl(210, 50%, 40%)처럼 입력합니다. 색조는 360도 주기로 순환하므로 -30도는 330도로 처리합니다. - 지원하지 않는 형식: 색상 이름, CSS 변수, 공백·슬래시 문법, RGB 퍼센트, CMYK, OKLCH, Display P3는 변환하지 않습니다. 지원하지 않는 값을 넣으면 오류가 표시됩니다.
투명도와 반올림에서 헷갈리는 점
8자리 HEX의 마지막 2자리는 0~255로 표현하는 알파값입니다. 80은 128이므로 128 ÷ 255 ≈ 0.501961입니다. 따라서 #00000080은 정확히 50%가 아니라 약 50.2% 불투명한 검정입니다. rgba(0, 0, 0, 0.5)를 HEX로 바꾸면 가장 가까운 바이트인 80으로 반올림됩니다.
RGB는 정수, HSL은 소수 둘째 자리, HEX에서 읽은 알파는 소수 여섯째 자리까지 표시합니다. 포맷을 여러 번 왕복하면 반올림 차이가 생길 수 있으므로 원본 색상도 보관하세요. 투명 색은 배경과 합성되어 보이고 모니터의 색상 설정에 따라서도 인상이 달라집니다. 이 도구는 화면 색의 인쇄 결과나 글자 대비의 접근성 적합성을 판정하지 않습니다. HEX 색상 문법 참고
문제 해결
값을 입력했는데 미리보기가 그대로입니다.
입력 중인 값이 지원 형식에 맞지 않으면 다른 필드와 미리보기는 마지막 유효한 색을 유지합니다. 입력 아래 오류를 먼저 해결하세요. RGB가 255를 넘거나 알파가 0~1 범위를 벗어나면 자동 보정하지 않고 오류를 표시합니다.
반투명 색이 예상과 다르게 보입니다.
색 자체와 배경색의 조합을 확인하세요. 미리보기의 체크무늬는 투명도를 구분하기 위한 배경입니다. 실제 페이지의 흰색·검정색 배경에 적용한 모습은 서로 다를 수 있습니다.
복사할 수 없다고 나옵니다.
클립보드 접근 권한이 제한되어 있을 수 있습니다. 선택된 입력값을 직접 복사하세요. 형식 오류가 있는 칸은 복사 전에 유효한 색상으로 수정해야 합니다.