색상 추측은 이제 그만… CSS에 팔레트를 빠르게 추가하는 방법

출처: Dev.to

    매번 새로운 프로젝트를 시작할 때마다 똑같은 일이 일어난다. 레이아웃은 정상적으로 맞춰지고, 색상은 완전히 막힌다. 색을 골라 넣고, 눈에 띄게 쳐다보고, 수정한다. 반 시간 뒤면 ‘어쩌면 괜찮은 거지’라는 결과가 나온다.

    그럴 경우라면, 이제야 제 문제의 해결책을 공유합니다.

      
            

색을 직접 고안하지 마세요

많은 년 동안 나는 스스로 색상 스킴을 만들어 보려는 실수를 반복했어요 — 한 가지 색을 선택하고, 그와 어울릴 색을 추정하면서요. 결과는 거의 맞지 않았고, 많은 시간을 소비했습니다.

해결책은 간단합니다: 이미 검증된 조합이 좋은 색상 팔레트를 사용하고, 그다음에 필요한 부분을 조정하면 됩니다. 검증된 색상이 함께 어울리는 팔레트에서 시작하면 이후 작업은 쉬워집니다.

현재 나는 팔레트를 어디서 얻고 있다

이제는 무료로 수천 개의 손수 골라진 색상 팔레트(및 CSS 그라데이션)를 제공하는 라이브러리를 사용합니다. 색, 분위기, 테마, 업계별로 찾아보고 마음에 드는 팔레트를 선택하면 한 번의 클릭으로 CSS 코드나 헥스 코드를 복사할 수 있습니다. 가입도 필요 없고, 복잡함도 없습니다. 팔레트를 찾은 뒤 프로젝트에 붙여넣기만 하면, 하루 종일 소요하던 작업이 1분 안에 끝납니다.

그곳에는 그라데이션 섹션도 있어, 직접 조정하지 않고도 이미 균형 잡힌 배경을 사용하고 싶을 때 유용합니다.

요약

• 색을 스스로 고안하기보다 이미 완성된 팔레트를 시작하세요.
• 사이트에 일관되게 같은 색상을 재사용하세요.
• 도구를 활용해 헥스 코드를 고민하는 시간을 줄이고, 빌딩에 집중하세요.

그 한 가지 변화로 디자인은 스트레스가 아닌 쉬운 부분이 되었습니다.

전 disclosure: 저는 정확히 이 문제를 해결하기 위해 PaletteCSS를 만들었습니다. 커뮤니티 여러분, 이 도구가 여러 프로젝트에 더 유용하게 만들려면 어떤 점을 개선하면 좋을지 의견을 듣고 싶어요. 아래에 댓글 달아 주세요. 🙏