랜덤 색상 팔레트 생성기

이 랜덤 팔레트 생성기가 하는 일

새 팔레트 버튼을 누르거나 스페이스바를 치면 서로 잘 어울리는 색이 새로 만들어집니다. 색 개수는 2~10개(기본 5개) 중에서 고르고, 어떤 배색 방식으로 뽑을지도 직접 정할 수 있습니다. 색을 아무렇게나 골라 어울리기를 바라는 대신 기준 색상(hue) 하나에서 나머지를 파생하므로, 웹사이트·발표 자료·브랜드 보드·일러스트·UI 목업에 바로 쓸 수 있는 통일감 있는 팔레트가 나옵니다. 각 색상 칸에는 정확한 hex 코드가 표시되고, 한 번 클릭하면 그 값이 클립보드에 복사되어 CSS나 Figma 등 어떤 디자인 도구에도 바로 붙여넣을 수 있습니다. 전체 복사를 누르면 모든 hex를 쉼표로 구분된 목록으로 한 번에 가져오고, 링크 복사를 누르면 팔레트 자체를 공유할 수 있습니다 — 색, 고정 상태, 배색 방식, 기준 색상, 보정값 네 개, 색각 시뮬레이션, 내보내기 형식이 모두 주소에 담기므로 링크를 연 사람은 지금 보고 있는 화면 그대로를 보게 됩니다.

7가지 배색, 또는 내가 정한 기준 색상

유사색, 단색 계열, 보색, 분할 보색, 삼각 배색, 사각 배색, 자유 배색(첫 색을 뺀 나머지 색조를 매번 무작위로 뽑음) 중에서 고를 수 있습니다. 기준 색상 칸을 비워 두면 매번 새로운 hue를 뽑고, #3366ff 같은 hex를 입력하거나 옆의 색상 선택기로 고르면 그 색을 중심으로 팔레트를 만듭니다 — 입력한 색은 HSL을 한 번 돌고 오면서 값이 바뀌는 일 없이 그대로 남습니다. 단색 계열은 색조 하나를 유지한 채 명도 사다리를 쌓는데, 간격은 위아래로 남은 여유에 맞춰 정해지고 명도 6~94 범위 안에 묶여 있어 여러 단계가 같은 흰색으로 뭉개지지 않습니다. 색을 하나 더 요청하면 화면에 있던 색은 그대로 두고 새로 늘어난 칸만 뽑습니다. 2~10을 벗어난 숫자는 조용히 잘라내지 않고 그대로 알려 줍니다.

색 고정과 스페이스바

색상 칸마다 자물쇠가 있습니다. 고정한 색은 다시 생성해도 그대로 남고, 기준 색상을 따로 정하지 않았다면 처음 고정한 색이 나머지 팔레트를 다시 맞추는 기준이 됩니다 — 마음에 드는 색 하나를 잡아 두고 나머지만 계속 굴려 볼 수 있습니다. 스페이스바를 누르면 새 팔레트가 나오지만, 입력칸·선택 상자·버튼에 초점이 있을 때는 동작하지 않습니다. 그 자리에서 스페이스바는 이미 다른 의미이기 때문입니다.

팔레트 전체 보정과 검사

슬라이더 네 개가 모든 색을 한 번에 움직입니다: 색조(±180°), 채도와 명도(HSL 기준 ±100), 색온도(±100 — sRGB에서 빨강을 올리고 파랑을 내리는 방식으로, ±100에서 두 채널이 각각 255단계 중 50만큼 움직입니다). 슬라이더를 0으로 되돌리면 HSL을 한 번 돌고 온 값이 아니라 원래 색 그대로가 돌아옵니다. 색상 상세 정보를 켜면 각 색의 가장 가까운 CSS 색 이름과 rgb()·hsl() 값, 흰 배경·검은 배경 대비가 함께 표시되며 같은 내용이 색상 칸 툴팁에도 나옵니다. 색각 시뮬레이션은 적색맹(protanopia)·녹색맹(deuteranopia)·청색맹(tritanopia)·전색맹(achromatopsia)이 보는 대로 화면을 다시 칠합니다 — 바뀌는 것은 화면에 칠하는 색뿐이고 hex 값과 복사·내보내기 결과는 생성한 색 그대로입니다. 그 아래에는 팔레트를 네모 칸이 아니라 실제 화면처럼 보여 줍니다: 가장 밝은 색이 배경, 그다음으로 밝은 색이 카드, 가장 어두운 색이 본문 글자, 중간 색 가운데 채도가 가장 높은 색이 버튼이 됩니다. 그 본문 글자와 배경의 WCAG 대비는 실제로 측정해 비율과 등급(7:1 AAA, 4.5:1 AA, 3:1 큰 글자 AA, 그 아래는 AA 미달)으로 표시하며, 팔레트가 실제보다 좋아 보이도록 값을 바꿔 넣지 않습니다.

9가지 내보내기

CSS 커스텀 속성(--color-1, --color-2 …), SCSS 변수, Tailwind 설정 블록, JSON, SVG, GIMP .gpl 팔레트, 일반 텍스트, PNG 이미지, 어도비 스와치 교환 형식 .ase 파일로 내보낼 수 있습니다. 텍스트 형식 7가지는 화면에서 바로 확인하고 복사하거나 파일로 받을 수 있고, PNG와 .ase는 이진 파일이라 다운로드로만 받습니다. 그림 형식 두 가지는 색마다 200×240 px 블록을 그리고 아래쪽 가운데에 hex를 흰색과 검은색 중 더 잘 읽히는 쪽으로 찍습니다.

색을 고르는 방법

기준 색상을 정하지 않으면 무작위 기준 hue를 뽑은 뒤, 기본값인 유사색 배색에서는 각 색상 칸을 그 주위로 28°씩 떨어뜨려 배치하므로 이웃한 색들이 충돌하지 않고 서로 연관됩니다. 채도는 선명하되 과하지 않은 62~85% 범위로 유지하고 명도는 36·45·54를 오가며 깊이를 더해 팔레트의 균형을 잡습니다. 기준 색상을 지정하면 이 간격은 18°~39° 사이에서 매번 다시 뽑히는데, 같은 색에 같은 28°를 고정하면 새 팔레트를 눌러도 방금 보던 색조가 그대로 나오기 때문입니다. 모든 색은 표준 6자리 hex 코드로 변환됩니다. 생성기는 시드가 같으면 항상 같은 팔레트를 만드는 결정적 구조라 테스트가 가능하며, 새로 클릭하면 시드가 바뀌어 완전히 새로운 조합이 나옵니다. 팔레트는 서버에 전혀 의존하지 않고 모든 계산이 기기 안에서 실행됩니다.