OKLCH 색상을 3D로 탐색하고 팔레트로 저장하는 Prism을 만들었습니다

서비스 URL

https://prism-v2-two.vercel.app

(1) 자기소개

코딩과 AI 도구를 활용해 직접 쓰고 싶은 작은 웹 서비스를 만들고 있습니다. 색을 고를 때 HEX 값만 보고 결정하는 과정이 늘 답답해서 이번 프로젝트를 시작했습니다.

(2) 서비스 소개

Prism은 OKLCH 색상을 브라우저에서 탐색하는 컬러 스튜디오입니다.

- 채도·색상 평면과 명도 조절

- OKLCH 3D 색상 공간 시각화

- WCAG 대비 검사

- 50~950 명도 스케일과 조화 색상 생성

- CSS 변수, Tailwind, OKLCH, HSL, HEX 코드 출력

- Google 로그인과 Supabase 기반 팔레트 저장·실시간 동기화

- 한국어/영어 지원과 공유 가능한 색상 URL

(3) 시작하게 된 계기

HEX나 HSL만으로는 사람이 느끼는 밝기와 채도를 일정하게 다루기 어려웠습니다. OKLCH를 더 직관적으로 이해하고, 고른 색을 실제 UI와 접근성 기준에서 바로 확인할 수 있는 도구를 만들고 싶었습니다.

(4) 개발

별도 프레임워크 없이 HTML, CSS, JavaScript로 만들었습니다. 3D 시각화와 색상 변환 로직을 브라우저에서 처리하고, Supabase Auth·Postgres·Realtime으로 로그인과 팔레트 동기화를 구현했습니다. Vercel에 정적 사이트로 배포했습니다.

(5) 바라는 것은?

디자이너와 개발자가 OKLCH를 어렵지 않게 실험하고 실제 프로젝트에 가져갈 수 있는 도구가 되었으면 합니다. 모바일 사용성, 색상 비교, 팔레트 내보내기 기능을 더 개선하려고 합니다. 직접 사용해보시고 가장 불편한 점이나 추가되면 좋을 기능을 알려주시면 감사하겠습니다!