녹색-노란색 색 구성표를 설정하는 좋은 방법이 있습니까?

기본 색상 이론에 따르면 녹색, 노랑 및 빨강의 색상 팔레트는 웃기게 추악하고 충돌하는 색상입니다. 녹색을 눈에 띄는 색상으로 사용하면 그와 유사한 색상이 빨간색과 파란색입니다. 이러한 색상 구성표에는 노란색 공간이 없습니다.

그렇다면 사용자를 가리지 않고 녹색, 노랑, 빨강을 색 구성표로 결합 할 수있는 방법이 있습니까?

예를 들어, 웹 사이트에 이러한 색상을 사용하여 주어진 사용자의 실제 기술 수준에 대한 프로젝트에 필요한 기술 수준을 측정하는 데 사용되는 페이지가 있습니다. 녹색은이 수준을 만족하거나 초과합니다. 노란색은 약간의 기대치 부족을 나타내고 빨간색은 주어진 기술이 부족하거나 완전히 부족함을 나타냅니다.

여기 내 예가 있습니다 (글자 주위의 주황색과 회색 필드는 무시하고 관련이 없습니다).

우리는 이것이 끔찍한 것처럼 보이지만 녹색-노란색 전체를 준수해야하는 형식입니다. : /

주로 그래픽 / 웹 디자이너와 달리 프로그래머이기 때문에 색상 이론과 사용자 경험에 대한 나의 이해는 제한적입니다.

그것을 강조하기 위해 내 질문은 사용자 경험을 방해하지 않고 어떻게 전통적으로 충돌하는 색 구성표를 설정할 수 있습니까?입니다.

(내 질문이 부적합하면 제거 할 것입니다. 어떻게 물어야할지 모르겠습니다. 가장 적절한 것으로 보입니다)

녹색, 노랑, 빨강이 함께 갈 수 없습니까? 에티오피아 사람들은 몹시 모욕을 당해야합니다. 초록색, 노랑색 및 빨간색 이미지의 경우 Google에서 몇 가지 매력적인 예가 있습니다 (추악한 이미지와 함께).

색상 세트가 얼마나 잘 어울리는가는 정확한 색상 좌표, 상대 위치, 모양, 색상이있는 물체의 크기 및 원하는 효과 (예 : 진정, 흥미 진진함, 재미, 진지함, 대담함, 미묘함)에 따라 다릅니다. ). 나는 당신을 위해 단단하고 빠른 규칙을 가지고 있지 않지만, 여기에 실험 할 것이 있습니다.

채도 균형

왜곡 효과를 피하려면 (원치 않는 경우) 색상이 지정된 객체의 크기가 색상 채도에 반비례해야합니다. 예를 들어 채도가 매우 높기 때문에 채도를 낮추거나 (예 : 파스텔) 배경 이외의 색을 칠하십시오. 예를 들어, 텍스트에 색을 입히고 배경을 중립으로 두거나 텍스트 옆에 작은 모양이나 기호를 채색 할 수 있습니다. 후자는 접근성과 흑백 인쇄 목적을 위해 기술 일치를 중복 코딩하기 위해 형태를 사용할 수있는 기회를 제공합니다 (만족에 대한 녹색 체크 표시, 부족에 대한 노란색 느낌표 및 충분하지 않음에 대한 빨간색 "입력하지 않음"기호) .

간격

색상의 모양은 서로의 근접성에 따라 다릅니다. 인접 할 때 충돌보다 색상이 약간 떨어져도 괜찮습니다. 같은 색의 셀이 단일 객체로 인식되도록 함께 혼합되는 의미가 없다면, 각 셀 주위에 중립 테두리를 두어 색상을 더 많이 분리하십시오 (헤더에있는 것처럼). 다른 두께를 사용해보십시오. 흰색 테두리로 각 셀을 분리 하여 타일 모양으로 만듭니다.

무늬

색상의 조화도 색상의 패턴에 따라 달라 지므로 일반적인 비율과 색상 위치로 모형을 평가해야합니다. 예를 들어 대부분의 시간이 모두 녹색이고 사용자가 노란색과 빨간색의 "강조 표시"에 참석하는 것이 가장 중요한 경우 배경이 좋은 녹색 (예 : 채도, 빛이 적음) 및 노란색 및 빨간색은 "상단"에있는 것처럼 보입니다 (예 : 채도가 높고 어둡습니다). 패턴의 미학도 사용자와 소통하고 동기를 부여 할 수 있다고 생각하십시오. 사용자에게 특히 적합하지 않거나 불균형 한 기술 세트가있는 경우 추한 패턴을 원할 수 있습니다. 가장 매력적인 패턴은 사용자에게 가장 유리한 상태에 해당해야합니다.

사용성

귀하의 질문은 미학에 관한 것이지만, 색상 코딩 선택은 사용성에도 큰 영향을 미칩니다. 색상 선택은 다음과 같아야합니다.

• 특히 열악한 시각 조건 (예 : 햇빛 아래 모바일)에서 사용하는 경우 서로 시각적으로 구분됩니다.

• 배경 (전경의 경우) 또는 전경 (배경의 경우)과 좋은 대비를 제공합니다. 예를 들어 빨간색의 검은 색 텍스트는 그다지 좋지 않습니다. 일반적으로 전경과 배경에는 다른 수준의 밝기가 필요합니다.

• 색상이 코딩 한 색상과 일치하는지 확인하십시오. 예를 들어, 사용자가 참석해야하는 것들은 배경 및 다른 색상과 더 대비되어야합니다.

• 각 색상에도 다른 수준의 농도가 있으며, 농도가 녹색 (노란색보다 노란색보다 빨간색)으로 조정되어있어 접근성과 인쇄 성을 제공합니다. 적록 색맹 사용자 (가장 일반적인 종류의 색맹)가 여전히 색상 차이를 볼 수 있도록 녹색이 약간 푸르스름하고 / 또는 빨간색이 다소 짙게됩니다.

• 하나의 변수에만 색상 코딩을 사용하십시오. 나는 당신이 회색과 주황색을 무엇에 사용하는지 모르지만 혼동을 일으킬 수 있으며 사용자가 빨간색과 노란색을 사용하기가 더 어려워집니다. 세 가지 이상의 색상이있을 때마다 물건을 사용하기가 어렵습니다. 회색 및 주황색 코드를 코딩하는 다른 방법을 찾으십시오 (예 : 글꼴 크기 또는 무게를 사용하거나 셀 경계에 점선을 사용하십시오 ( G를 GUI에 배치 참조 )).

내가 작업 한 한 프로젝트에서 함께 제공 된 색상은 # E00000, # FF8400 및 # C0FFE0 (노란색은 아니지만 여전히 작동했습니다)입니다.

색상 코드 나누기 에서 색상 및 밝기 대비를 계산하는 방법을 포함하여 색상 코드 선택에 대해 더 자세히 설명합니다 .

실제 RGY 색상 대신 파스텔을 사용해보십시오. 채도가 감소하면 정보를보다 쉽게 ​​볼 수 있습니다.

파스텔 레드 16 진 : # F7977A RGB : 246-150-121

파스텔 그린 헥스 : # 82CA9D RGB : 130-202-156

파스텔 옐로우 헥스 : # FFF79A RGB : 255-247-153

이 세 가지 색상으로 세 가지 주요 과제를 봅니다.

• 빨간색과 녹색은 텍스트에 사용하기에 적합한 수준의 밝기를 가지며 노란색은 그렇지 않습니다.
• 노란색은 배경색에 대한 밝기가 좋고 녹색은 목적에 따라 밝아 질 수 있지만 빨간색은 분홍색으로 바뀝니다.
• 녹색과 빨간색의 불포화는 잘 작동하지만 노란색은 흐릿합니다.

나는 당신이 포화 색상의 큰 영역의 팝 아트 영향을 좋아하지 않는다고 가정 할 때 두 가지 옵션 만 생각할 수 있습니다 . 이 두 가지 모두 색상을 희미하게하여 채도의 영향을 최소화합니다.

• 셀 배경에서 그라디언트를 사용하십시오.
• 색상을 텍스트 그림자로 적용하십시오. 그림자는 텍스트를 눈에 띄게 강조하기 위해 상당한 양의 흐림이 필요합니다.

미학과 관련이없는 또 다른 도전이 있습니다. 빨간색은 다른 두 가지 색상을 압도하여 페이지의 음수 표시에주의를 기울입니다. 그것이 당신의 목표라면 좋습니다. 차트가 긍정적 인 성격을 갖기를 원한다면 어려움을 겪을 것입니다.

"빨간색", "노란색", "녹색"은 해석 할 여지가 많으므로 잘 작동하는 조합을 찾을 수 있습니다.

당신의 미학 문제를 위해 나는 당신의 "빨간색"과 "녹색"색상을 취하여 컬러 블렌더에 넣었습니다 . 그런 다음 블렌딩을위한 색상 모델로 pHSL을 선택했습니다. 이것은 이미 색상 세트를 개선했습니다.

다음으로 인상을 개선하기 위해 다른 "빨간색"과 "녹색"을 시도했습니다. 조금 더 어둡고 포화 / 강한 빨강입니다. 조금 더 노랑이 있고 더 높은 채도가있는 녹색.

좋습니다, 나쁘지 않지만 아직 준비되지 않았습니다.

사용성 문제의 경우 주목할만한 휘도, 색조 및 채도의 계층 구조가 있음을 명심하십시오. 노란색은 자연적으로 가장 높은 휘도 값을 가지므로이 필드가 가장 주목을받습니다. 각 색상을 개별적으로 조정하기 위해 색상을 색상 변환기 로 가져 왔습니다 . 이 예에서는 "노란색"과 "녹색"에 동일한 휘도 값을 부여했습니다. 노란색의 경우 낮은 휘도 또는 녹색의 높은 휘도는 미적으로 문제가있는 것 같습니다.

나는 Photoshop에서 내 조합을 시도하고 흰색 테두리 간격이 좋은 인상을 받았다는 것을 깨달았습니다. 따라서 셀의 흰색 간격과 각 입력 줄을 나누기 위해 최대 검은 선 하나를 권장합니다.

위에서 언급 한 도구를 사용하면 개인 취향이나 요구 사항을 더 잘 충족시키는 색상 조합을 찾을 수 있습니다 (예 : 녹색의 채도가 높음).

색상을 배경으로 사용할 때는 가독성을 높이고 메시지에서주의를 분산시킬 수 있으므로주의해야합니다. 즉, 빨간색 배경과 검은 색 글꼴입니다.

색상을 그레이 스케일로 변환하면 일반적으로 어떤 색상이 가장 잘 대비되는지 이해하는 데 도움이됩니다. 즉, 빨간색을 회색조로 변환하면 색상이 진한 회색입니다. 따라서 글꼴이 검은 색인 경우 배경으로 사용하기에 나쁜 색상입니다. 대비가 좋은 색상을 선택해야합니다.

그러나 사용자가 수행하려는 작업을 신속하게 이해하려면 셀을 비워두고 (밝은 색) 상태를 나타내는 작은 기호를 추가하십시오 (정사각형 또는 5 % 또는 색깔)

이렇게하면 사용자가 텍스트를 읽고 텍스트가 속한 카테고리를 상당히 빠르게 볼 수 있습니다.

그러나 색상을 결합하려면 "색상 색인"책을 구입하는 것이 좋습니다. 거기에는 잘 어울리는 수천 가지 조합이 있으며 시간을 절약 할 수 있습니다.

색상의 올바른 색조를 찾으면 빨강, 노랑 및 녹색을 함께 사용할 수 있습니다.

좋은 조합을 찾을 수있는 다음 사이트를 살펴 보는 것이 좋습니다.

http://www.colorschemer.com/schemes/search.php?s=red+yellow+green&submit= 검색

또는 그들 중 일부를 직접 만들어보십시오.

http://colorschemedesigner.com/

내가 실제로 권장하는 것은 색상 조합을 선택한 후 다른 사람에게 자신의 생각을 물어 보는 것입니다. 때때로 우리는 외형이 충분하지 않고 전혀 좋지 않은 경우에도 색상을 좋아합니다.

적절한 음영을 선택하는 동안 텍스트의 대비 및 가시성에 대해 생각하는 것을 잊지 마십시오.

나는 당신이 그것을 아주 중립적 인 색으로 사용하기 때문에 더 밝은 노란색을 사용하는 것이 좋습니다.

여기에 세 가지 계획이 있습니다.