색상 팔레트 생성기

색을 고르고, 코드로 가져가기

화면에서 색을 고르면 HEX·RGB·HSL 값을 동시에 보여줍니다. 같은 색이라도 표기법마다 쓰임이 다릅니다.

• HEX (#3B82F6): CSS·디자인 툴에서 가장 흔한 표기.
• RGB (rgb(59,130,246)): 투명도가 필요하면 rgba(...)로 확장.
• HSL (hsl(217,91%,60%)): 명도(L)만 조절해 같은 색의 밝고 어두운 변형을 만들기 좋습니다.

조화로운 팔레트 만들기

기준 색에서 보색·유사색·삼각 배색을 자동으로 제안받을 수 있습니다. 실무에서는 메인 1색 + 보조 1~2색 + 회색 계열로 시작하면 무난합니다.

접근성: 대비를 확인하세요

텍스트와 배경의 명도 대비가 낮으면 읽기 어렵습니다. WCAG 기준으로 본문은 대비 4.5:1 이상을 권장합니다. 연한 회색 글씨를 흰 배경에 쓰는 흔한 실수를 피하세요.

코드로 내보내기

고른 색을 CSS 변수나 Tailwind 설정으로 바로 복사할 수 있습니다.

:root { --brand: #3B82F6; --brand-dark: #1D4ED8; }

Tailwind 커스텀 색 적용법은 Tailwind 커스텀 컬러 팔레트 가이드를 참고하세요.