스페이스바 한 번에 색 조합 뚝딱 — Gradient Lab 컬러 팔레트 메이커 🎨
스페이스바 한 번이면 조화로운 5색 팔레트가 좌라락! 마음에 드는 색은 잠그고 CSS 그라데이션까지 한 방에 뽑아내는 디자이너용 컬러 놀이터예요.
자랑 포인트
- 색 변환과 6종 조화 알고리즘(유사색·삼각·보색·분할보색·사각·단색조)을 외부 라이브러리 없이 순수 함수로 직접 구현했어요.
- 스페이스바 한 번이면 조화 팔레트 생성, 색 잠금으로 마음에 드는 색만 고정 — 디자인 흐름이 끊기지 않아요.
- 서버·DB 없는 완전 클라이언트 앱이라 빠르고, localStorage로 작업 상태가 새로고침해도 그대로 남아요.
색 고를 때마다 "이 색이랑 뭐가 어울리지..." 하면서 한참 헤매신 적 있으시죠? 저도 그래서 만들어 봤어요. 스페이스바만 톡 누르면 조화로운 5색 팔레트가 좌라락 뽑히는 컬러 놀이터, Gradient Lab 입니다. 🎨
마음에 드는 색은 자물쇠로 잠가두고 나머지만 다시 굴리면 되고, 완성된 조합은 CSS 그라데이션이나 CSS 변수 / Tailwind 설정으로 바로 복사해서 가져갈 수 있어요.
주요 기능
- 풀스크린 색 블록 — 5색 팔레트를 화면 가득 큼직한 블록으로 보여줘요. 데스크톱에선 가로, 모바일에선 세로로 알아서 척척 바뀝니다.
- 원클릭 HEX 복사 — 블록을 클릭하면 HEX 코드가 바로 클립보드로! "복사됨" 토스트로 확인까지 되고, HSL 값도 같이 보여드려요.
- 6종 조화 알고리즘 — 스페이스바나 생성 버튼을 누르면 랜덤 조화 팔레트가 나와요. 유사색 · 삼각 · 보색 · 분할 보색 · 사각 · 단색조까지, HSL 색상환 기반으로 여섯 가지 규칙을 직접 계산합니다.
- 색 잠금(lock) — 딱 마음에 드는 색 하나 건졌다면 잠가두세요. 아무리 다시 굴려도 그 색만은 그대로 남아요.
- CSS 그라데이션 메이커 — 팔레트로
linear-gradient미리보기를 바로 보여주고, 각도 슬라이더(0~360°)로 방향까지 조절. "CSS 복사" 한 방이면 끝이에요. - 변수 / Tailwind 내보내기 — 팔레트 전체를
--color-1같은 CSS 변수나 Tailwind 컬러 설정으로 export 할 수 있어요. - 자동 저장 — 팔레트 · 잠금 · 각도가 localStorage에 저장돼서 새로고침해도 작업하던 그대로 남아 있어요.
모바일에서도 색 블록이 세로로 예쁘게 펼쳐집니다 👇
기술 이야기
Next.js(App Router) + TypeScript + Tailwind CSS v4 + React 19 로 만들었어요. 서버나 DB는 아예 없는 완전 클라이언트 전용 앱이라, Vercel에 올리니 정적으로 휙 떠서 속도가 정말 빠릅니다.
제일 공들인 부분은 색 변환·조화 계산을 외부 라이브러리 없이 전부 직접 구현한 거예요. HEX ↔ HSL 변환부터 6종 조화 규칙(색상환을 몇 도씩 돌리느냐)까지 순수 함수로 lib/color.ts 안에 다 적었습니다. 덕분에 의존성도 가볍고, 색이 왜 그렇게 나오는지 제가 100% 이해하고 있다는 게 마음에 들어요.
상태 영속은 거창한 거 없이 localStorage 로. 가벼운 도구엔 가벼운 해법이 맞다고 생각했거든요.
마무리
가볍게 만든 색 놀이터지만, 막상 쓰다 보면 스페이스바 누르는 재미에 자꾸 손이 가요. 디자인할 때 색 조합 고민되시면 한 번 놀러 와 보세요!
- 🔗 라이브 데모: https://gradient-lab-chi.vercel.app
- 💻 GitHub: https://github.com/seokjinjeong-cod/gradient-lab