색상 변환기

색상 변환기란?

색상 변환기는 웹 디자인과 개발에서 필수적인 HEX, RGB, HSL 세 가지 색상 형식을 실시간으로 상호 변환하는 온라인 도구입니다. 디자이너가 포토샵에서 추출한 RGB 값을 CSS에 사용할 HEX 코드로 변환하거나, 기존 색상의 밝기만 조절하기 위해 HSL로 변환하는 등 다양한 상황에서 활용할 수 있습니다.

색상 값을 입력하면 즉시 다른 모든 형식으로 변환되며, 미리보기를 통해 실제 색상을 확인할 수 있습니다. 변환된 색상 코드는 클릭 한 번으로 복사하여 바로 사용할 수 있어 작업 효율을 크게 높여줍니다.

이런 상황에서 사용하세요

• 웹 개발 – 디자인 시안의 RGB 색상을 CSS에서 사용할 HEX 코드로 변환할 때
• UI/UX 디자인 – 브랜드 색상의 밝기나 채도를 조절한 변형 색상을 만들 때 (HSL 활용)
• 색상 팔레트 구성 – 기준 색상에서 같은 색조의 다양한 밝기 색상을 추출할 때
• 크로스 플랫폼 작업 – 포토샵(RGB), 일러스트레이터(HEX), CSS(다양한 형식) 간 색상 값 통일
• 접근성 검토 – 색상 대비 검사를 위해 정확한 색상 값을 확인할 때
• 프레젠테이션 – 발표 자료에 사용할 색상 코드를 빠르게 확인하고 복사할 때

주요 기능

• 실시간 양방향 변환 – HEX, RGB, HSL 어떤 값을 입력해도 나머지 형식이 즉시 업데이트됩니다. 수동으로 변환 버튼을 누를 필요가 없습니다.
• 시각적 컬러 피커 – 색상환에서 직접 색상을 선택할 수 있습니다. 정확한 값을 모르더라도 원하는 색상을 시각적으로 찾을 수 있습니다.
• CSS 코드 즉시 복사 – color: #D4AF37; 형태의 CSS 코드를 바로 복사할 수 있습니다. HEX, RGB, HSL 세 가지 형식 중 선택 가능합니다.
• 색상 히스토리 자동 저장 – 사용한 색상이 자동으로 저장되어 이전에 사용한 색상을 쉽게 다시 불러올 수 있습니다. 브라우저를 닫아도 유지됩니다.
• 랜덤 색상 생성 – 영감이 필요할 때 랜덤 색상을 생성하여 새로운 색상 아이디어를 얻을 수 있습니다.
• 직관적인 입력 – RGB는 0-255 범위의 슬라이더, HSL은 색상환(0-360°)과 백분율로 입력하여 각 형식의 특성에 맞게 조작할 수 있습니다.

사용 방법

1. 색상 선택 – 컬러 피커를 클릭하여 색상환에서 원하는 색상을 선택하거나, HEX/RGB/HSL 입력 필드에 알고 있는 값을 직접 입력하세요.
2. 실시간 확인 – 입력한 색상이 미리보기 영역에 즉시 표시됩니다. 동시에 세 가지 형식 모두 자동으로 계산되어 표시됩니다.
3. 코드 복사 – 필요한 형식 옆의 “복사” 버튼을 클릭하면 클립보드에 복사됩니다. CSS 코드가 필요하면 하단의 “CSS 복사” 버튼을 사용하세요.
4. 히스토리 활용 – 이전에 사용한 색상은 하단 히스토리에 자동 저장됩니다. 색상 칩을 클릭하면 해당 색상이 즉시 적용됩니다.

유사 도구와 차이 (중복 방지 안내)

1) 대상 사용자 차이

색상 변환기는 HEX/RGB/HSL 코드 변환이 필요한 디자이너·개발자용입니다. 색상 이름을 찾으려면 색상 이름 찾기, 색을 섞어 새 팔레트를 만들려면 색상 혼합기를 사용하세요.

2) 입력값/산식 차이

• 본 도구: 단일 색상 코드 포맷 변환(HEX/RGB/HSL)
• 이름 찾기: 입력 색상과 DB 색명 매칭
• 혼합기: 다중 색상 비율 혼합

3) 결과/활용 시나리오 차이

• 본 도구 활용: CSS 코드 작성/디자인 협업 포맷 통일
• 이름/혼합 도구 활용: 네이밍 탐색, 팔레트 제작

색상 형식 상세 설명

HEX (16진수 색상 코드)

웹에서 가장 널리 사용되는 색상 표현 방식입니다. #RRGGBB 형태로 빨강(R), 초록(G), 파랑(B) 값을 각각 00부터 FF까지의 16진수로 표현합니다.

• 예시: #D4AF37 (골드), #FF5733 (주황), #3498DB (파랑)
• 단축 표기: 각 색상 채널이 같은 문자로 반복되면 3자리로 줄일 수 있습니다. #FF0000 → #F00
• 장점: 짧고 간결함, CSS/HTML에서 표준으로 사용, 복사/붙여넣기가 편리함
• 사용처: CSS 스타일시트, HTML 인라인 스타일, 디자인 시스템 문서화

RGB (빨강, 초록, 파랑)

빛의 삼원색을 기반으로 한 가산 혼합 색상 모델입니다. 각 색상 채널은 0부터 255까지의 값을 가지며, 세 색상이 혼합되어 최종 색상이 결정됩니다.

• 예시: rgb(212, 175, 55) (골드), rgb(255, 255, 255) (흰색), rgb(0, 0, 0) (검정)
• 작동 원리: 모든 값이 0이면 검정, 모든 값이 255이면 흰색이 됩니다
• 장점: 직관적인 색상 혼합 이해, 포토샵 등 그래픽 툴과 호환, 프로그래밍에서 색상 계산 용이
• 사용처: 그래픽 소프트웨어, JavaScript 색상 조작, 애니메이션 색상 전환

HSL (색상, 채도, 밝기)

인간의 색상 인지 방식에 가까운 표현법입니다. 색상환의 각도(Hue), 색의 선명도(Saturation), 밝고 어두운 정도(Lightness)로 색상을 정의합니다.

• 예시: hsl(46, 67%, 52%) (골드), hsl(0, 100%, 50%) (순수한 빨강)
• H (색상): 0° = 빨강, 60° = 노랑, 120° = 초록, 180° = 청록, 240° = 파랑, 300° = 자홍
• S (채도): 0% = 회색조, 100% = 순수한 색상
• L (밝기): 0% = 검정, 50% = 순수 색상, 100% = 흰색
• 장점: 같은 색조에서 밝기/채도 조절이 쉬움, 색상 팔레트 생성에 유용, 색상 관계 이해가 직관적
• 사용처: CSS 변수를 활용한 테마 시스템, 호버 효과(밝기만 변경), 일관된 색상 팔레트 구성

색상 선택 팁

• 브랜드 색상 변형: 기본 브랜드 색상을 HSL로 변환한 뒤, L(밝기) 값만 조절하면 같은 색조의 밝은/어두운 변형을 쉽게 만들 수 있습니다.
• 보색 찾기: HSL에서 H(색상) 값에 180을 더하면 보색을 얻을 수 있습니다. 예: 파랑(240°)의 보색은 노랑(60°)입니다.
• 유사색 찾기: H 값을 30° 간격으로 조절하면 조화로운 유사색 팔레트를 만들 수 있습니다.
• 접근성 고려: 텍스트와 배경의 색상 대비는 WCAG 기준 4.5:1 이상을 권장합니다. 밝기(L) 차이가 충분한지 확인하세요.

상세 설명

색상 변환기 결과는 입력한 값과 선택한 조건을 기준으로 계산됩니다.

최종 판단이 필요한 경우에는 공식 자료나 전문가 검토와 함께 활용하세요.

실사용 예시 3가지

• 초보: 디자이너가 전달한 RGB(34, 197, 94)를 HEX로 변환해 CSS 변수 --brand-primary로 등록합니다.
• 일반: 같은 색조를 유지한 상태에서 HSL의 밝기(L)만 ±10% 조절해 버튼 기본/hover/disabled 3단계 색을 빠르게 만듭니다.
• 엣지: 다국어 페이지에서 테마 전환(라이트/다크) 시 HEX ↔ HSL 변환값을 비교해 접근성 기준(명암비) 유지 여부를 점검합니다.

결과 해석 가이드

HEX는 배포 코드 관리와 디자인 토큰 문서화에, RGB는 JavaScript 동적 스타일 계산에, HSL은 톤 조정(채도/밝기) 실험에 가장 효율적입니다. 동일 색이라도 포맷별 쓰임이 다르므로 작업 단계별로 분리해서 저장하세요.

역변환 시 소수점 반올림으로 ±1 오차가 보일 수 있으나 일반적인 UI 시각 차이는 거의 없습니다. 다만 브랜드 CI 색상은 최종 시안에서 원본 코드와 다시 대조하는 것을 권장합니다.

오차·한계·주의사항 및 기준 정보

본 도구는 표준 sRGB/ HSL 변환식을 따르며, 디스플레이 색역(P3)이나 인쇄 색역(CMYK)과 1:1 동일하지 않을 수 있습니다. 실물 출력물·인쇄물 적용 전에는 별도 색교정이 필요합니다.

• 기준 확인일: 2026-03-02
• 신청기간: 상시(브라우저 표준 변경 시 즉시 재검토)
• 현재 상태: 정상 운영(표준 스펙 기반 계산)
• 검증일: 2026-03-02

공식 참고자료

• W3C CSS Color Module Level 4
• MDN: CSS color value
• W3C WCAG 2.2 Contrast Minimum

자주 묻는 질문