색상 및 웹 색상 체계 이해
웹 사이트에 사용할 수있는 네 가지 기본 색 구성표가 있습니다. 이 기사의 각 페이지에는 색 구성표의 그림과 Photoshop에서 비슷한 구성표를 생성하는 방법이 나와 있습니다.
- 단색의같은 색조의 색을 사용합니다. 흰색이나 검은 색이 얼마나 많이 추가되는지에 따라 색조가 달라질 수 있습니다.
- 유사한이렇게하면 색상환에서 서로 가깝게있는 색상이 사용됩니다.
- 보완적인이것은 보색 구조의 두 색상이 색상환에서 서로 반대이기 때문에 종종 "반대"로 간주됩니다.
- 삼중주의이 색상은 색상환에 고르게 배치됩니다.
모든 색상 구성표는이 노란색을 기본 색상으로 사용합니다.
02 중 10단색 웹 색 구성표
이 색 구성표는 내 기본 색의 머금은 노란색을 사용하고 흰색과 검정색을 추가하여 색조를 만들고 그에 따라 색조를 조정합니다.
- 왼쪽 위 - 기본 색상 # ffe500
- 오른쪽 상단 - 50 % 흰색의 채우기를 추가하여 # fff280을 얻습니다.
- 왼쪽 하단 - 흰색을 75 % 채우고 # fff8bf를 얻습니다.
- 오른쪽 아래 - 검정색을 50 %로 채워서 # 7f7200을 얻습니다.
단색의 색 구성표는 모든 색 구성표의 눈에 종종 가장 쉽습니다. 색조와 색조가 완만하게 변하면 색이 서로 잘 섞입니다. 이 색 구성표를 사용하여 사이트를 더 유동적으로 보이게하십시오.
03 / 10추가 단색 웹 색 구성표
구성표에 더 많은 색상을 얻기 위해 검정색 20 %의 사각형을 추가했습니다. 색상에 검정 또는 흰색을 추가하면 페이지의 색조를 어지럽히 지 않고 팔레트에 새로운 색상을 만들 수 있습니다.
04 중 10유사한 웹 색 구성표
이 색상 표는 노란색 기본 색상을 사용하고 Photoshop 색상 표에서 색조를 30도 더 가감합니다.
- 왼쪽 위 - 기본 색상 # ffe500
- 오른쪽 상단 - +30도에서 # 99ff00
- 왼쪽 하단 - -30도에서 #ff6600
- 오른쪽 하단 - 흰색 100 % #ffffff
유색 인종은 서로 잘 어울릴 수 있지만 때로는 심하게 충돌 할 수도 있습니다. 자신이나 가족, 친구들보다 더 많은 사람들과 함께이 계획을 테스트하십시오. 그들이 일할 때, 단색 방식보다 더 화려하지만 거의 유동적 인 사이트를 만듭니다.
05 중 10더 유사한 웹 색 구성표
구성표에 더 많은 색상을 얻기 위해 검정색 20 %의 사각형을 추가했습니다.
06 중 10보완적인 웹 색 구성표
보완적인 색 구성표는 다른 색 구성표와 달리 일반적으로 두 가지 색만 있습니다. 기본 색상과 색상환의 반대쪽입니다. Photoshop을 사용하면 쉽게 보색을 얻을 수 있습니다. 보색을 원하는 색상 영역을 선택하고 Ctrl-I를 누르기 만하면됩니다. Photoshop이이를 반전합니다. 중복 레이어에서이 작업을 수행해야 기본 색상이 손실되지 않습니다.
- 왼쪽 - 기본 색상 # ffe500
- 오른쪽 - 보완 # 001aff
보완적인 색 구성표는 다른 색 구성표보다 훨씬 더 눈에 띄기 때문에 신중하게 사용하십시오. 그들은 주로 눈에 띄는 조각에 사용됩니다.
07 중 10보다 보완적인 웹 색 구성표
이 버전을 얻으려면 색상의 아래쪽 절반에 50 % 흰색을 추가하고 가운데 사각형에는 30 % 검정색을 추가했습니다. 보시다시피 몇 가지 옵션이 있지만 여전히 보색입니다.
08 중 10Triadic Web Color Scheme
Triadic 색 구성표는 색상 휠 주변에 거의 동일하게 3 가지 색상으로 구성됩니다. 색상환이 360도이기 때문에 다시 색상 선택기의 색조 상자를 사용하여 기본 색상에서 120도를 더하거나 뺍니다.
- 왼쪽 위 - 기본 색상 # ffe500
- 오른쪽 상단 - 120도까지 # e500ff
- 왼쪽 아래 -120도 ~ # 00ffe6
- 오른쪽 하단 - 흰색 100 % #ffffff
Triadic 색 구성표는 종종 매우 활기찬 웹 페이지를 생성합니다. 그러나 보색 체계와 마찬가지로 사람들에게 다르게 영향을 줄 수 있습니다. 반드시 테스트하십시오.
색상이 색상환 주위에 균등하게 배치 된 4 색 또는 4 색 색상 표를 만들 수도 있습니다.
09/10더 많은 Triadic Web Color Scheme
다른 예제와 마찬가지로 추가 색상을 얻기 위해 색상에 30 % 검정색 사각형을 추가했습니다.
10/10불협화음 웹 색 구성표
아름다움은 보는 사람의 시선에 달려 있지만, 모든 색상이 함께 나타나지는 않는다는 것은 불행한 사실입니다. 불협화음 색상은 색상환에서 약 30도 이상 떨어져있는 색상으로, 보완되지 않거나 트라이어드의 일부가 아닙니다.
불협화음 색 구성표는 매우 충격적 일 수 있으므로주의를 기울이는 데에만 사용해야합니다. 이 색상은 종종 충돌하기 때문에주의를 기울여야하는 것이 정확히 원하는 색상이 아닐 수도 있습니다.
