목업이나 차트, 빈 캔버스에 쓸 색상이 필요한데 늘 쓰던 색을 습관적으로 고르고 싶지는 않으신가요? 이 무료 랜덤 색상 생성기는 화면이 표시할 수 있는 24-bit 전체 범위에서 색상을 뽑아 각 색상을 코드 옆 색상 견본에 보여 줍니다. “생성 개수”에서 원하는 색상 수를 1부터 50까지 고르고, 필요한 형식을 체크한 뒤 “결과 생성” 버튼을 누르세요. 페이지는 HEX 형식의 색상 하나로 열리므로 첫 결과는 클릭 한 번이면 충분합니다. “HEX 코드” 체크박스는 처음부터 켜져 있고 그 옆에 “RGB 코드”와 “HSL 코드”가 있으며, 세 가지를 원하는 대로 동시에 켤 수 있습니다. “결과 생성” 옆의 톱니바퀴 버튼을 누르면 “고급 옵션”이 열려 색상을 한 가지 유형이나 범위로 제한하고, 중복을 제외하고, HEX 표기 방식을 바꿀 수 있습니다.
모든 색상은 Math.random()과 같은 단순 의사 난수 함수 대신, 운영체제의 엔트로피 풀에서 암호학적으로 안전한 난수 바이트를 공급받는 브라우저의 Web Crypto API (crypto.getRandomValues)를 통해 생성됩니다. 화면의 색상은 빨강, 초록, 파랑의 세 가지 채널로 구성되며, 각 채널은 0부터 255까지의 정수이고 하나의 무작위 바이트는 정확히 256가지 값을 가질 수 있습니다. 따라서 각 채널은 어떠한 중간 변환 단계도 거치지 않는 순수한 단일 바이트이며, 특정 색조가 편향되어 나타나지 않습니다. 이를 통해 24-bit 색상 공간에서 이 페이지가 생성할 수 있는 16,777,216개의 모든 색상은 “결과 생성”을 누를 때마다 완전히 동일한 확률을 갖게 됩니다. “고급 옵션”에서 범위를 좁히더라도 이 원칙은 그대로 유지됩니다. 전체 공간에서 색상을 추출한 뒤 범위를 벗어난 값만 제외하므로, 설정한 범위 내의 모든 색상은 동등한 기회를 가집니다. 서버로 데이터가 전송되거나 기록되지 않으며, 페이지가 로드된 후에는 오프라인 상태에서도 작동합니다.
세 가지 형식은 하나의 색상을 서로 다른 세 가지 방식으로 표현합니다. “HEX 코드”는 CSS와 대부분의 디자인 도구에서 사용되는 여섯 자리 표기법으로, 예를 들면 #0778ff와 같습니다. 기본적으로 앞에 # 기호가 붙은 소문자로 표기되지만, “고급 옵션”의 “대문자” 및 “# 제외” 설정을 통해 다른 형식을 요구하는 프로그램에 맞출 수 있습니다. “RGB 코드”는 rgb(7, 120, 255)와 같이 세 채널을 각각 명시하므로 각 채널을 개별적으로 처리하는 코드에 적합합니다. “HSL 코드”는 hsl(213, 100%, 51%)처럼 색조, 채도, 명도로 색상을 표현하며, 이후 수동으로 색상을 미세 조정하기에 가장 직관적인 형식입니다. 세 형식 모두 스타일시트에 직접 붙여넣을 수 있습니다. 다만 정확도가 완벽히 동일하지는 않습니다. HEX와 RGB는 정확하지만 HSL은 반올림됩니다. 이 페이지는 색조, 채도, 명도를 정수로 표기하기 때문에, 약 89%의 색상에서는 이 반올림된 HSL 값을 다시 변환했을 때 원래 색상과 정확히 일치하지 않습니다. 예를 들어 #646503은 hsl(61, 94%, 20%)로 표시되지만, 이를 다시 역변환하면 #616303이 됩니다. 채널 간 차이는 최대 5단계를 넘지 않으며 보통 1 또는 2단계에 불과하여 육안으로는 구분하기 어렵지만, 원래의 정확한 색상 값이 필요한 프로젝트라면 HSL 대신 HEX나 RGB로 저장하세요.
단일 색상은 결과 영역 중앙에 단독 칩 형태로 나타나며, 여러 색상은 번호가 매겨진 목록으로 행마다 한 색상씩 표시됩니다. 각 행에는 선택한 형식들이 나란히 배치되고 끝부분에 작은 대비율 배지가 표시됩니다. 세 개를 초과하는 색상 목록은 상자 안에서 스크롤되며 모서리에 있는 화살표를 누르면 전체 높이로 펼쳐집니다. 페이지는 펼침 상태를 기억합니다. 원하는 코드를 클릭하면 해당 코드만 복사됩니다. 행 끝에 있는 복사 버튼은 해당 색상의 모든 활성화된 코드를 공백으로 구분하여 한 줄로 복사합니다. 색상 견본을 직접 클릭하면 브라우저의 자체 색상 선택기가 열립니다. 거기서 다른 색상을 선택하면 활성화된 각 형식의 코드와 대비율 배지가 변경된 색상에 맞춰 즉시 업데이트됩니다. “모두 복사” 버튼은 전체 색상 목록을 한 줄에 하나씩 복사하며, “파일로 저장”은 동일한 내용을 일반 .txt 파일로 저장합니다. 두 기능 모두 색상 선택기에서 수정한 색상을 그대로 반영합니다. “기록” 기능은 생성된 최근 10개의 결과 묶음을 브라우저에 보관하며, “지우기”를 누르면 현재 결과 목록이 깨끗이 비워집니다. “고급 옵션”을 포함한 모든 설정은 다음 방문 시에도 유지됩니다.
동일한 확률로 생성된 색상이라도 시각적으로 균등하게 분포되어 보이지는 않으며, 통계적 특성을 미리 이해하면 불필요하게 “결과 생성”을 반복해서 누르는 일을 줄일 수 있습니다. 전체 색상 범위를 기준으로 측정했을 때, HSL 채도가 70% 이상이고 명도가 35%에서 65% 사이인 밝고 진한 색상이 약 35%를 차지합니다. 채도가 20% 미만인 무채색에 가까운 색상은 약 4%에 불과하며, 아주 어두운 색상(명도 20% 미만)과 아주 밝은 색상(명도 80% 초과)은 각각 약 3% 수준입니다. 따라서 “모든 색상”에서 10개를 생성하면 대개 선명한 색상이 다수 포함되며 파스텔이나 짙은 회색은 드물게 나타납니다. 특정한 느낌의 색상이 필요하다면 “색상 유형”에서 선택하세요. “비비드”는 선명한 색상군만 골라내며, “파스텔”, “다크”, “뮤트”, “그레이스케일” 역시 각자의 영역에 맞춰 선별합니다. “사용자 지정”을 사용하면 “색조”, “채도”, “명도” 범위를 직접 지정할 수 있으며, 색조 범위는 0을 넘어 순환할 수 있으므로 330부터 30까지 지정하면 빨강 계열이 생성됩니다. 범위는 화면에 표시되는 HSL 코드를 기준으로 검증되므로 범위를 벗어나는 색상은 나오지 않으며, 지정한 범위가 “생성 개수”에 비해 너무 좁으면 중복을 피하기 위해 범위를 넓히라는 메시지가 표시됩니다. 기본 상태에서 전체 범위 기준 50개 중 2개가 우연히 같을 확률은 약 13,700분의 1 정도이지만, 완벽히 다른 색상들만 필요하다면 “중복 제외” 옵션을 선택하세요.
랜덤 색상은 배경으로 자주 사용되는데, 이때 색상 견본을 육안으로 확인하는 것만으로는 해결할 수 없는 질문이 생깁니다. 바로 그 위에 텍스트를 얹었을 때 잘 읽힐 것인가 하는 점입니다. 웹 접근성 표준인 WCAG에서는 일반 텍스트에 대해 최소 4.5:1의 명암비를 권장합니다. 이 도구가 생성할 수 있는 모든 색상을 측정한 결과, 검은색 텍스트는 약 65%의 색상에서 기준을 충족하고 흰색 텍스트는 약 36%에서 기준을 충족하며, 둘 다 기준에 미달하는 색상은 단 하나도 없습니다. 둘 중 더 나은 쪽은 항상 최소 4.58:1 이상의 대비율을 보장합니다. 따라서 어떤 배경색이 나오든 검은색이나 흰색 텍스트 중 하나는 반드시 기준을 통과하며, 페이지는 둘 중 적합한 쪽을 알려줍니다. 각 색상에는 둘 중 더 나은 글자색으로 Aa 글자와 대비율이 표시된 작은 배지가 함께 제공됩니다. 이 비율은 소수점 아래를 버림하여 보수적으로 표기되며, 색상 선택기에서 색상을 변경하면 실시간으로 갱신됩니다. 배지는 오직 검은색과 흰색 텍스트만을 비교하므로, 브랜드 색상이나 기타 텍스트 색상을 사용할 때는 명암비 측정 도구로 확인하세요.
무작위라는 것이 조화를 이룬다는 뜻은 아닙니다. 한 번에 생성되는 각 색상은 다른 색상에 대한 고려 없이 개별적으로 추출되므로, 보색 대비나 유사색 배열, 통일된 명도와 같이 디자이너가 의도하는 조화로운 팔레트를 자동으로 구성하지는 않습니다. 범위를 좁히더라도 이 기본 규칙은 변하지 않으며, 파스텔 톤이나 파란색 계열로 한정하더라도 각 색상은 서로 간의 조화가 약속되지 않은 채 제각기 도착합니다. 그러나 바로 이것이 이 도구의 핵심 가치입니다. 평소라면 결코 고르지 않았을 뜻밖의 색상을 발견하게 해 주어, 익숙한 습관이나 창작의 벽을 깨뜨려 줍니다. 우연히 마주친 색상을 실용적인 디자인으로 발전시키려면, 우연히 조화가 맞을 때까지 계속 “결과 생성”을 누르기보다는 마음에 드는 색상 하나를 남겨 두고 나머지 색은 그 색에서 끌어내세요. 색조를 유지한 채 명도를 단계별로 조절해 더 밝거나 더 어두운 변형을 만들거나, 색조를 180도 회전하여 대비되는 색상을 찾아보세요. “HSL 코드”는 이러한 작업을 직관이나 감이 아닌 정확한 수치 계산으로 가능하게 해 줍니다.
이 랜덤 색상 생성기를 선택해야 하는 이유는 무엇일까요?
- 서버 전송 없이 Web Crypto API를 통해 브라우저에서 안전하게 직접 생성
- 채널당 1바이트씩 할당되어 16,777,216개의 모든 색상이 완전히 동등한 확률 보장
- 동일한 색상에 대해 원하는 조합으로 선택 가능한 HEX, RGB, HSL 코드 제공
- 한 번에 최대 50개의 색상 생성, 각 색상 견본 및 텍스트 대비율 배지 표시
- “비비드”, “파스텔”, “다크”, “뮤트”, “그레이스케일” 및 사용자 지정 색조·채도·명도 범위 지원
- 필요할 때 활성화하는 “중복 제외” 기능 및 HEX 코드의 “대문자”, “# 제외” 옵션
- 클릭 한 번으로 코드 복사 및 브라우저 색상 선택기를 통한 간편한 색상 수정
- “모두 복사”, “파일로 저장” 및 브라우저에 안전하게 보관되는 최근 10회 생성 “기록”
- 가입이나 사용량 제한 없이 완전 무료이며 서버에 어떤 데이터도 남기지 않음
랜덤 색상은 최종 색상이 결정되기 전 색상이 필요한 모든 작업에서 유용하게 쓰입니다. 디자이너는 매너리즘이나 창작의 벽을 허물고 기존의 선호 팔레트에서는 떠올리지 못했을 새로운 출발점을 찾기 위해 이를 활용합니다. 개발자는 목업, 플레이스홀더, 아바타를 채우거나, 디자인 테마가 확정되기 전 차트의 각 데이터 계열을 구분하고, 인터페이스가 예상치 못한 배경색에서 어떻게 반응하는지 테스트할 때 사용합니다. “모든 색상”에서 50개를 추출하면 거의 항상 아주 어둡거나 밝은 색상이 포함되며, “다크”나 “파스텔”을 선택하면 검증을 한쪽 끝으로 몰아 줄 수 있습니다. 제너러티브 아트 작가와 게임 프로토타입 개발자는 RGB 값을 그래픽 라이브러리 코드에 바로 입력하여 활용합니다. 교육 현장에서는 세 가지 형식을 나란히 비교하여 하나의 색상이 HEX 코드, 세 개의 독립 채널, 또는 색상환 상의 좌표로 어떻게 표현되는지, 그리고 왜 HSL 표기 시 반올림이 발생하는지 설명하는 시각 자료로 활용합니다. 또한 목록을 분류하거나 태그를 달 때 어떤 색을 쓸지 고민하지 않고도 서로 뚜렷이 구별되는 색상을 빠르게 얻을 수 있습니다.
이 도구의 명확한 한계점도 미리 알아두는 것이 좋습니다. 이 도구는 팔레트 제작 도구가 아닌 난수 생성기입니다. 따라서 색상 간의 조화를 고려하지 않고, 한 색상을 고정한 채 나머지만 변경하는 기능도 없으며, 좁은 범위를 선택해도 조화로운 조합이 아니라 특정 성격의 색상군만 나올 뿐입니다. 대비율 배지는 오직 검은색과 흰색 텍스트만 비교합니다. 이 페이지는 화면 표시에 사용되는 sRGB 색상 공간(HEX, RGB, HSL)만 지원하며, 투명도나 CMYK, Pantone, OKLCH, 명명된 CSS 색상은 지원하지 않습니다. 인쇄용 작업이라면 화면용 코드에만 의존하지 말고 실제 인쇄 공정에서 색을 맞추세요. 또한 디스플레이마다 캘리브레이션이 다르기 때문에 동일한 코드라도 기기에 따라 약간씩 달라 보일 수 있습니다. HSL 값은 앞서 언급했듯 반올림되며, “중복 제외”를 선택하지 않는 한 중복 색상 검사는 수행되지 않습니다. 대신 이 페이지가 보장하는 것은 매우 명확합니다. 16,777,216개의 모든 색상, 또는 사용자가 지정한 범위 내의 모든 색상이 매 클릭마다 완전히 동등한 확률로 브라우저의 암호학적 난수 엔진에서 직접 생성되며 외부로 절대 전송되지 않는다는 점입니다.