컬러 시스템을 만들어주는 플러그인. 이런 게 있을 법한테 지금까지 몰랐다. 다른 사이트에서 컬러 베리에이션을 하고 가져와서 하나씩 입력을 했다. Tailwind Color Generator 는 선택한 색상을 500으로 두고 100 ~ 900 까지 색상을 베리에이션해서 스타일로 등록해준다.
특정 색을 선택하고 실행하면, 기본 창이 뜬다. 이때 해당 컬러의 이름을 설정해주고, check 를 누르면 해당 값이 기존 스타일에 있는지 확인해주고, 없을 경우 Create 버튼이 생성된다.
이렇게 색상을 생성하면 로컬 컬러 스타일에 blue 컬러 값이 등록된 것을 확인할 수 있다.
Foundation: Color Generator 는 조금 더 디테일한 시스템 설정이 가능하다.
플러그인을 실행하면, 주요 시스템별 컬러 정의 스타일을 확인할 수 있고 해당 예시를 바로 내 스타일에 등록할 수 있다.
여기 컬러 값에 내가 쓰고 싶은 컬러를 넣으면 해당 값으로 컬러 시스템이 설정된다.
그리고 상단 버튼 좌측에 Tokens 를 눌러 해당 코드를 복사할 수 있고,
Palette 를 눌러 해당 컬러 값이 정리된 이미지를 바로 만들 수 있다.
그리고 Create Styles 를 클릭하면 컬러 스타일에 해당 값이 등록된다.
Today I Learned