개요 색상 스케일 생성
모든 색에서 50–950 스케일과 CSS 내보내기
사용 방법
하나의 베이스 색을 50~950 전체 스케일로 만들고, 바로 붙여넣을 수 있는 CSS와 Tailwind 출력을 제공합니다.
색상 스케일 생성
50–950 스케일이 필요한 이유
하나의 색상으로 배경, 테두리, 텍스트, 상태를 모두 다룰 수 있습니다. 50은 가장 밝은 색, 950은 가장 어두운 색이며 500이 브랜드 색의 중심입니다.
균등한 단계는 유지보수를 쉽게 하고 이웃 값 사이의 차이를 모든 화면에서 예측 가능하게 만듭니다.
단계를 만드는 방법
각 단계는 OKLCH 명도를 목표로 하여 어두운 영역에서 뭉개지지 않고 지각적으로 균등합니다. 양 끝에서는 채도를 낮춰 밝은 색은 깨끗하게, 어두운 색은 풍부하게 만듭니다.
자주 묻는 질문
500이 원래 색과 다른 이유는?
500은 스케일 중앙으로 버튼과 링크의 기본값에 가장 안전합니다. 입력 색이 밝거나 어두우면 가까운 단계에 배치됩니다.
내보낸 CSS를 바로 쓸 수 있나요?
네. --brand-50부터 --brand-950을 정의합니다. 붙여넣기 전에 접두사를 디자인 시스템에 맞게 바꾸세요.
회색도 가능한가요?
네. 낮은 채도의 색은 색상 편향이 거의 없는 중립 램프가 되어 텍스트, 테두리, 비활성 상태에 적합합니다.