색을 하나 고르면 가장 밝은 톤부터 가장 어두운 톤까지 바로 나와요. 원하는 톤을 누르면 HEX 코드가 복사돼요.
같은 색 계열로 만든 11단계 톤이에요. Tailwind와 같은 번호를 쓰고, 고른 색은 가장 가까운 단계에 표시돼요.
톤을 누르면 HEX 코드가 복사돼요.
한 가지 색에서 나오는 톤을 차례로 늘어놓은 거예요. 거의 흰색에 가까운 톤부터 거의 검정에 가까운 톤까지 모두 같은 색상을 공유해요. 그래서 서로 자연스럽게 어울려요.
틴트는 색에 흰색을 섞은 거예요. 더 밝고 부드러워져요. 셰이드는 검정을 섞은 거예요. 더 어둡고 깊어져요. 톤은 회색을 섞은 거예요. 더 차분하고 세련돼 보여요.
밝은 단계(50~200)는 배경에, 중간 단계(400~600)는 버튼과 링크에, 어두운 단계(700~950)는 글자와 테두리에 써 보세요. 색상 단계 하나만으로도 깔끔하고 통일감 있는 화면이 돼요.
사람 눈이 밝기를 느끼는 방식을 따르는 OKLCH 색 공간을 써요. 그래서 톤 사이의 간격이 고르게 보이고 갑자기 튀는 단계가 없어요.
Tailwind CSS와 많은 디자인 시스템에서 쓰는 단계예요. 50이 가장 밝고 950이 가장 어두워요. 고른 색은 가장 잘 맞는 번호에 들어가요.
네. 이름을 입력하고 형식을 고른 다음 코드를 복사하세요. 바로 붙여 넣을 수 있는 CSS 변수나 Tailwind 설정용 colors 블록을 받을 수 있어요.
색상 단계는 한 가지 색의 톤이에요. 팔레트는 서로 어울리는 여러 색을 조합한 거예요. 많은 팔레트가 배경과 글자에 색상 단계를 쓰고, 포인트 색을 한두 개 더해요.