Paletton을 사용하여 WordPress 웹 사이트의 색상 팔레트 선택

게시 됨: 2020-07-31

이 게시물에서는 Paletton을 사용하여 WordPress 웹사이트의 색상 팔레트를 선택하는 방법을 살펴보겠습니다. Paletton은 사용하기 쉬운 온라인 색상 팔레트 생성기로 많은 시간을 절약해 줍니다. 모든 웹 디자인 클라이언트가 브랜드 색 구성표를 가지고 있는 것은 아니며 웹사이트의 색을 선택하는 것은 귀하의 몫입니다. 바로 여기에서 Palletton이 유용합니다.

온라인에서 사용 가능한 모든 옵션 중에서 Paletton은 라이브 예제 기능으로 인해 가장 좋아하는 것 중 하나입니다. 앱은 몇 년 동안 업데이트되지 않았지만 고맙게도 여전히 필요한 기능에 완벽하게 작동합니다. Paletton.com에서 앱을 찾을 수 있습니다. 주변에 있는 Google 광고를 무시하면 됩니다.

웹사이트에 적합한 색상을 선택하는 것이 중요한 이유

Paletton 앱을 사용하는 방법을 자세히 살펴보기 전에 웹 사이트에서 올바른 색상 팔레트를 사용하는 것이 왜 중요한지 간단히 검토해 보겠습니다. 아시다시피 색상은 시청자의 감정과 궁극적으로 시청자의 결정에 영향을 미치는 잠재 의식 메시지를 전달합니다. 색상은 웹사이트의 회사 브랜드도 나타내야 합니다.

웹사이트의 색상 팔레트를 선택하는 가장 좋은 방법은 웹사이트에서 표현하고자 하는 분위기를 고려하는 것입니다. 인테리어 디자이너가 공간에 특정한 분위기를 주기 위해 색상을 선택하는 것과 마찬가지로 웹사이트에서도 동일한 작업을 수행할 수 있습니다. 첫인상을 생각하십시오. 누군가가 밝고 생생한 색상의 웹사이트를 방문하면 만족감을 느끼고 미소를 지을 수도 있습니다. 중립적이고 차분한 팔레트가 있는 웹사이트는 사람을 진정시키고 편안함을 줄 수 있습니다.

물론 선택하는 색상도 브랜드와 일치해야 합니다. 웹 디자이너로서 당신이 중심 무대를 차지하는 것은 조합과 색조에 있습니다. 팔레트에서 색상을 가장 잘 사용하는 것도 사이트의 분위기에 중요합니다.

이것이 Paletton이 가장 좋아하는 색상 팔레트 생성기 중 하나인 이유입니다. 웹 사이트에서 색상 팔레트가 다양한 조합으로 어떻게 적용되는지 미리 볼 수 있습니다. 이렇게 하면 선택한 색상에 대해 더 나은 결정을 내리는 데 도움이 됩니다. 밝은 색상이 아닌 어두운 색상을 배경으로 사용하면 최종 디자인에서 큰 차이를 만들 수 있습니다.

모든 색상 팔레트는 기본 색상으로 시작합니다.

Paletton에서 생성하는 모든 색상 팔레트에 대해 작업할 기본 색상이 필요합니다. 그러나 사용할 기본 색상을 어떻게 알 수 있습니까?

클라이언트가 귀하에게 제공한 콘텐츠, 브랜드 및 귀하가 제공한 이미지를 살펴보십시오.

  • 클라이언트에 색상 로고가 있는 경우 기본 색상으로 사용하십시오.
  • 스포이드 도구를 사용하여 클라이언트가 제공한 이미지 중 하나에서 한두 가지 색상을 추출합니다.
  • 고객에게 회사의 분위기와 브랜드 스토리에 대해 물어보십시오.
  • 템플릿이나 하위 테마로 판매할 웹 디자인을 제작하거나 포트폴리오용으로 제작하는 경우 디자인에서 원하는 분위기에 따라 색상을 선택합니다.

Paletton에서 팔레트를 만들 때 기본 색상을 시각적으로 선택하거나 기본 색상 16진수 탭에 16진수 코드를 선택할 수 있습니다.

Palletton 앱 UI 알아보기

이제 팔레트 만들기를 시작할 시간입니다. 모든 것이 어떻게 구성되어 있는지 살펴보겠습니다. 앱에는 두 가지 주요 섹션이 있습니다. 왼쪽은 색상 선택에 관한 것이고 오른쪽은 미리보기 보기에 관한 것입니다.

먼저 왼쪽에 있는 색상 선택 도구를 살펴보겠습니다. 이 쪽에서 무엇을 변경하든 오른쪽의 결과가 변경되지만 먼저 각 쪽이 할 수 있는 것이 무엇인지 이해하는 것이 가장 좋습니다.

왼쪽 - 색상 선택기

Paletton 앱에 들어가면 가장 먼저 눈에 띄는 것은 색상환입니다. 기본 보기의 기본 색상은 단색(1색) 팔레트의 중간 빨간색입니다.

색상 원 안의 한 줄에 5개의 점 집합이 표시됩니다. 중앙에 있는 점은 기본 색상이고 두 개의 점은 밝기와 채도를 추가하고 다른 두 점은 대비와 채도를 추가합니다.

색상 조합

색상 원 위에는 5개의 조합 버튼이 있습니다. 옵션은 왼쪽에서 오른쪽으로:

  • 단색 – 1가지 색상 + 보완 옵션
  • 인접 – 3가지 색상 + 보완 옵션
  • Triadic – 3가지 색상 + 보완 옵션
  • 테트라드 – 4가지 색상
  • 프리 스타일 – 4가지 색상

기본 색상

기본 색상을 변경하려면 다음 중 하나를 수행할 수 있습니다.

  1. 외부 원의 아무 곳이나 기본 색상 점을 드래그합니다.
  2. 원 내부의 중간 점을 드래그하여 외부 원에서 선택한 기본 색상의 다른 색조를 선택합니다.
  3. 왼쪽 하단 탭에 16진수 코드를 입력합니다.
  4. 보조 색상을 기본 색상으로 바꾸려면 화면의 미리보기 쪽에서 수행해야 합니다. 나중에 더 자세히 설명합니다.

원 안의 기본 색상 점을 드래그하면 다른 모든 점이 함께 이동하여 색조 변형을 표시합니다.

드래그하기 전에 Shift를 클릭하여 개별 색상을 선택할 수도 있습니다.

미세 조정

원의 왼쪽 상단에 있는 버튼을 사용하면 미세 조정을 위해 색조 정도를 손으로 입력할 수 있습니다. 오른쪽 하단의 버튼으로 더 많은 미세 조정 기능이 있습니다. 여기에서 선택한 색상에 대한 모든 것을 미세 조정할 수 있습니다.

  • 색조
  • 포화
  • 명도
  • 차이

버튼을 클릭하기만 하면 각 효과를 1, 5 또는 10도씩 추가하거나 줄일 수 있습니다.

기본 색상에 따른 사전 설정

색상 선택 영역에는 두 가지 주요 선택 옵션이 있습니다. 색상 및 사전 설정. 위의 색상 섹션을 살펴보았습니다. 이제 사전 설정 탭을 방문하겠습니다. 선택한 기본 색상과 조합에 따라 사전 설정에 다양한 변수가 표시됩니다. 색조, 채도, 밝기 및 대비를 스스로 엉망으로 만들고 싶지 않은 경우에 유용합니다.

이 사전 설정은 선택한 색상으로 가능한 것이 무엇인지, 첫 번째를 보완할 보조 팔레트가 있는지에 대한 좋은 아이디어를 제공할 수 있습니다.

오른쪽 - 팔레트 미리보기

Paletton의 오른쪽에는 모든 실시간 미리보기가 표시됩니다. 주요 영역은 단색 팔레트 또는 2, 3 또는 4가지 색상으로 시각화할 수 있도록 4개의 섹션으로 구분됩니다. 각 색상 섹션은 더 넓은 영역의 기본 색상과 주변의 4가지 변형을 보여줍니다.

아래 이미지에서 색상 선택기와 미리 보기가 함께 작동하는 방식을 볼 수 있습니다.

미리보기 사각형 아래에는 미리보기 모양을 변경할 수 있는 탭이 있습니다. 기본 보기가 확실히 가장 좋지만 모양을 변경하려는 경우를 대비하여 해당 버튼이 있습니다.

기본 색상 전환

미리보기 섹션 내에서 보조 또는 보색 중 하나를 클릭하여 기본 색상으로 전환할 수 있습니다. 색상 위로 마우스를 가져간 다음 '추가 정보'를 클릭합니다. 해당 색상에 대한 모든 정보를 보는 것 외에도 '기본 색상으로 적용'이라는 버튼이 표시됩니다. 이것을 클릭하면 팔레트의 모든 색상이 변경됩니다.

Palletton의 비전 시뮬레이션 기능 사용

Paletton의 가장 큰 기능 중 하나는 예기치 않은 경우에 색상이 어떻게 보일지 평가하는 기능입니다. 이 기능은 '비전 시뮬레이션'이라고 하며 미리보기 사각형 아래에서 찾을 수 있습니다. 사용 가능한 시뮬레이션은 다음과 같습니다.

  • 색맹 시뮬레이션
  • 채도를 낮추다
  • 감마 시뮬레이션
  • 웹 색상(기존 216색 팔레트)

이것은 웹사이트용 팔레트를 생성할 때 훌륭한 도구입니다. 팔레트가 모든 경우에 정상적으로 보이는지 확인할 수 있습니다. 가장 유용한 것은 색맹 시뮬레이션입니다. 모든 색상이 서로 다른지 확인하는 것이 좋습니다!

색상 팔레트의 실제 예 보기

Paletton의 또 다른 실용적인 도구는 샘플 웹사이트 및 기타 디자인 스타일에서 팔레트가 어떻게 보이는지 보여주는 탭입니다. 이러한 시뮬레이션은 'EXAMPLES…' 탭에서 찾을 수 있습니다. 첫 번째 선택은 페이지 레이아웃이며 여기에는 몇 가지 옵션이 있습니다.

  • 화이트 페이지
  • 다크 페이지
  • 긍정적인 디자인
  • 네거티브 디자인

이 앱은 선택한 색상 팔레트로 예술적 디자인의 다른 시뮬레이션을 보여줄 수 있습니다. 몇 가지 정적 및 애니메이션 예제가 있습니다. 색상 팔레트가 얼마나 많은 잠재력을 가지고 있는지에 대한 좋은 아이디어를 얻는 데 실용적입니다.

또한 이 단계에서 팔레트를 몇 가지 다른 방법으로 무작위화할 수 있습니다.

  • 스타일이 다른 비슷한 색상
  • 같지 않은
  • 비슷한
  • 색상과 달리 비슷한 스타일

팔레트를 무작위로 선택하기 전에 팔레트 사본을 얻으십시오! 돌아갈 곳이 없습니다.

색상표 내보내기 및 복사

색상 팔레트를 조정하고 미리 보았으므로 이제 Palletton에서 내보내고 웹 사이트에 사용할 준비를 할 차례입니다.

팔레트를 복사하거나 내보내는 몇 가지 다른 방법이 있습니다. 창의 오른쪽 상단에 '팔레트 공유'라는 버튼이 있지만 얼마 전에 고장난 것 같습니다. 아무 작업도 수행하지 않으므로 해당 버튼을 무시하십시오.

다음과 같은 다른 방법으로 팔레트를 복사합니다.

  • 개별 색상에 대한 16진수 코드를 보려면 마우스로 가리키고 정보 창을 열려면 클릭하여 복사하십시오.
  • 다른 형식의 팔레트를 보려면 'TABLES/EXPORT'를 클릭하십시오.
  • TABLES/EXPORT' 탭에서 다음 형식으로 내보냅니다.
    • 색상 목록
      • HTML
      • 더 적은
      • CSS
      • SASS
      • XML
      • 텍스트
    • 색상 견본
      • PNG 이미지
      • ACO(포토샵)
      • GPL(김프)
  • 선택한 팔레트에서 색상 조합을 볼 수도 있습니다.

WordPress 웹사이트에 색상 추가하기

이제 실제로 사이트에 색상을 추가할 시간입니다!

Paletton 앱이 6년 이상 업데이트되지 않았으므로 간단한 텍스트 버전을 다운로드하고 스타일 시트에 수동으로 색상을 입력하는 것이 좋습니다. 내보내기 기능은 웹사이트의 HTML 또는 CSS 스타일 시트에서 작동하지 않을 수 있습니다.

Divi 테마에 색상을 추가하려면 테마 옵션으로 이동하여 각 색상에 해당하는 16진수 코드를 입력하십시오.

컬러랩입니다!

Paletton을 사용하여 색상 팔레트를 만드는 단계를 검토했습니다. 이 앱의 기본 기능은 다른 색상 팔레트 앱과 유사하지만 웹 디자인 및 기타 예술적 디자인 모두에 대한 라이브 예제에서 색상을 볼 수 있는 기능이 나머지 앱과 차별화됩니다. 앱이 6년 이상 업데이트되지 않은 것은 유감입니다. 고맙게도 그 Google 광고를 통해 살아 있는 것 같습니다!.

가장 좋아하는 색상 팔레트 생성기 앱은 무엇입니까? 아직 팔레트를 사용해 보셨습니까? 댓글로 알려주세요!

DaGaAl/Shutterstock.com을 통한 주요 이미지