무작위 HEX·RGB 색상 조합을 바로 만드는 랜덤 팔레트 생성기
색상 개수를 고르고 새 팔레트를 생성하면 HEX·RGB 값을 카드에서 바로 복사할 수 있습니다.
아직 생성 전입니다.
버튼이나 Space 키로 시작하세요.
히스토리 (0/50)
빠른 사용법
- 생성버튼 또는 Space 키
- 색상 복사카드를 클릭하거나 Enter
- 공유현재 URL에 색상 포함
- 저장브라우저 로컬 히스토리
바로 쓸 수 있게.
- 바로 보이는 화면입력 위치와 결과 위치를 또렷하게 둡니다.
- 결과 먼저핵심 결과를 앞에 두고, 과정은 필요할 때만 보여줍니다.
- 요구 줄이기가입이나 불필요한 정보 입력 없이 바로 쓰게 합니다.
랜덤 팔레트 가이드
랜덤 팔레트 생성기는 색상 개수를 고른 뒤 독립적인 무작위 RGB 값으로 새 팔레트를 만듭니다. 결과 카드에는 웹에서 바로 쓰기 좋은 HEX 코드와 RGB 값이 함께 표시되고, 색상 카드·공유·URL 복사·히스토리 기능으로 지금 만든 조합을 다시 확인할 수 있습니다.
이 도구는 특정 색상 이론에 맞춰 보정하지 않습니다. 각 색상은 빨강, 초록, 파랑 채널을 독립적인 난수 값으로 만든 뒤 HEX와 RGB 표기로 바꿔 보여 줍니다.
색상 팔레트와 무작위 생성의 쓸모
색상 팔레트는 한 프로젝트에서 함께 쓸 색상 묶음입니다. 디자인 시스템에서는 주 색, 보조 색, 배경, 강조 색을 정해 두고 화면 전체에 일관된 시각 톤을 유지합니다. 팔레트를 정하지 않고 작업하면 화면마다 색이 달라지고, 나중에 전체를 맞추는 데 시간이 더 듭니다.
무작위 생성은 의도적으로 예측 불가능한 조합을 내놓습니다. 색상환 규칙 안에서만 고르면 익숙한 범위에 머무르기 마련이지만, 난수 조합은 평소 고려하지 않던 색을 화면에 올립니다. 아이디어 초안이나 분위기 탐색처럼 다양한 자극이 필요할 때 유용합니다.
- 팔레트는 프로젝트의 시각 톤을 묶는 색상 집합
- 무작위 조합은 익숙한 선택 범위를 벗어나는 출발점
- 초안 단계에서 색 감각을 넓히는 데 적합
- 최종 결정 전 명도·채도를 조정하는 후처리가 필요
HEX 형식: #RRGGBB이 뜻하는 것
HEX 색상 코드는 여섯 자리 16진수 앞에 #을 붙인 표기입니다. 처음 두 자리가 빨강, 가운데 두 자리가 초록, 마지막 두 자리가 파랑 채널의 밝기를 00부터 FF까지 나타냅니다. 예를 들어 #FF0000은 빨강이 최대, 초록과 파랑이 0이므로 순수한 빨간색입니다.
16진수에서 한 자리는 0–9와 A–F를 합쳐 16가지 값을 갖습니다. 두 자리가 한 채널이므로 16×16 = 256단계가 됩니다. 세 채널을 조합하면 약 1677만 가지 색을 표현할 수 있고, CSS·HTML·디자인 소프트웨어 어디서나 같은 방식으로 읽힙니다.
- #RRGGBB에서 각 두 자리는 하나의 채널
- 00은 해당 채널이 꺼진 상태, FF는 최대
- 한 채널당 256단계, 전체 약 1677만 색
- CSS, HTML, Figma 등에서 동일하게 해석
RGB 형식: 빨강·초록·파랑과 HEX의 관계
RGB는 빛의 삼원색인 빨강(Red), 초록(Green), 파랑(Blue) 각각을 0에서 255까지 10진수로 표기합니다. rgb(255, 0, 0)은 HEX의 #FF0000과 같고, rgb(0, 128, 255)은 #0080FF와 같습니다. HEX가 16진수 한 줄로 쓰는 반면 RGB는 세 숫자를 쉼표로 구분합니다.
변환 방법은 단순합니다. HEX의 각 두 자리를 10진수로 바꾸면 RGB 값이 됩니다. FF는 255, 80은 128, 00은 0입니다. 이 도구에서는 두 표기를 동시에 보여 주기 때문에 따로 계산할 필요 없이 결과 카드에서 바로 확인할 수 있습니다.
- RGB는 각 채널을 0–255 10진수로 표기
- HEX 두 자리를 10진수로 바꾸면 RGB 값
- FF = 255, 80 = 128, 00 = 0
- 이 도구는 HEX와 RGB를 동시에 표시
화면 사용법: 팔레트 생성부터 코드 복사까지
상단 드롭다운에서 원하는 색상 수를 고릅니다. 기본값은 5이고 3에서 15까지 선택할 수 있습니다. 그 옆의 "새 팔레트 생성" 버튼을 누르면 선택한 개수만큼 색상 카드가 즉시 나타납니다. 키보드 사용자는 Space 키로도 같은 동작을 실행할 수 있습니다.
각 카드에는 색 미리보기 영역과 HEX 코드, RGB 값이 표시됩니다. 카드를 클릭하면 HEX 코드가 클립보드에 복사되고 화면 하단에 "복사됨" 알림이 나타납니다. 결과가 마음에 들면 공유 버튼이나 URL 복사 버튼으로 현재 팔레트를 다른 사람에게 보낼 수 있습니다.
- 드롭다운에서 색상 개수 선택 (3–15, 기본 5)
- 버튼 클릭 또는 Space 키로 팔레트 생성
- 카드 클릭으로 HEX 코드를 클립보드에 복사
- 공유 또는 URL 복사로 팔레트 전달
색상 개수: 3개부터 15개까지 쓰임이 다르다
3–5개 팔레트는 주 색과 보조 색만 빠르게 정하고 싶을 때 적합합니다. 웹 페이지의 기본 톤을 잡거나 아이콘 색 조합을 고를 때 이 범위면 충분합니다. 적은 수는 한눈에 비교하기 쉬워 빠른 판단에 도움이 됩니다.
10개 이상은 대시보드, 데이터 시각화, 일러스트처럼 구분이 많은 장면에서 출발점으로 쓸 수 있습니다. 다만 색이 많아질수록 서로 비슷한 톤이 나올 확률도 올라가므로, 생성 후에 겹치는 색을 제거하거나 명도를 조정하는 과정이 보통 뒤따릅니다.
- 3–5개: 기본 색상 톤 결정에 적합
- 6–9개: 중간 규모 UI와 슬라이드 구성
- 10–15개: 데이터 시각화, 다색 일러스트
- 색이 많을수록 겹침 확인과 후처리 필요
색상 코드 복사와 붙여넣기 흐름
카드의 아무 곳이나 클릭하면 해당 색상의 HEX 코드가 시스템 클립보드에 복사됩니다. 키보드 사용자는 카드에 포커스를 둔 뒤 Enter를 누르면 같은 동작입니다. 복사 직후에는 토스트 메시지가 뜨므로 어떤 색이 복사되었는지 바로 확인할 수 있습니다.
복사한 코드는 CSS의 color나 background 속성, Figma의 색상 입력 필드, PowerPoint의 사용자 지정 색상 대화 상자 등에 그대로 붙여넣을 수 있습니다. RGB 값이 필요하면 카드에 함께 표시된 숫자를 직접 입력합니다. 별도 변환 계산은 필요 없습니다.
- 카드 클릭 또는 Enter 키로 HEX 복사
- 토스트 알림으로 복사 상태 확인
- CSS, Figma, PowerPoint에 바로 붙여넣기
- RGB 값은 카드에서 직접 읽어 입력
URL 공유: 주소에 색상이 담기는 구조
팔레트를 생성하면 현재 색상 조합이 브라우저 주소창의 URL 파라미터에 자동으로 반영됩니다. 이 URL을 복사해 메신저나 이메일로 보내면 받는 사람이 같은 팔레트를 바로 볼 수 있습니다. 별도 회원가입이나 저장 서버 없이 주소 자체가 팔레트를 담고 있습니다.
URL 복사 버튼을 누르면 현재 주소가 클립보드에 복사됩니다. 공유 버튼은 브라우저의 Web Share API를 지원하는 환경에서 시스템 공유 시트를 열어 줍니다. 데스크톱 브라우저처럼 Web Share가 없는 환경에서는 URL 복사로 대체됩니다.
- 색상 코드가 URL 파라미터에 포함
- 링크만으로 같은 팔레트 재현 가능
- URL 복사: 클립보드에 주소 복사
- 공유 버튼: Web Share API 지원 시 시스템 공유 시트
히스토리: 브라우저에 저장되는 팔레트 기록
생성한 팔레트는 브라우저의 localStorage에 자동 저장됩니다. 페이지를 새로고침하거나 브라우저를 닫았다 다시 열어도 이전 기록이 남아 있습니다. 최대 50개까지 쌓이고, 50개를 넘으면 가장 오래된 기록이 자동으로 삭제됩니다.
히스토리 영역에서 이전 팔레트 카드를 클릭하면 해당 조합이 다시 표시됩니다. 전체 삭제 버튼은 모든 기록을 한꺼번에 지웁니다. localStorage는 브라우저와 기기에 종속되므로 다른 브라우저나 다른 기기에서는 히스토리가 공유되지 않습니다.
- localStorage에 자동 저장, 새로고침 후에도 유지
- 최대 50개, 초과 시 오래된 기록 자동 삭제
- 히스토리 카드 클릭으로 팔레트 재표시
- 브라우저·기기 간 공유 불가
무작위 생성과 조화 배색은 목적이 다르다
이 도구는 각 색상을 R, G, B 세 채널의 독립적인 난수로 만듭니다. 보색, 유사색, 트라이어드 같은 색상환 관계를 계산하지 않으므로 결과가 시각적으로 조화롭다는 보장은 없습니다. 조화로운 배색이 필요하면 색상 이론 기반 도구를 사용하는 편이 적합합니다.
반면, 색상 이론에 묶이지 않는 점이 장점이 되기도 합니다. 완전히 예측 불가능한 조합은 새로운 방향을 보여 줄 수 있고, 거기서 하나둘을 골라 명도나 채도를 미세 조정하면 처음부터 규칙 안에서 고르는 것보다 시야가 넓어집니다. 탐색 단계에서 무작위 생성, 확정 단계에서 조화 배색을 쓰는 이중 접근도 흔합니다.
- 각 채널 독립 난수이므로 색상환 관계 없음
- 보색·유사색 규칙이 필요하면 별도 도구 사용
- 예측 불가능한 조합에서 새 방향 발견 가능
- 탐색 후 조화 도구로 다듬는 이중 접근 추천
색상 접근성: 명도 대비와 색각 이상 확인
WCAG 2.2는 일반 텍스트에 최소 4.5 : 1, 큰 텍스트에 3 : 1의 명도 대비를 권장합니다. 랜덤으로 뽑은 색상을 배경과 텍스트에 그대로 쓰면 대비가 부족해 읽기 어려운 조합이 될 수 있습니다. 생성 후에 대비 검사 도구로 확인하는 단계를 빠뜨리지 마세요.
색각 이상이 있는 사용자에게는 빨강-초록 구분이 안 되는 조합이 정보 전달을 방해할 수 있습니다. 팔레트를 정하기 전에 색맹 시뮬레이터를 돌려 보면 색에만 의존하지 않는 디자인을 계획할 수 있습니다. 색과 함께 아이콘, 패턴, 라벨을 병행하면 접근성이 높아집니다.
- WCAG 2.2 명도 대비 기준: 일반 텍스트 4.5 : 1, 큰 텍스트 3 : 1
- 랜덤 색상은 대비 부족 가능성 있음
- 색맹 시뮬레이터로 사전 확인 권장
- 색 외에 아이콘·패턴·라벨 병행
활용 장면: 웹 디자인, 프레젠테이션, 아이디어 발상
웹 디자인 초기 단계에서는 정해진 브랜드 색이 없을 때 랜덤 팔레트를 돌려 분위기를 탐색합니다. 마음에 드는 조합이 나오면 HEX 코드를 CSS 변수에 넣고 화면에 적용해 본 뒤, 미세 조정을 거쳐 확정합니다. 프로토타입 단계에서 색 결정 시간을 줄여 줍니다.
프레젠테이션 슬라이드의 차트 색상이나 구분선 색을 고를 때도 도움이 됩니다. 게임 디자인에서 캐릭터·배경 팔레트를 실험하거나 일러스트 작업에서 무드보드용 색상을 모을 때도 출발점 역할을 합니다. 어디에 쓰든 최종 결과물에는 대비와 조화를 직접 확인하세요.
- 웹 디자인: CSS 변수에 HEX 코드를 바로 적용
- 프레젠테이션: 차트·구분선 색상 선택
- 게임·일러스트: 캐릭터·배경 팔레트 실험
- 최종 결과물에는 반드시 대비와 조화 확인
자주 묻는 질문
Q생성할 수 있는 색상 수의 범위는?
3개에서 15개까지 선택할 수 있습니다. 3개는 핵심 색만 빠르게 정할 때, 15개는 다색 구성이 필요할 때 적합합니다.
Q카드를 클릭하면 무엇이 복사되나요?
해당 색상의 여섯 자리 HEX 코드(예: #3A7BFC)가 시스템 클립보드에 복사됩니다. CSS나 디자인 도구에 바로 붙여넣을 수 있습니다.
QURL을 공유하면 상대방도 같은 팔레트를 보나요?
네. 색상 정보가 URL 파라미터에 포함되어 있어 링크를 열면 동일한 팔레트가 재현됩니다.
Q히스토리가 다른 기기에서도 보이나요?
아닙니다. 히스토리는 브라우저의 localStorage에 저장되므로 같은 브라우저와 같은 기기에서만 유지됩니다.
Q생성된 색상이 서로 어울리지 않는 것 같습니다.
이 도구는 각 채널을 독립 난수로 만들어 색상 이론 기반 조화를 적용하지 않습니다. 보색이나 유사색 조합이 필요하면 색상환 기반 도구를 함께 사용하세요.
QWCAG 대비 기준을 자동으로 검사하나요?
현재 자동 대비 검사 기능은 없습니다. 팔레트를 정한 뒤 별도의 대비 검사 도구로 확인하는 것을 권합니다.
QSpace 키는 어떤 기능인가요?
키보드 포커스가 페이지에 있을 때 Space 키를 누르면 새 팔레트가 생성됩니다. 마우스 없이 연속으로 팔레트를 돌려 볼 때 편리합니다.
Q모바일에서도 사용할 수 있나요?
네. 화면 크기에 맞춰 색상 카드가 자동으로 조정됩니다. 카드를 탭하면 HEX 코드가 복사되고 URL 공유도 동일하게 작동합니다.
참고 자료
2026-08-19 확인. 색상 코드의 정의와 표기법은 W3C 명세를 따릅니다.