색상 팔레트 생성기

어울리는 팔레트를 만들고 색을 고정하며 Tailwind식 색 단계를 만듭니다

3b82f6

e24956

3ba01b

색상 팔레트 생성기 사용 방법

기준 색에서 배색 규칙으로 만들기, 무작위로 만들고 마음에 드는 색 잠그기, Tailwind처럼 50~950 셰이드 만들기의 세 가지 방식으로 팔레트를 만듭니다. 색은 OKLCH로 계산하며 여러 형식으로 내보낼 수 있습니다.

‘모드’를 ‘배색 규칙’, ‘무작위’, ‘셰이드’ 중에서 고릅니다.

‘배색 규칙’과 ‘셰이드’에서는 ‘기준 색상’을 정한 뒤 ‘규칙’을 고르거나 ‘색상 이름’과 ‘기준 색 위치’를 정합니다.

‘무작위’에서는 ‘생성’을 누르거나 Space 키를 누릅니다. 남기고 싶은 색은 다시 생성하기 전에 잠가 둡니다.

색 위에 마우스를 올리고 복사 아이콘을 누릅니다. ‘배색 규칙’에서는 그 색을 새 기준 색으로 쓸 수도 있습니다.

‘내보내기’에서 HEX, CSS, Tailwind v3, Tailwind v4, JSON 중 하나를 골라 복사하거나 .gpl, .ase 파일을 받습니다.

자주 묻는 질문

OKLCH에서 색조를 돌리면 모든 색이 기준 색과 같은 체감 밝기와 선명도를 유지합니다. HSL에서 돌리면 노란색이 파란색보다 훨씬 밝아 보입니다.

명도는 Tailwind 공식 팔레트에 가까운 곡선을 따르고, 채도는 500~600 부근에서 가장 높습니다. 기준 색은 해당 단계에 그대로 들어가며, ‘자동’이면 명도가 가장 가까운 단계에 놓입니다.

네. ‘이전 팔레트’와 ‘다음 팔레트’로 오갈 수 있고, 페이지가 열려 있는 동안 최근 50개를 기억합니다. 페이지를 닫으면 저장되지 않습니다.

무작위는 2~10색(− 와 + 버튼으로 조정)입니다. 배색 규칙은 색 수가 정해져 있어 보색은 2색, 유사색과 단색은 5색이며, 셰이드는 항상 11단계입니다.

--color-* 변수가 담긴 @theme 블록이라 CSS에 바로 붙여 넣을 수 있습니다. 셰이드는 --color-brand-500 같은 이름의 oklch() 값으로, 다른 모드는 HEX로 출력합니다.