◐ Color Kit

사용법

1. hex, rgb, hsl 중 아무 칸에 색을 입력하면 나머지 형식이 자동으로 채워집니다. 왼쪽 큰 색상 견본을 클릭하면 컬러 피커로 고를 수도 있습니다.
2. 각 칸 옆 copy로 값을 복사하고, css var 칸은 --color-brand: #HEX; 형태의 CSS 변수 선언을 제공합니다.
3. shades에는 같은 색상(Hue)·채도로 밝기만 바꾼 50~950 단계 팔레트가 만들어집니다. 칸을 클릭하면 HEX가, copy as css를 누르면 --brand-50~--brand-950 변수 11줄이 복사됩니다.
4. contrast checker에서 글자색(text)과 배경색(bg)을 지정하면 대비율과 WCAG 통과 여부가 표시됩니다. swap ⇄으로 두 색을 맞바꿀 수 있습니다.

주소창 끝에 #FF6600처럼 HEX가 붙어 있으면 그 색으로 시작하고, 색을 바꿀 때마다 주소도 갱신되어 링크로 공유하기 좋습니다.

HEX · RGB · HSL 차이

• HEX — #RRGGBB, 빨강·초록·파랑을 각각 16진수 두 자리(00~FF)로. #F60처럼 3자리 축약형도 입력할 수 있습니다.
• RGB — rgb(255, 102, 0), 같은 정보를 10진수 0~255로 쓴 것. 쉼표 대신 공백으로 구분해도 인식합니다.
• HSL — hsl(24, 100%, 50%), 색상환 각도(0~360°)·채도·밝기. "조금 더 어둡게", "채도만 낮게" 같은 조정이 직관적이라 디자인 시스템 팔레트를 만들 때 편합니다.

셰이드 팔레트는 어떻게 만들어지나요?

입력한 색을 HSL로 바꾼 뒤 색상(H)과 채도(S)는 그대로 두고, 밝기(L)만 97, 93, 85, 75, 63, 52, 43, 35, 27, 20, 12%로 바꿔 11단계를 만듭니다. 숫자가 작을수록 밝은 색이고, 500 근처가 기준색과 비슷한 중간 톤입니다. 버튼 배경은 500~600, 호버 상태는 한 단계 진한 색, 연한 배경 박스는 50~100처럼 역할을 나눠 쓰면 일관된 화면을 만들기 쉽습니다. 각 칸의 숫자 색은 배경 밝기에 따라 검정·흰색 중 잘 보이는 쪽으로 자동 선택됩니다.

WCAG 대비율 기준

대비율은 두 색의 상대 휘도 L로 (L밝은 + 0.05) ÷ (L어두운 + 0.05)를 계산한 값으로, 1:1(같은 색)부터 21:1(검정/흰색)까지 나옵니다.

"큰 글씨"는 보통 18pt(약 24px) 이상, 또는 굵게 14pt(약 18.7px) 이상을 말합니다.

투명도(alpha)는 지원하지 않습니다. rgba(), hsla()를 입력하면 알파 값은 무시되고, 8자리 HEX(#RRGGBBAA)는 인식하지 않습니다. 셰이드 팔레트는 HSL 밝기를 고정 단계로 나눈 단순한 방식이라 Tailwind 기본 팔레트와 정확히 같지는 않습니다.

자주 묻는 질문

관련 도구

이 도구와 함께 보면 좋은 글