Softonic

색상 코드 변환기

단계 1 / 2
다음

색상을 HEX(#ff6600 또는 #f60), rgb(255, 102, 0), 쉼표로 구분된 255, 102, 0 또는 hsl(24, 100%, 50%) 형식으로 붙여넣으면 변환기가 나머지 두 형식으로 즉시 변환해 줍니다. 실시간 색상 견본 미리보기와 형식별 원클릭 복사 기능을 제공합니다.

색상 코드 변환의 작동 방식

  1. 1

    지원되는 형식으로 색상을 입력하세요

    HEX(#abc, #abcdef), rgb(r, g, b), 쉼표로 구분된 r, g, b 또는 hsl(h, s%, l%)을 지원합니다.

  2. 2

    내부 표현으로 해석합니다

    이 도구는 값을 내부적으로 RGB로 변환한 다음, 그 값에서 HEX와 HSL에 해당하는 값을 도출합니다.

  3. 3

    모든 형식을 표시합니다

    해당하는 HEX, RGB, HSL 문자열이 나란히 표시됩니다.

  4. 4

    실시간 미리보기 견본

    변환된 색상을 한눈에 보여 주므로 복사하기 전에 결과를 확인할 수 있습니다.

지원되는 형식

형식 예시 용도
HEX 3자리 #F66 축약형. 같은 숫자가 반복되는 색상에만 사용
HEX 6자리 #FF6B6B CSS와 그래픽 디자인의 기본값
RGB rgb(255, 107, 107) CSS, JS, 디자인 소프트웨어
쉼표 구분 255, 107, 107 함수 구문 없이 쓴 RGB와 동일
HSL hsl(0, 100%, 71%) 색상/채도/명도를 다루기 쉬움

어떤 경우에 무엇을 쓸까

  • 정적인 CSS와 디자인 전달에는 HEX.
  • 각 채널을 JavaScript나 디자인 소프트웨어로 넘길 때는 RGB.
  • 밝기나 채도를 조정할 때는 HSL. RGB보다 직관적인 모델입니다.

HSV, CMYK, LAB, LCH, OKLCH 등의 형식도 디자인 도구에 있습니다. 같은 색을 다르게 표현한 것일 뿐이며, 이 변환기는 위의 세 가지 핵심 웹 형식에 집중합니다.

정확도

  • HEX, RGB, HSL 간의 변환은 정확합니다. HEX와 RGB는 같은 색 모델이고, HSL은 표준 공식으로 RGB에서 도출됩니다.
  • HSL 값은 정수로 반올림되므로 왕복 변환 시 마지막 자릿수가 달라질 수 있습니다. 보이는 색은 동일합니다. 비트 단위로 정확한 복사가 필요하면 HEX를 사용하세요.

자주 묻는 질문

폭넓은 호환성을 원하면 HEX 또는 rgb()를 쓰세요. 가독성을 원하면 hsl()을 쓰세요. 최신 브라우저는 oklch() 등 다른 형식도 지원하지만, HEX가 가장 안전한 기본 선택입니다.

아니요. 변환기는 불투명한 색상만 받습니다. 3자리 또는 6자리 HEX와 알파 채널이 없는 rgb(), hsl()입니다. rgba()나 8자리 HEX는 CSS에서 직접 사용하세요.

아니요. 변환기가 받는 형식은 세 가지 숫자 형식뿐입니다. 색상 이름은 색상 선택기나 온라인 변환으로 먼저 HEX로 바꿔 주세요.

HSL은 색상, 채도, 명도를 정수로 표시하므로 왕복 변환 시 값이 1포인트 달라질 수 있습니다. 보이는 색은 동일합니다. 정확한 복사가 필요하면 HEX를 사용하세요.

관련 도구

FPS 카운터

requestAnimationFrame으로 브라우저 FPS를 측정하세요. 스무딩, 최소/최대 프레임레이트, 경고 임계값, 선택형 그래프를 제공합니다. 업로드나 API 없이 로컬에서 실행됩니다.

ASCII 표 참조

NUL, LF, DEL 같은 제어 문자를 포함해 모든 문자에 대한 10진수, 16진수, 8진수, 2진수, HTML 숫자 문자 참조를 담은 0부터 127까지의 전체 ASCII 표.

색상 혼합기

두 HEX 색상을 2-20개의 균등한 색상 견본으로 섞습니다. 양 끝 색상을 포함해 각 중간 색상을 대문자 HEX 코드로 확인하세요.

ASCII 이진수 변환기

ASCII 문자열을 이진수 표현으로 변환하세요. 각 문자는 8비트가 되고 공백으로 구분되어 프로토콜 추적이나 과제에 바로 붙여넣기 좋습니다.

색상 틴트 생성기

기준 색의 밝은 틴트를 생성합니다. 디자인 시스템 토큰, 배경, 호버 상태를 위한 3-20단계 스케일.

보색 찾기

어떤 입력에 대해서도 보색을 찾습니다. HSL 반대 색, 분할 보색 쌍, 그리고 접근성 있는 조합 제안을 반환합니다.

이 도구는 다른 언어로도 제공됩니다