헥스코드 · 색상코드 찾기 – HEX 색상 선택기

색상표에서 원하는 색상을 고르면 HEX, RGB, RGBA, HSLA 코드가 바로 생성됩니다.
클릭 한 번으로 클립보드에 복사할 수 있어 CSS 작업이나 디자인 툴에 바로 붙여넣을 수 있습니다.

투명도(Alpha) 슬라이더로 RGBA 값을 세밀하게 조정할 수 있으며, 설치 없이 브라우저에서 바로 사용할 수 있습니다.

사진이나 로고에서 색상을 추출해야 한다면 이미지 색상 추출기를 함께 사용할 수 있습니다.
Base64 인코딩, URL 인코딩 등 웹 개발 도구도 무료로 제공하고 있습니다.

이미지를 업로드하면 자르기 보정 텍스트 추가 등으로 편집되는 과정 | 이미지 편집기, 사진 편집, 온라인 편집
이미지 색상 추출

설명:

  • 첫 번째 슬라이더를 좌우로 움직여 원하는 색상을 선택하세요.
  • 두 번째 슬라이더로 투명도(Alpha)를 자유롭게 조절할 수 있습니다.
  • 색상 코드 영역의 화살표를 눌러 HEX, RGBA 등 다양한 포맷으로 전환하세요.
  • 복사 아이콘을 클릭하면 선택한 색상 코드가 클립보드에 즉시 저장됩니다.
색상 확대 보기

HEX Color Picker 100% 활용법 — 색상 선택부터 코드 복사까지

이 온라인 HEX Color Picker는 별도 설치 없이 브라우저에서 즉시 사용할 수 있습니다.
색상 팔레트에서 원하는 영역을 클릭하거나, HEX 코드를 직접 입력하여 색상을 정확히 지정할 수 있습니다.

투명도(Alpha) 슬라이더를 조절하면 RGBA 및 HSLA 포맷 코드가 실시간으로 업데이트됩니다.
생성된 코드는 복사 아이콘을 클릭하면 클립보드에 즉시 저장되며, CSS 파일, Figma, Adobe XD, VS Code 등 모든 개발·디자인 환경에 바로 붙여넣기 할 수 있습니다.

이미지 색상 추출 도구와 함께 사용하면 더욱 강력한 색상 워크플로를 구성할 수 있습니다.

디자이너와 개발자를 위한 CSS 색상 코드 완벽 가이드

CSS에서 색상을 표현하는 방법은 크게 HEX, RGB, RGBA, HSL, HSLA 5가지입니다.
HEX 코드는 #RRGGBB 형식으로 가장 널리 사용되며, RGBA는 투명도를 함께 지정할 수 있어 UI 레이어 디자인에 적합합니다.

HSL/HSLA는 색조(Hue), 채도(Saturation), 명도(Lightness)를 직관적으로 조정할 수 있어 색상 테마 설계에 유리합니다.
이 도구는 모든 포맷을 즉시 상호 변환하므로, 어떤 환경에서도 정확한 색상 코드를 바로 적용할 수 있습니다.

브랜드 컬러를 정확하게 유지하는 색상 관리 방법

브랜드 아이덴티티에서 색상의 일관성은 신뢰와 인지도를 결정하는 핵심 요소입니다.

로고, 웹사이트, 인쇄물, 광고 소재마다 서로 다른 색상 포맷이 사용되기 때문에, HEX ↔ RGB ↔ CMYK 변환이 정확하게 이루어져야 합니다.

이 색상 코드 변환기를 사용하면 화면(모니터)용 HEX·RGB 코드와 인쇄용 CMYK 코드를 손쉽게 확인하고 관리할 수 있습니다.
디자이너와 마케터 모두 북마크해두면 유용한 도구입니다.

이미지에서 HEX 색상 코드를 추출하는 방법

참고 이미지나 레퍼런스 사진에서 원하는 색상을 바로 추출하고 싶다면 이미지 색상 추출 도구를 함께 활용하세요.

이미지를 업로드하고 원하는 픽셀을 클릭하면 해당 위치의 HEX, RGB 색상 코드를 즉시 확인할 수 있습니다.

로고 색상 파악, 경쟁사 웹사이트 색상 분석, 사진 기반 색상 팔레트 제작 등 다양한 상황에서 활용됩니다.
색상 추출 후 이 페이지에서 바로 RGB → HEX 변환하여 CSS에 적용할 수 있습니다.

웹 접근성을 고려한 색상 대비 선택하기

웹 접근성(WCAG) 기준에서 텍스트와 배경색의 명도 대비(Contrast Ratio)는 최소 4.5:1 이상이어야 합니다.

색상 코드를 선택할 때 밝은 배경에는 어두운 텍스트, 어두운 배경에는 밝은 텍스트를 배치하는 것이 기본 원칙입니다.

HEX Color Picker로 색상을 실시간 확인하면서 명도 차이를 시각적으로 비교하고, RGB 수치를 기반으로 대비를 계산하면 접근성 친화적인 UI를 효율적으로 설계할 수 있습니다.
색상 팔레트 확정 전 반드시 대비 비율을 점검하는 습관을 갖추세요.

자주 묻는 질문

HEX 색상 코드는 웹·앱 개발에서 색상을 표현하는 표준 방식으로, #RRGGBB 형식의 6자리 16진수로 구성됩니다.

예를 들어 #FF0000은 빨강(Red), #00FF00은 초록(Green), #0000FF은 파랑(Blue)을 의미합니다.
앞 두 자리가 빨강, 중간 두 자리가 초록, 마지막 두 자리가 파랑의 강도(0~255)를 16진수로 나타냅니다.

투명도가 필요한 경우 #RRGGBBAA 형식의 8자리 HEX 코드를 사용하거나, RGBA 포맷으로 변환하여 CSS에 적용할 수 있습니다.

각 색상 포맷은 사용 목적에 따라 구분됩니다.

  • HEX: #RRGGBB 형식. CSS·HTML에서 가장 널리 사용되는 표준 포맷입니다.
  • RGB: rgb(255, 0, 0) 형식. 빨강·초록·파랑 각각 0~255 값으로 표현합니다.
  • RGBA: rgba(255, 0, 0, 0.5) 형식. RGB에 투명도(Alpha) 값을 추가합니다.
  • HSLA: hsla(0, 100%, 50%, 1) 형식. 색조·채도·명도·투명도로 표현하여 색상 조정에 직관적입니다.
  • CMYK: cmyk(0%, 100%, 100%, 0%) 형식. 청록·자홍·노랑·검정 잉크 비율로 표현하며 인쇄 디자인에 주로 사용됩니다.

이 HEX Color Picker에서는 모든 포맷을 실시간으로 상호 변환할 수 있습니다.
인쇄 디자인에서는 CMYK 포맷도 함께 사용됩니다.

네, 별도 설치나 회원가입 없이 브라우저에서 즉시 사용할 수 있습니다.

PC, 태블릿, 스마트폰 등 모든 기기에서 동작하며, Chrome, Safari, Firefox, Edge 등 주요 브라우저를 모두 지원합니다.
비볼디 온라인 도구는 완전 무료로 제공됩니다.

색상 선택 후 코드 입력창 옆의 복사 아이콘()을 클릭하면 해당 색상 코드가 클립보드에 즉시 저장됩니다.

복사된 코드는 Ctrl+V (Mac: Cmd+V)로 CSS 파일, Figma, VS Code, Adobe XD 등 어떤 환경에도 바로 붙여넣을 수 있습니다.
HEX, RGB, RGBA, HSLA 각 포맷별로 개별 복사가 가능합니다.

이미지 파일에서 직접 색상을 추출하려면 비볼디의 이미지 색상 추출 도구를 이용하세요.

이미지를 업로드하고 원하는 픽셀을 클릭하면 해당 위치의 HEX 및 RGB 색상 코드를 즉시 확인할 수 있습니다.
로고 색상 파악, 사진 기반 팔레트 제작, 경쟁사 색상 분석 등 다양한 용도로 활용됩니다.

네, 이 도구는 HEX, RGB, RGBA, HSLA, CMYK 포맷 간 상호 변환을 모두 지원합니다.

웹 개발용 HEX·RGB·RGBA·HSLA는 물론, 인쇄 디자인에 필요한 CMYK 코드도 실시간으로 변환할 수 있습니다.

색상 선택 후 각 포맷의 코드를 클릭 한 번으로 복사하여 CSS, Figma, Illustrator, InDesign 등 어떤 환경에도 바로 적용하세요.