HEX RGB 변환기 무료 온라인: HEX 색상을 RGB로 즉시 변환

A 스포이드 도구는 브라우저 안뿐 아니라 전체 화면에서 색상을 가져옵니다. 아이콘을 클릭한 후 Slack, Figma, PDF 등 화면의 아무 픽셀이나 가리키세요. 클릭하면 색상이 고정됩니다. 일부 운영체제는 먼저 화면 녹화 권한을 요구할 수 있습니다.

A 네, 축약형 HEX 코드도 잘 작동합니다. 저희 변환기가 #FFF를 자동으로 #FFFFFF(흰색)로 확장합니다. #F06은 #FF0066이 됩니다. 전체 RGB, HSL, RGBA 값이 즉시 표시됩니다. 단, 축약형은 각 쌍의 숫자가 동일할 때만 가능합니다. #ABC는 #AABBCC가 됩니다.

A 물론입니다. 마케팅 팀은 #E63946 빨간색이 웹 배너, 소셜 미디어 게시물, 이메일 템플릿에서 동일하게 보이도록 이 도구를 사용합니다. HEX 코드를 붙여넣으면 변환기가 Photoshop용 RGB, 오버레이 효과용 RGBA, 색상 이론 조정용 HSL 값을 즉시 제공합니다. 하나의 HEX 값을 모든 결과물에 동기화하면 히어로 섹션 그라데이션이 한 톤도 어긋나지 않습니다. 팁: 출력값을 브랜드 스타일 가이드에 저장해 누구도 눈대중으로 근사치를 사용하지 못하게 하세요.

A HEX 코드를 변환기에 붙여넣고 RGB 값을 가져오세요. 그런 다음 전경색과 배경색을 대비 검사기에 입력합니다. 14pt 미만의 일반 텍스트(굵게)는 흰색 또는 검은색 배경에 대해 4.5:1 비율을 목표로 하세요. 저희 도구는 대비를 직접 계산하지 않지만, 정확한 숫자를 제공해 과정을 빠르게 합니다. WCAG AA는 4.5:1, AAA는 7:1이 필요합니다. 팁: #CCCCCC 같은 밝은 회색은 흰색 배경에서 실패합니다.

A 네, #000000은 정확히 rgb(0, 0, 0)으로 매핑됩니다 — 빨강, 초록, 파랑 빛이 전혀 없는 순수한 검은색입니다. 하지만 모니터는 백라이트 누설 때문에 진정한 검은색을 표시하지 못합니다. 가장 어두운 픽셀조차 rgb(10, 10, 10) 또는 그보다 밝게 보일 수 있습니다. OLED 디스플레이용 디자인이라면 #000000을 사용해 깊은 검은색을 구현하세요. 일반 LCD에서는 #1a1a1a 같은 짙은 회색이 순수 검은색보다 더 검게 보이는 경우가 많습니다.

A RGB는 빨강, 초록, 파랑 세 값만 줍니다. RGBA는 여기에 투명도(0~1)를 뜻하는 알파가 추가되죠. 히어로 이미지 위에 내비게이션 바를 겹칠 때 RGBA를 쓰면 배경이 비쳐 보입니다. 변환기에 #3498DB를 붙여넣으면 rgb(52, 152, 219)와 rgba(52, 152, 219, 1)가 같이 나옵니다. 끝의 1은 완전 불투명이라는 뜻. 하지만 단색에는 알파가 필요 없어요. 호버 상태나 모달 오버레이에만 아끼세요. 팁: 0.7과 0.5로 테스트해서 덜 거슬리는 쪽을 고르는 게 좋습니다.

A 기능적 차이는 없습니다. 표기 방식만 다를 뿐이죠. 저희 도구는 #fff를 자동으로 #ffffff로 확장하므로 어떤 경우든 동일한 RGB 값을 얻습니다. 축약형은 각 문자를 두 배로 늘리기 때문입니다. #f는 ff가 되고, #c는 cc가 됩니다. 하지만 주의할 점이 있습니다. #369와 #336699는 같은 색이 아닙니다. 축약형 #369는 #336699로 확장되지, 숫자를 보고 예상하는 #036090이 아닙니다. 헷갈리면 항상 6자리 전체 코드를 사용하세요.

A 아니요. #FF5733 같은 코드를 입력창에 붙여넣으면 rgb(255, 87, 51)이 바로 나오고, HSL과 RGBA도 함께 확인할 수 있습니다. 모든 처리는 브라우저 안에서 끝나니 설치할 것도, 업로드할 것도 없습니다. Figma나 VS Code 옆에 이 탭을 띄워두는 디자이너도 많아요. 팁 하나: 즐겨찾기에 추가해두세요. 생각보다 자주 쓰게 됩니다.

A 스타일시트에서 HEX와 RGB를 섞어 쓴다고 해서 검색엔진이 SEO 페널티를 주지는 않습니다. 하지만 문법 오류가 있으면 브라우저가 렌더링할 때 약간의 지연이 생길 수 있습니다. 저희 도구는 rgb(241, 196, 15) 같은 깔끔한 CSS용 값을 바로 출력해 줍니다. 브랜드 코드를 한 번 붙여넣고 올바른 문자열을 가져가세요.

A Tailwind는 콤마 대신 59 130 246처럼 공백으로 구분된 숫자를 요구합니다. 저희 변환기는 기본적으로 표준 CSS 문자열을 출력합니다. 모던 유틸리티 클래스를 쓰려면 이 콤마들을 직접 지워야 합니다. 프레임워크 설정을 만질 때 개발자들이 이 문법 차이를 자주 놓칩니다. 출력창에서 숫자만 바로 복사해서 에러를 예방하세요.