반응형
컬러 팔레트는 최근에 웹을 만들때 사용 빈도가 제법 높기때문에, 생성을 도와주는 편리한 도구들이 많이 나와 있습니다. 피그마를 사용할때도 컬러 팔레트를 생성해주는 플러그인들이 많아서 요긴하게 사용하곤 했었죠.
그런데 막상 디자인 작업이 끝나고 퍼블리싱을 할때 일일이 컬러 팔레트를 변수로 만들거나 그럴때 좀 번거롭죠. 물론 Tailwindcss나 Bootstrap같은 CSS 프레임워크를 사용하게 된다면, 이미 잘 만들어진 컬러 팔레트들이 있기 때문에 해당 부분만 잘 활용해도 무난하게 퍼블리싱 작업을 진행할 수 있습니다.
하지만 그런 컬러 팔레트들을 직접 손쉽게 생성할 수 있다면 얼마나 좋을까요? 저는 tailwindcss를 좋아하긴 하지만, 주어진 컬러 팔레트만 사용하다보면 아무래도 색상이 좀 성에 안찰때가 있습니다.
Smart Swatch Generator는 바로 저같은 사람에게 정말 편리한 도구입니다.
Figma, Sketch에 삽입할 컬러 팔레트를 생성해주기도 하지만, 아래와 같이 자바스크립트 객체 형태나, CSS 변수형태로도 제공합니다.
{
50: '#ffe2ec',
100: '#ffb3c5',
200: '#fc839f',
300: '#f95278',
400: '#f62252',
500: '#dd0939',
600: '#ad032c',
700: '#7c001e',
800: '#4d0012',
900: '#200005',
}
:root {
--color-50: #ffe2ec;
--color-100: #ffb3c5;
--color-200: #fc839f;
--color-300: #f95278;
--color-400: #f62252;
--color-500: #dd0939;
--color-600: #ad032c;
--color-700: #7c001e;
--color-800: #4d0012;
--color-900: #200005;
}
활용하기 꽤 괜찮아 보이죠?
반응형
'웹개발' 카테고리의 다른 글
리액트 학습에 대한 회의가 밀려온다 (2) | 2022.08.31 |
---|---|
블로그 키워드는 본문에 몇 번이나 반복되는 것이 좋은가? (6) | 2022.08.18 |
헤드리스 커머스(Headless Commerce) ,헤드리스 CMS (2) | 2022.08.09 |
Next.js 삽질 후기 - Toast UI Editor, TipTap, Quill 에디터 실패기 (0) | 2022.08.03 |
Hover, Active, Focus, Disabled 상태에 따른 CSS 버튼 디자인 (2) | 2022.08.02 |
댓글