랜덤 색상 생성기 — 조건을 정해 무작위 색 뽑기
디자인을 시작할 때 떠오르는 색이 없거나, 늘 쓰던 색에서 벗어나고 싶을 때 쓰는 도구입니다. 색 계열·채도·밝기의 범위를 정해 두고 뽑으면, 그 안에서 무작위로 색을 골라 HEX·RGB·HSL 값으로 보여줍니다. 한 번에 12개까지 뽑을 수 있고, 뽑았던 색은 기록에 남습니다.
색을 완전히 무작위로 뽑으면 칙칙하거나 거의 검정·흰색에 가까운 색이 자주 나옵니다. 그래서 이 도구는 색을 HSL로 뽑습니다. H(색상)는 빨강·노랑·파랑처럼 색 계열을 0~360도로, S(채도)는 색이 얼마나 선명한지를, L(밝기)은 얼마나 밝은지를 0~100%로 나타냅니다. 셋의 범위를 각각 정할 수 있어서 '파스텔 톤의 파랑'처럼 원하는 느낌 안에서만 뽑을 수 있습니다.
아무 조건도 고르지 않으면 채도 10~100%, 밝기 15~85% 사이에서 뽑습니다. 너무 어둡거나 너무 밝아서 거의 검정·흰색으로 보이는 색을 처음부터 빼기 위해서입니다.
조건별 범위
| 조건 | 선택 | 뽑는 범위 |
|---|---|---|
| 색 계열 | 따뜻한 색 / 차가운 색 | 색상 0~60° / 180~270° |
| 색 계열 | 빨강 · 주황 · 노랑 | 345~15° · 15~45° · 45~70° |
| 색 계열 | 초록 · 파랑 · 보라 | 70~170° · 180~260° · 260~345° |
| 채도 | 선명 / 파스텔 / 차분 | 80~100% / 40~70% / 10~40% |
| 밝기 | 밝게 / 중간 / 어둡게 | 65~90% / 35~65% / 10~35% |
채널 잠금
R·G·B 잠금은 지금 색의 빨강·초록·파랑 값 중 고른 것을 그대로 두고 나머지만 새로 뽑습니다. 예를 들어 빨강을 잠그면 빨강 값은 계속 같고 초록과 파랑만 바뀌어서, 한 색을 바탕으로 조금씩 다른 색을 찾아볼 때 좋습니다.
잠근 값은 뽑은 뒤에 덮어쓰기 때문에, 잠금을 켜면 위에서 고른 색 계열이나 채도 조건에서 벗어난 색이 나올 수 있습니다. 대신 화면에 보이는 HEX·RGB·HSL은 언제나 실제로 나온 같은 색을 가리킵니다.
HSL 값에 소수점이 있는 이유
HSL을 정수로 반올림하면 그 값을 다시 색으로 바꿨을 때 원래 색과 조금 달라지는 경우가 대부분입니다. 모든 RGB 색을 5단위로 훑어 재 보면 정수 HSL은 열에 아홉 가까이 다른 색으로 돌아오고, 소수 한 자리면 전부 같은 색으로 돌아옵니다. 그래서 복사한 HSL을 CSS에 붙여 넣어도 HEX와 똑같은 색이 되도록 소수 한 자리까지 보여줍니다.
HEX·RGB·HSL 중 무엇을 복사할까
- •HEX(#4F46E5): 가장 짧고, 피그마·포토샵·CSS 어디에나 붙여 넣을 수 있어 기본으로 쓰기 좋습니다.
- •RGB: 투명도를 더해 rgb(79 70 229 / 50%)처럼 쓰고 싶을 때나, 프로그램에 빨강·초록·파랑 숫자를 따로 넣어야 할 때 편합니다.
- •HSL: 같은 색을 조금 밝게, 조금 흐리게 바꾸고 싶을 때 좋습니다. 밝기(L)나 채도(S) 숫자만 바꾸면 되기 때문입니다.
자주 묻는 질문
색 위의 글자는 왜 검정이었다 흰색이었다 하나요?
배경색과의 대비가 더 큰 쪽을 고릅니다. 웹 접근성 기준(WCAG)의 대비 계산을 써서, 사람 눈에 실제로 더 잘 읽히는 쪽을 택합니다.
페이지를 열면 항상 같은 색이 나와요.
처음 보이는 색은 고정입니다. '색 뽑기'를 누르면 그때부터 무작위로 뽑습니다. 페이지를 여는 순간 뽑으면 서버에서 그린 화면과 브라우저에서 그린 화면이 서로 다른 색이 되어 어긋나기 때문입니다.
뽑은 색들을 팔레트로 쓰기 좋나요?
무작위라 서로 어울린다는 보장은 없습니다. 어울리는 조합이 필요하면 한 색을 뽑은 뒤 '색상 팔레트 생성기'에서 보색·유사색 조합을 만들어 보세요.
기록은 어디에 저장되나요?
이 페이지에 있는 동안만 최근 12개를 보여주고, 페이지를 닫으면 사라집니다. 서버에 저장하지 않습니다.