Divi 웹사이트에 색상 팔레트를 적용하는 방법(20가지 예!)

오늘의 Divi 튜토리얼에서는 Divi로 구축할 다음 웹사이트에서 사용할 수 있는 몇 가지 놀라운 색상 팔레트를 공유할 것입니다. 웹사이트에 적합한 색상을 사용하는 것은 웹사이트의 전체적인 모양과 느낌을 결정하는 주요 요소 중 하나입니다.

놀라운 색상 팔레트를 공유하는 것 외에도 이러한 색상 팔레트를 웹사이트에 추가하는 확실한 방법을 보여드릴 것입니다. 확신이 서지 않으면 항상 아름다운 결과를 만드는 데 도움이 되는 다음 기본 단계를 따를 수 있습니다.

일반 팁

1. 어두운 색 또는 밝은 색의 웹 사이트 결정

사용하게 될 색상 팔레트에는 의심할 여지 없이 밝은 색상과 어두운 색상이 있습니다. 작성된 내용이 손실되지 않도록 대비는 색상 팔레트에서 필수입니다.

이제 웹사이트에 색상 팔레트를 적용하려고 할 때 스스로에게 물어야 하는 첫 번째 질문으로 바로 이어집니다. 어두운 색 또는 밝은 색의 웹 사이트를 만들고 싶습니까? 하나를 선택한다고 해서 결합할 수 없다는 의미는 아니지만 선택을 하면 색상 팔레트를 더 쉽게 선택하는 데 도움이 됩니다.

2. 색상 선택

이론적으로 색상 팔레트에 원하는 색상 수를 결정할 수 있습니다. 색상 팔레트를 적용하거나 결정하는 표준 방법은 없습니다. 그러나 Divi로 색상의 균형을 잘 잡기 위해서는 5가지 색상을 사용하는 것이 좋습니다.

5가지 색상의 색상 팔레트를 웹사이트에 적용하는 데 도움이 되도록 다양한 색상 팔레트를 표시할 때 동일한 레이아웃에 일관되게 적용할 한 가지 방법을 선택했습니다. 그러나 그 내용에 대해 알아보기 전에 우리의 방법을 따르고 싶다면 색상 팔레트에 있어야 하는 다양한 유형의 색상을 살펴보겠습니다.

2개의 배경색

선택한 배경색이 서로 일치하는지 확인하십시오. 이러한 배경색을 서로 가깝게 사용하여 아름다운 결과를 얻을 수 있습니다. 그들은 일정한 조화를 가져야합니다.

1 글꼴 색상

다음으로 선택해야 할 것은 글꼴 색상입니다. 논리적으로 글꼴 색상은 선택한 배경 색상에 따라 다릅니다. 밝은 색상의 배경색을 선택한 경우 글꼴 색상이 어두운 색상인지 확인하고 그 반대의 경우도 마찬가지입니다.

1 하이퍼링크 및 CTA 색상

선택한 하이퍼링크 색상은 웹사이트에 생기를 불어넣는 색상 중 하나입니다. 웹사이트에 포함하는 클릭 유도문안에서 이 색상을 사용하므로 팔레트의 다른 색상과 눈에 띄는지 확인하십시오.

최종 터치를 위한 1가지 색상

마지막으로 웹사이트에 색상을 제공하는 다른 기본 색상을 선택할 수 있습니다. 이 색상은 하이퍼링크 색상만큼 중요하지 않지만 웹사이트에서 색상 균형을 완성하는 데 도움이 됩니다.

3. 충분한 대비가 있는지 확인

전에 언급했듯이; 색상 팔레트의 일부 색상 간에 대비를 제공하는 것이 중요합니다. 웹 사이트에 색상 팔레트를 사용하는 경우 이 대비는 주로 공유하는 서면 콘텐츠를 읽을 수 있도록 만드는 데 도움이 됩니다. 때문에; 콘텐츠가 읽기 쉽지 않은 경우 결국 그것의 목적은 무엇입니까?

4. 올바른 색상 사용 균형 찾기

색상 팔레트에서 특정 색상을 얼마나 자주 사용할 것인지 결정하는 다양한 방법이 있습니다. 웹사이트에서 사용하는 색상에 압도되지 않도록 하려면 색상 균형을 잘 만드는 것이 필요합니다.

대부분의 경우 색상 팔레트에서 보다 중성적인 색상을 사용하고 다른 색상을 사용하여 제공하는 콘텐츠를 강조하는지 확인하십시오.

연습: 웹사이트에 색상표 추가하기

이 게시물의 다음 부분에서는 웹사이트에 색상 팔레트를 적용하는 방법을 안내해 드리겠습니다. 웹사이트 레이아웃에 색상을 추가할 때 취하는 다양한 단계를 처리합니다. 이 연습이 끝나면 색상 팔레트를 공유하는 부분으로 이동합니다. 색상을 공유했을 뿐만 아니라 Divi 레이아웃에서도 사용하여 연습을 실행했습니다.

더 이상의 절차 없이 프로세스의 여러 단계를 살펴보겠습니다.

1. 색상 추가 방법 결정

다음 두 가지 방법으로 색상표를 추가할 수 있습니다.

• 섹션별로 모든 색상 섹션 추가
• 색상별로 웹사이트를 완성하세요

이 두 가지 방법을 혼합하여 사용할 수도 있지만 색상별로 웹사이트를 완성하는 것으로 시작하는 것이 좋습니다. 이렇게 하면 다른 색상 코드를 계속해서 복사하여 붙여넣을 필요가 없습니다. 각 색상을 한 번 복사한 다음 다른 색상으로 이동합니다.

2. 배경색 추가

색상을 삽입하는 방법을 결정했으면 배경 색상으로 시작할 수 있습니다. 배경색으로 시작하는 것이 좋은 이유 중 하나는 결과를 즉시 볼 수 있기 때문입니다. 웹사이트에서 사용하는 색상의 기초를 설정하고 있습니다.

밝은 색상의 웹사이트를 만들기로 선택한 경우; 두 번째 섹션의 배경에 가장 밝은 색상을 추가하여 시작하고 세 번째 섹션에서 두 번째로 밝은 색상을 추가합니다.

3. 텍스트 색상 추가

웹사이트의 배경색을 추가한 후 웹사이트에 텍스트 색상을 추가할 수 있습니다. 웹사이트의 모든 서면 콘텐츠는 이 색상을 가져야 합니다(하이퍼링크 및 클릭 유도문안 제외).

4. 웹사이트에 하이퍼링크 및 CTA 색상 추가

계속해서 다음으로 할 수 있는 일은 웹사이트에서 하이퍼링크와 클릭 유도문안을 눈에 띄게 만드는 것입니다. 사람들의 관심을 끌고 행동 유도 문안이 무엇인지 궁금하게 만듭니다.

웹사이트에서 클릭 가능한 모든 항목에 이 색상이 포함되어 있는지 확인하세요. 이러한 일관성을 유지함으로써 방문자는 사이트에서 계속 머물기 위해 클릭할 수 있는 위치를 쉽게 인식할 수 있습니다.

5. 최종 터치 색상 추가

마지막으로 해야 할 일은 웹사이트에 최종 터치 색상을 추가하는 것입니다. 우리가 만든 예제와 색상 팔레트에서 이 최종 터치 색상을 세 곳에서 사용합니다. 광고 문구 원 색상, 사람 모듈의 헤더 텍스트 및 기본 메뉴 표시줄.

최종 터치 색상은 웹사이트에서 사용할 기본 색상은 아니지만 웹사이트에 필요한 추가 색상을 가져올 수 있습니다. 웹사이트가 단조롭거나 짜증날 정도로 심각해 보이는 것을 원하지 않습니다.

색상 팔레트

색상 팔레트를 웹사이트에 적용하는 데 필요한 단계를 분석했으므로 이제 놀라운 색상 팔레트를 탐색할 차례입니다. 우리가 만든 예제 레이아웃의 결과를 보여주는 것 외에도 우리는 그 결과에 도달하는 데 사용한 색상 코드도 공유할 것입니다.

1. 타일

우리가 선택한 첫 번째 색상 팔레트에는 대부분 더 부드러운(약간 파스텔) 색상이 포함되어 있습니다. 밝은 웹사이트를 선택했기 때문에 색상 팔레트의 밝은 색상이 웹사이트의 대부분을 차지합니다. 그러나 색상 팔레트의 더 어두운 색상은 웹 사이트에 필요한 색상 균형이 포함되어 있는지 확인하십시오.

이 예에서 사용되는 색상은 다음과 같습니다(왼쪽에서 오른쪽으로).

• #EBE8E2
• #768A95
• #B98077
• #007193
• #E2D7D7

2. 사막

목록의 다음 색상 팔레트는 사막이라고 합니다. 이 색상 팔레트의 색상 균형은 더 어두운 색상의 웹사이트에 약간 기울어져 있습니다. 이 예에서 지배적인 색상은 파란색입니다. 그러나 필요한 대비가 있는지 확인하는 매우 밝은 텍스트 색상도 있습니다.

이 팔레트에 사용된 색상은 다음과 같습니다(왼쪽에서 오른쪽으로).

• #507782
• #7C8E93
• #D89C79
• #443F3C
• #FFE8D8

3. 축제

다음 색상 팔레트는 주변에서 자주 볼 수 있는 색상이 아닙니다. 색상은 종종 동일한 색상 팔레트에 나타나지 않지만 매우 흥미롭습니다. 웹 사이트를 독특하게 보이게 하려면 이 팔레트를 선택하십시오.

이 팔레트에서 사용되는 색상은 (왼쪽에서 오른쪽으로):

• #E6EBD1
• #A59E4C
• #544C4D
• #AF3D4B
• #CED3BC

4. 핑키 프라미스

행의 다음 색상 팔레트는 어두운 색상의 웹 사이트를 만들려는 경우 훌륭한 옵션입니다. 블랙 섀도와 핑크 섀도는 좋은 조합으로 알려져 있다. 너무 여성스러워 보이지 않으면서 웹사이트에 장난기 넘치는 추가 터치를 제공합니다. 검은 색 음영은 웹 사이트의 모양과 느낌에 필요한 깊이가 여전히 포함되어 있는지 확인합니다.

이 팔레트에 사용된 색상은 (왼쪽에서 오른쪽으로):

• #33383A
• #ECC9C8
• #E2566D
• #4F575A
• #D3D8DA

5. 산토리니

이 다음 팔레트에서 파란색이 다른 색상을 지배한다는 것을 분명히 알 수 있습니다. 이 색상 팔레트를 사용하면 즉시 가볍고 긍정적인 느낌을 받을 수 있습니다. 파란색은 웹사이트를 구축할 때 사람들이 선호하는 색상 중 하나로 알려져 있습니다. 전문성을 반영한 스탠다드 컬러입니다. 그러나 이 컬러 팔레트에 사용된 파란색 음영도 장난기 있는 면을 보여줍니다.

이 예에서 사용한 색상 팔레트는 (왼쪽에서 오른쪽으로):

• #1198EA
• #0A5785
• #A85A4D
• #F1F5FA
• #C5DFF8

6. 퍼플 플레져

이 색상 팔레트에서 지배적인 색상은 분명히 보라색입니다. 종종 우울한 색상으로 인식되지만 이 색상 팔레트와 웹 사이트에서 사용하는 것은 다릅니다. 밝은 색상과 결합하면 보라색이 놀라운 결과를 제공할 수 있습니다.

이 색상 팔레트에 사용된 색상은 다음과 같습니다.

• #D7D7ED
• #52517B
• #737172
• #FCFCFC
• #F0F1A

7. 미묘한

우리가 공유하고 싶은 다음 색상 팔레트는 매우 중립적이며 Festival 색상 팔레트와 같은 스타일입니다. 주변에서도 자주 볼 수는 없지만 매우 깨끗해 보입니다.

이 예에서 사용된 색상은 (왼쪽에서 오른쪽으로):

• #DAE2D5
• #4B7263
• #A8A461
• #494949
• #CCCCCC

8. 기업

공유하고자 하는 다음 색상 팔레트는 모든 종류의 비즈니스 웹사이트에 이상적입니다. 사용되는 색상은 특정 긍정과 젊음을 반영합니다. 밝은 배경색을 사용하면 노란색과 청록색이 웹사이트에 부가가치를 더해줍니다.

이 팔레트에서 사용되는 색상은 (왼쪽에서 오른쪽으로):

• #181242
• #4아바닥
• #DBDBDB
• #F7B733
• #FCFCFC

9. 로즈

누가 장미 색을 좋아하지 않습니까? 이 다음 색상 팔레트는 웹사이트에 여성스러운 요소를 제공합니다. 밝은 색상이 웹 사이트를 지배하고 있지만 어두운 색상도 강화되도록 합니다.

이 팔레트에 사용된 색상은 (왼쪽에서 오른쪽으로):

• #152038
• #DDA199
• #FF614C
• #F5F5F5
• #E2E2E2

10. 초콜릿

스포트라이트에 넣고 싶은 다음 색상 팔레트는 초콜릿입니다. 이 색상 팔레트의 좋은 점은 배경 색상과 텍스트 색상이 동일한 색상 범주 내에서 찾을 수 있다는 것입니다. 이는 다른 두 색상이 이러한 색상과 구별되고 주의를 끌 수 있는 공간을 제공합니다.

이 팔레트에 사용된 색상은 (왼쪽에서 오른쪽으로):

• #FFF4E8
• #FFE2C4
• #822317
• #935B3B
• #346E70

11. 세련된

이 다음 색상 조합은 첫눈에 예상하지 못한 것입니다. 자주색과 황록색은 자주 함께 사용되지 않지만 결과에서 볼 수 있듯이; 그들은 꽤 잘 어울립니다. 이 두 가지 색상에 초점을 맞추기 위해 배경색과 텍스트 색상은 다소 중립적입니다.

이 팔레트에서 사용되는 색상은 (왼쪽에서 오른쪽으로):

• #88D317
• #4F2649
• #FCFCFC
• #EFEFEF
• #080816

12. 올리비아

Olivia는 많은 설명이 필요 없는 컬러 팔레트입니다. 올리브색과 노란색 계열의 색상이 매우 잘 어울립니다. 밝은 색상을 더 중립적으로 유지하면 이러한 색상이 쇼를 훔칠 수 있습니다.

이 팔레트에서 사용되는 색상은 (왼쪽에서 오른쪽으로):

• #778E3B
• #FFD902
• #132819
• #EFEFEF
• #FCFCFC

13. 골든 게이트

부드러운 베이지 색상을 사용하면 웹사이트에 일종의 독점성을 반영할 수 있습니다. 색상 팔레트는 상당히 차분해 보이지만 이 색상 팔레트의 보라색 청록색은 웹사이트에 필요한 따뜻함을 제공합니다.

이 색상 팔레트에 사용된 색상은 (왼쪽에서 오른쪽으로):

• #373737
• #F3F4E8
• #ADA075
• #EDE4C9
• #A685BC

14. 캡틴

이 팔레트는 아마도 목록에서 가장 전문적으로 보이는 팔레트일 것입니다. 이 팔레트의 두 가지 진한 파란색이 그 주된 이유입니다. 그러나 붉은 색은 얼음을 깨고 웹 사이트에 다양성을 추가하는 데 큰 역할을 합니다.

이 포스트에 사용된 색상은 (왼쪽에서 오른쪽으로):

• #3B578E
• #DB2323
• #D7DEED
• #F7F9FF
• #201C44

15. 환경

우리가 공유하고 싶은 다음 색상 팔레트는 환경입니다. 이름은 녹색이 이 색상 팔레트를 지배한다는 것을 보여줍니다. 이 부드러운 녹색 색상은이 팔레트에서 제공되는 부드러운 청록색 색상과 완벽하게 어울립니다.

이 팔레트의 색상은 (왼쪽에서 오른쪽으로):

• #C2D3DO
• #56776A
• #42B7A7
• #EDEFF4
• #26423E

16. 소프트 리치

이 다음 팔레트에서 우리는 베이지와 레드의 좋은 조합이 무엇인지 명확하게 볼 수 있습니다. 그들은 모든 유형의 웹사이트에 성숙함을 줍니다. 눈에 띄는 또 다른 녹색을 추가하면 웹 사이트의 모양과 느낌도 약간 젊어집니다.

이 팔레트의 색상은 (왼쪽에서 오른쪽으로):

• #984B43
• #233237
• #B7A97C
• #F9F0D4
• #527C40

17. 매혹적인

행의 다음 팔레트는 또 다른 어두운 색상의 웹사이트입니다. 지배적인 색상은 짙은 자주색과 회색입니다. 그러나 더 밝은 색상은 웹 사이트에 약간의 따뜻함을 가져다줍니다.

이 팔레트의 색상은 (왼쪽에서 오른쪽으로):

• #D0B6D6
• #3CC203D
• #898989
• #F2F2F2
• #F9AEBD

18. 민트

민트 색상 팔레트는 웹사이트에 신선함을 선사합니다. 첫눈에 매우 수수하지만 오렌지와 퍼플 색상은 웹 사이트에 신선하고 다시 태어난 느낌을 줍니다.

이 팔레트에 사용된 색상은 (왼쪽에서 오른쪽으로):

• #31190A
• #B4BCA7
• #F99A53
• #54468E
• #E3EDE5

19. 소프트 옐로우

이 독특한 색상 팔레트는 대부분 따뜻한 색상을 포함합니다. 어두운 색과 밝은 색을 배경색으로 하고 있지만 전체적인 느낌은 밝은 색의 웹사이트에 가깝습니다.

이 팔레트의 색상은 (왼쪽에서 오른쪽으로):

• #DDCF30
• #437468
• #F1FFD1
• #4A4C49
• #FCFAD9

20. 미스터리

행의 마지막 색상 팔레트는 웹사이트에 사용할 수 있는 또 다른 어두운 색상의 팔레트입니다. 이 팔레트에 사용된 배경색은 차분하고 팔레트의 다른 밝은 색상이 나올 수 있도록 합니다.

이 팔레트의 색상은 다음과 같습니다.

• #131517
• #13828A
• #35363A
• #EEF5F7
• #AF8300

마지막 생각들

이 게시물에서는 선택한 색상 팔레트를 웹사이트에 적용하는 방법에 대한 몇 가지 팁을 공유했습니다. 그 외에도 웹 사이트에 우아함을 더하는 데 도움이 될 수 있는 20가지 아름다운 색상 팔레트도 보여 주었습니다. 질문이나 제안 사항이 있으면 아래의 댓글 섹션에 자유롭게 의견을 남겨주세요.

그리고 당신이 거기에 있는 동안 저희에게 알려주십시오. 이 색상 팔레트 중 가장 좋아하는 것은 무엇입니까?

EDGOR_21의 추천 이미지 / shutterstock.com