💡 컬러 팔레트 생성기로 랜덤·이미지 HEX 뽑기

웹사이트나 앱 UI를 만들 때 메인·보조·포인트 색을 정하는 일이 생각보다 오래 걸립니다. 익숙한 배색만 쓰면 밋밋하고, 처음부터 맞추려니 시간이 많이 들죠. 이 컬러 팔레트 생성기는 버튼 한 번으로 랜덤 HEX 다섯 개를 뽑거나, 올린 사진에서 눈에 띄는 대표 색을 추출해 바로 복사할 수 있게 해 줍니다.

같은 페이지에서 기준 색으로 틴트·셰이드 단계, 버튼 Hover·Active·알림색, 중간이 덜 탁한 linear-gradient까지 이어서 만들 수 있습니다. 결과 영역의 색 박스와 코드를 보고 CSS·디자인 툴에 붙여 넣어 배색을 빠르게 시험해 보세요.

📌 랜덤·이미지

랜덤 버튼은 0~FFFFFF 범위에서 HEX를 무작위로 다섯 개 만듭니다. HSL로 조화 비율을 맞춰 주는 보정은 아니므로, 형광에 가깝거나 어두운 색이 섞일 수 있습니다. 마음에 들 때까지 여러 번 눌러 보거나, 그중 쓸 만한 색만 골라 쓰는 방식이 현실적입니다.

레퍼런스 사진·일러스트·제품 컷을 올리면 ColorThief가 대표 색 약 5개를 골라 줍니다. 사진을 서버로 보내지 않고 기기 안에서만 처리합니다. 배경이 넓고 단색인 이미지보다, 색이 분명한 피사체가 있는 사진에서 결과가 더 쓸모 있는 경우가 많습니다.

🎨 틴트·셰이드

버튼 hover·비활성 상태를 만들 때 흰색·검은색 반투명만 덮으면 브랜드 색이 탁해 보이기 쉽습니다. Tint는 흰색을, Shade는 검은색을 섞은 비율(%)입니다. 10·30·50% 칩과 :root CSS 변수, 가까운 웹 안전색을 함께 보여 줍니다. 옅은 배경에는 Tint, 진한 글자·눌린 버튼에는 Shade를 쓰면 같은 계열로 맞춰 두기 쉽습니다.

📌 UI 상태색

메인 HEX 하나로 Normal·Hover·Active·Disabled와 성공·경고·에러 색을 만듭니다. Hover는 검정 약 15%, Active는 약 30%를 섞고, Disabled는 #e9ecef로 둡니다. 알림색은 흔한 초록·노랑·빨강에 메인 톤을 조금 섞습니다. CSS 변수와 Tailwind theme.extend.colors 예시를 한 번에 복사할 수 있습니다.

📐 그라데이션 중간 톤

파랑과 노랑처럼 거리가 먼 두 색을 linear-gradient로 이으면 가운데가 회색처럼 죽어 보이기 쉽습니다. 이 모드는 RGB 중간값에 밝기를 약 5% 올린 색을 50% 지점에 넣어 3단 그라데이션을 만듭니다. HSL로 완전히 다시 계산하는 방식은 아니며, 중간에 밝은 징검다리 색을 하나 더 넣는 실용 보정에 가깝습니다.

⚙️ 배색에 쓰는 팁

다섯 색을 한꺼번에 쓰지 않아도 됩니다. 메인 1~2개, 포인트 1개만 고르고 나머지는 버려도 됩니다. CSS에서는 --color-main, --color-accent처럼 변수로 묶어 두면 버튼·링크·배너에 같은 톤을 반복하기 쉽습니다. 글자·배경 대비는 이 도구가 검사하지 않으니, 예쁜 색이어도 읽히는지 따로 확인해 주세요.

이 도구는 서버 업로드 없이 브라우저에서 동작합니다. 이미지 파일은 색을 뽑는 동안에만 메모리에 올라가고, 외부로 전송되지 않습니다. 모니터·야간 모드에 따라 체감 색이 조금 다를 수 있으니, 최종은 실제 기기에서 한 번 더 보는 편이 안전합니다.