📋 사용 방법
- HEX(예: #10ACDD) 또는 RGB(예: 16, 172, 221)를 입력합니다. 한쪽만 넣어도 다른 형식으로 자동 변환됩니다.
- 또는 팔레트에서 색을 고릅니다.
- 어울리는 색 추천 영역에서 보색·유사색·삼각색·분할 보색·단색 계열 조합을 확인합니다.
계산은 페이지 안에서만 이루어지며 서버로 색 값을 보내지 않습니다.
어울리는 색 찾기 – HEX·RGB 변환과 색 조합 추천
하나의 색을 정했을 때 버튼·배경·포인트로 쓸 짝꿍 색을 고민할 때 쓰는 도구예요. 색상환 규칙에 따라 보색, 유사색, 삼각색 등 조합을 보여 줍니다. 웹·앱 UI나 브랜드 팔레트를 잡을 때 참고용으로 쓰기 좋고, 입력한 색 정보는 서버로 전송되지 않습니다.
어울리는 색 추천
✨ 색 조합 추천이 도움이 되는 이유
색상환에서의 위치 관계(보색, 유사색, 삼각색 등)를 바탕으로 조화를 빠르게 탐색할 수 있습니다. 정답이 아니라 출발점으로 두고, 브랜드 가이드나 접근성(대비) 요구에 맞춰 조정하면 됩니다.
모니터·주변 조명에 따라 같은 코드도 다르게 보일 수 있어요. 인쇄물은 CMYK 변환 시 색이 달라질 수 있다는 점도 참고하세요.
특징
- HEX와 RGB를 서로 변환하고 팔레트에서 직접 고를 수 있습니다.
- 보색·유사색·삼각색·분할 보색·단색 계열 등 5가지 유형의 추천을 봅니다.
- 색 값 처리는 브라우저에서 이루어지며 Webooro 서버로 전송되지 않습니다.
랜딩 페이지 버튼 색, 카드뉴스 포인트 컬러, 대시보드 차트 색상처럼 “한 가지 메인 컬러에서 전체 팔레트를 잡고 싶을 때” 활용할 수 있습니다.
이럴 때 써 보세요
- 메인 컬러 하나로 서브 컬러 후보를 빠르게 볼 때
- CSS·디자인 툴에 넣을 HEX/RGB 값을 맞출 때
- 강조색과 배경색의 대비를 눈으로 가늠할 때
- 색상환 이론을 코드로 일일이 계산하기 귀찮을 때
전문 툴과 비교할 때
피그마·일러스트레이터 등에는 더 세밀한 팔레트 기능이 있지만, 브라우저만으로 빠르게 코드와 조합을 보고 싶을 때 이 페이지가 가볍습니다. 서버로 색 데이터를 보내지 않습니다.
WCAG 대비율 자동 검사가 필요하면 전용 접근성 도구와 함께 검증하는 것이 좋습니다.
❓ 자주 묻는 질문
- Q. 정말 무료인가요?
- 네. 이 색 조합 도구는 별도 요금 없이 이용할 수 있습니다.
- Q. 회원가입이 필요한가요?
- 아니요. 로그인 없이 이 페이지에서 바로 사용할 수 있습니다.
- Q. 입력한 색이 서버로 전송되나요?
- 아니요. 색 계산은 브라우저에서만 이루어지며 Webooro 서버로 값이 전송되지 않습니다.
- Q. HEX와 RGB는 어떻게 변환되나요?
- HEX 또는 RGB 중 하나를 입력하면 다른 형식으로 자동 변환됩니다. 웹 개발에서는 HEX, 디자인 툴에서는 RGB를 많이 사용합니다.
- Q. 추천 색을 복사할 수 있나요?
- 각 추천 색 옆에 표시된 HEX·RGB 값을 직접 복사해 사용할 수 있습니다. 클릭 시 복사 기능이 있다면 활용해 보세요.
- Q. HEX 색상 코드란 무엇인가요?
- HEX 코드는 색상을 16진수 6자리로 표현하는 방식입니다(예: #FF5733). 앞 두 자리는 빨강(R), 가운데 두 자리는 초록(G), 뒤 두 자리는 파랑(B)을 나타냅니다. 웹 CSS, 디자인 툴에서 널리 쓰입니다.
- Q. 어떤 색상 조화 방식을 제공하나요?
- 보색(Complementary), 유사색(Analogous), 삼각색(Triadic), 분할 보색(Split-Complementary), 단색(Monochromatic) 등 주요 색상 조화 방식을 지원합니다. 각 방식마다 어울리는 색 조합을 자동으로 제안합니다.
- Q. RGB와 HEX 어느 쪽을 써야 하나요?
- CSS와 HTML에는 주로 HEX를 사용합니다. Figma, Photoshop, Illustrator 등 디자인 툴에서는 RGB를 많이 사용합니다. 두 형식은 동일한 색상을 표현하며 언제든지 서로 변환할 수 있습니다.
🎨 색을 입력하거나 고른 뒤 추천 조합과 HEX·RGB를 활용해 보세요.
