랜덤 색상 생성기
디자인과 코드에 쓸 랜덤 색상과 코드.
코드를 클릭하면 복사됩니다. 다시 생성할 때 유지하려면 자물쇠를 클릭하세요.
- HEX, RGB, HSL 코드
- 파스텔·다크 팔레트
- 색상 잠근 뒤 나머지만 다시 뽑기
랜덤 색상 생성 방법
- 색상 개수와 코드 형식을 정하세요.
- 랜덤, 파스텔, 다크 팔레트 중 하나를 고르세요.
- 스와치를 클릭해 코드를 복사하거나, 잠근 뒤 다시 생성하세요.
HEX, RGB, HSL 비교
세 형식 모두 완전히 같은 색을 나타냅니다. 어떤 형식이 필요한지는 어디에 붙여넣을지에 따라 달라집니다.
| 형식 | 표기 예 | 적합한 용도 |
|---|---|---|
| HEX | #3B82F6 | CSS, 디자인 도구, 빠른 공유 |
| RGB | rgb(59, 130, 246) | CSS, 색을 섞거나 페이드하는 코드 |
| HSL | hsl(217, 91%, 60%) | 손으로 직접 조정: 색상 다음 채도, 다음 명도 |
HSL은 명도 값만 밝게 또는 어둡게 밀면 같은 색상(hue)이 유지되므로 보통 직접 조정하기 가장 쉬우며, HEX와 RGB는 눈으로 그렇게 하기가 더 어렵습니다.
랜덤, 파스텔, 다크를 숫자로 보면
각 모드는 색조만 바꾸는 것이 아니라 색상환의 서로 다른 구간에서 색을 고릅니다.
| 모드 | 채도 범위 | 명도 범위 |
|---|---|---|
| 랜덤 | 40~100% | 25~75% |
| 파스텔 | 35~60% | 75~88% |
| 다크 | 35~70% | 12~28% |
색상(hue)은 모든 모드에서 항상 0~359 전체 범위에서 고르므로, 파스텔과 다크도 모든 색 계열을 다루되 더 밝거나 어두울 뿐입니다.
랜덤 색상의 활용
- 브랜드나 테마 색을 고르다 막혔을 때 빠른 디자인 영감을 얻습니다.
- 실제 팔레트를 정하기 전 와이어프레임, 차트, UI 목업의 임시 색상으로 씁니다.
- 앱의 아바타 배경, 태그, 카테고리 색상을 생성합니다.
- 매일 그리는 스케치를 위한 랜덤 색상 프롬프트처럼 미술·공예 프로젝트에 씁니다.
랜덤 색상 생성기 자주 묻는 질문
팔레트 간 차이는 무엇인가요?
랜덤은 색상환 전체를 다룹니다. 파스텔은 부드러운 배경을 위해 명도와 채도를 낮게 유지합니다. 다크는 어두운 테마와 대비되는 텍스트를 위해 명도를 낮게 유지합니다.
마음에 드는 색상은 어떻게 유지하나요?
스와치의 잠금 아이콘을 클릭하세요. 잠긴 스와치는 다음에 생성할 때도 색상이 유지되므로 나머지만 다시 뽑을 수 있습니다.
HEX, RGB, HSL의 차이는 무엇인가요?
HEX와 RGB는 빨강, 초록, 파랑의 양으로 색을 표현합니다. HSL은 색상, 채도, 명도로 표현하며 손으로 직접 조정하기 더 쉬운 경우가 많습니다.
색상 코드는 어떻게 복사하나요?
스와치 아래의 코드 텍스트를 클릭하면 바로 클립보드에 복사됩니다.
각 팔레트는 실제로 어떤 범위를 쓰나요?
랜덤은 채도 40~100%, 명도 25~75% 범위에서 색상을 고릅니다. 파스텔은 명도를 75~88%로 좁힙니다. 다크는 색이 탁해지지 않도록 채도 35~70%를 유지하며 명도를 12~28%로 좁힙니다.
랜덤으로 뽑은 두 색상이 서로 잘 어울릴까요?
경우에 따라 다릅니다. 이 도구는 다양성과 영감을 위해 색상을 독립적으로 고를 뿐, 어울리는 팔레트를 만들어주지는 않습니다. 서로 잘 어울리는 색이 필요하다면 여러 개를 생성한 뒤 마음에 드는 것을 잠그고 나머지를 원하는 조합이 될 때까지 다시 뽑으세요.
세트가 아니라 색상 하나만 생성할 수 있나요?
네, 개수를 1로 설정하고 생성을 클릭하면 선택한 형식의 랜덤 색상 하나만 나옵니다.
HEX나 RGB 코드를 얻고 나면 어디에 쓸 수 있나요?
HEX 코드는 CSS, Figma, Photoshop 등 거의 모든 디자인 도구에 그대로 붙여넣을 수 있습니다. RGB와 HSL 값도 CSS의 rgb(), hsl() 함수에서 똑같이 쓸 수 있습니다.