컬러 그라데이션(음영) 생성기(Color Shades Generator)

그라데이션 컬러를 생성해주는 사이트입니다. 이 사이트에는 세루리안 블루(cerulean-blue)를 메인 컬러로 사용하고 있습니다. 아무래도 컬러톤 자체가 쉽게 사용하기 어려운 색상인 만큼 풍부한 컬러감을 내기 위해서 온라인 도구 사이트를 통해 컬러값을 얻을 수 있었습니다.

 

보통 웹사이트 뿐만 아니라 디자인 작업을 할 때, 그라데이션 컬러를 사용하면 훨씬 깊이 있는 디자인을 할 수 있습니다. 메인 컬러를 정하고 메인 컬러를 기준으로 잘 어울릴 수 있는 컬러값을 찾습니다. 

이렇게 100부터 900까지 그라데이션 컬러값을 얻을 수 있습니다. 아래는 테일윈드 컬러코드입니다.

'cerulean-blue': {
100: '#ECEEF8',
200: '#CFD4ED',
300: '#B2B9E1',
400: '#7985CB',
500: '#3F51B5',
600: '#3949A3',
700: '#26316D',
800: '#1C2451',
900: '#131836',
},

디자인 작업을 할 때, 자주 참고하는 사이트이기도 하며 웹사이트에 다크모드를 적용할 때, 어두운 화면에서 적절한 컬러를 적용하기 위해 꼭 필요한 사이트 중에 하나라고 생각합니다.

 

Color shades generator for TailwindCSS

특정 색상에 대한 음영과 색조를 만들고 적합한 코드를 생성하는 도구입니다. 앱의 CSS에서 사용할 사용자 지정 색상 변형을 만들 때, 사용자 지정 색상 생성을 쉽게 구성할 수 있습니다. 제작자는 Javis Pérez이며, 깃헙 블로그를 통해서 온라인 도구를 사용할 수 있습니다. 매우 유용한 사이트입니다.

비슷한 사이트로는 Color-Hex와 Coolors가 있습니다.

VIEW MORE LINK