색 구성표 생성-이론 및 알고리즘 [닫기]

차트와 다이어그램을 생성 할 예정이며 색 구성표 및 알고리즘 예제에 대한 이론을 찾고 있습니다.

질문 예 :

• 보완 적 또는 유사한 색상을 생성하는 방법은 무엇입니까?
• 파스텔, 차갑고 따뜻한 색상을 생성하는 방법은 무엇입니까?
• 임의의 수의 고유 한 색상을 생성하는 방법은 무엇입니까?
• 이 모든 것을 16 진 삼중 항 (웹 색상)으로 변환하는 방법은 무엇입니까?

내 구현은 AS3에 있지만 의사 코드의 모든 예제는 환영합니다.

이 질문에 대한 자세한 정보를 찾고 (내가 고투 한 것이기도 함) 이 블로그를 찾았습니다 . Stefano Mazzocchi는 프로그래머가 UI 디자인을 위해 색상을 고르는 이유에 대한 이론을 설명하고 유용한 조언과 링크를 제공합니다.

그가 제안하는 첫 번째 조언은 색조와 채도를 선택하기위한 토대를 마련하는 명백한 사실입니다.

배경과 동일한 대비를 갖는 두 개의 정보는 동일한 중요도 수준 (다른 모든 것들은 동일)으로 인식되는 반면, 대비가 높을수록 중요도가 높고 대비가 낮을수록 중요도가 낮습니다.

이는 전경 및 배경의 색상을 선택하는 방법에 대한 첫 번째 힌트를 제공합니다. 중요한 정보는 낮은 대비를 사용해야하고 더 중요한 정보는 높은 대비를 사용해야합니다.

첫 번째 링크는 Kuler와 유사한 사이트 인 Color Scheme Designer 입니다. Kuler와 마찬가지로이 도구는 편리한 대화식 도구이지만 색상을 선택하는 방법, 즉 어떤 노랑 또는 녹색 또는 파랑과 함께 작동하는지에 대한 통찰력을 제공하지 않습니다.

다음으로 제공하는 링크 는 정보 디스플레이 그래픽에서 색상 사용 이라는 제목의 NASA 색상 사용 연구 실험실 웹 사이트 입니다. 이 사이트는 적절한 대비 등을 위해 색상을 선택하는 방법에 대한 자세한 정보를 제공하고 대비와 같은 것을 측정하기위한 수학 공식을 나열합니다. 해당 사이트에서 SW 코드 또는 의사 코드 알고리즘을 아직 찾지 못했지만 몇 페이지 만 보았습니다. Stefano는 또한 NASA Color Lab이 Munsell Color System을 사용한다고 지적합니다. HSV와 유사하지만 측정 가능한 색상 특성보다는 사람의 색상 인식을보다 정확하게 반영하기 위해 가중치를 부여한 .

Stefano의 블로그에 언급 된 마지막 링크는 Color Trends + Palettes :: COLOURlovers 사이트입니다. 입니다. 이 사이트는 Color Scheme Designer 또는 Kuler보다 색상 선택 알고리즘을 찾는 데 더 이상 도움이되지 않지만 특정 색상과 팔레트에 대한 우리의 쾌적한 즐거움에서 측정 할 수없는 현재 변경의 품질을 강조합니다. UI에 최신 트렌드를 반영하려면 방문 할 가치가 있습니다.

다시 한 번 NASA 웹 사이트를 확인하고 거기에있는 일부 페이지, 특히 Color Science 의 페이지를 읽으면 함께 작동하고 원하는 대비를 제공하는 색상을 선택하기위한 실행 가능한 알고리즘을 생각해 볼 수 있습니다.

편집 : 내가 찾은 대로이 영역에 유용한 링크를 추가 할 것입니다.

1. Colors.pdf를위한 대화식 유전자 알고리즘
2. 지각적인 컬러 세그먼테이션 알고리즘 .pdf
3. Great Web Design.html을위한 색상 및 색상 구성표 조합 안내서

색상 생성 도구는 http://kuler.adobe.com 이 가장 좋습니다.

사이트에서 컬러 팔레트 (5 가지 색상)를 만들 때 옵션은 유사, 단색, 트라이어드, 보완, 복합 및 음영입니다. 물론 색상을 자동 생성하는 대신 색상을 사용자 지정할 수 있습니다. 각 색상 블록에는 RGB 및 16 진수 (CMYK / HSV / Lab)의 숫자 값이 표시됩니다.

보완 적 또는 유사한 색상을 생성하는 방법은 무엇입니까?

여기에는 좀 더 색 이론 지식이 필요합니다. 여기 에서 멋진 기본 설명을 확인할 수 있습니다 . 컬러 휠을 참조하십시오.

파스텔, 차갑고 따뜻한 색상을 생성하는 방법은 무엇입니까?

일반적으로 파스텔 색상은 "부드러운 색상"입니다. 그들은 색조의 높고 낮은 스펙트럼입니다. Kuler의 사용자 생성 파스텔 색상 섹션을 참조하십시오.

임의의 수의 고유 한 색상을 생성하는 방법은 무엇입니까?

차트 목적으로 임의의 색상이 작동하는지 잘 모르겠습니다. 각 색상 선택은 수동으로 선택해야합니다.

이 모든 것을 16 진 삼중 항 (웹 색상)으로 변환하는 방법은 무엇입니까?

대부분의 그래픽 소프트웨어는 색상의 16 진수 값을 표시합니다. 16 진수는 ## (빨간색), ## (녹색), ## (파란색)으로 구성된 RGB 문자열입니다.

예를 들어, 순수한 빨강은 FF0000이고 순수한 파랑은 # 0000FF입니다. 자주색 (빨간색과 파란색을 혼합하여 얻을 수 있음)은 # FF00FF입니다.

차트를 만들 예정이므로 다음 블로그를 방문하여 영감을 얻으십시오.

http://infosthetics.com

http://flowingdata.com

시간이 있다면 색 이론 수업을 읽으십시오.

내가 한동안 염두에 두었던 아이디어는 필요한만큼 많은 색상에 대해 가능한 한 다른 색상 (제한 내)을 생성하는 것입니다. 동일한 차트에 대해 나중에 몇 가지 색상이 더 필요할 경우 (추가로 몇 개의 추가 막대가 추가 될 수 있음) 기존 색상을 동일하게 유지하면서 동일한 구성표에 맞아야합니다.

내가 생각 해낸 아이디어는 약간의 트릭입니다. 색상 원을 상상해보십시오 (색 공간을 통해 원을 정의 할 수는 있지만 채도와 밝기가 동일한 색조가 다를 수 있습니다). 이 원의 각도를도 단위로 표시하는 대신 0에서 255 사이의 범위를 갖습니다. 이진수에서는 00000000에서 11111111입니다. 8 비트 255에 1을 더하고 다시 0으로 오버플로되므로 자연스럽게 "원형 값"으로 작동합니다. (기술 용어에서 덧셈과 뺄셈은 모듈로 256입니다.)

트릭은 숫자를 비트 반전하기 위해 색 0, 색 1 등을 선택할 때입니다. C에서 그렇게하려면 ...

value = ((value & 0x0F) << 4) | ((value & 0xF0) >> 4);
value = ((value & 0x33) << 2) | ((value & 0xCC) >> 2);
value = ((value & 0x55) << 1) | ((value & 0xAA) >> 1);

따라서 시퀀스 0, 1, 2, 3, 4는 0, 128, 64, 192, 32로 변환됩니다.

요점은 256 가지의 고유 한 색상을 가지고 있으며 가장 초기의 색상은 매우 넓게 배치되어 있고, 후자의 색상은 덜 넓어지고 간격을 채 웁니다 (64는 0과 128 사이의 중간, 32는 중간입니다) 0에서 64 사이 등).

비트 리버스를 조정하면 특정 "각도"에 대한 모든 비트 폭이 작동하며 물론 색상의 다른 매개 변수에 대해 한 번에 여러 사이클을 실행할 수 있습니다 (색조가 빠르게 회전하지만 채도가 더 느리게 회전 할 수 있음).

"앵글"을 특정 RGB 숫자 또는 다른 것으로 매핑하는 방법에 대한 질문과 전문가가 아닌 것, ActionScript에서 비트 인증을 지원하는지에 대한 질문 만 남았습니다.

흥미로운 스택 오버플로 질문 인 " 컬러 휠 생성 기능 "이 있습니다. 권장 논문 (PDF) 중 하나를 읽을 수도 있습니다 .

이 질문은 나를 매혹 시켜서 인터넷 검색을 시작했습니다. :) 경험을 바탕으로 답변을 기대하지 마십시오.

기본적으로 색상을 사용하여 계산하려면 HSL 형식으로 표시되는 색상환 작업을 수행하는 것이 가장 좋습니다 .

이 포스트 의 저자 RGB를 HSL로 변환하는 방법에 대한 정보와 보색을 계산하는 방법에 대한 샘플 코드를 충분히 제공했습니다.

운이 좋으면 다음과 같은 어색한 AS3 라이브러리 중 하나가 작동하면 그 중 하나를 이해할 필요가 없습니다.

• 컬러 지즈
• 모조 컬러

다음 코드를 사용했습니다. 참고 : 눈 / 뇌의 작동 방식에 대한 이론을 사용하지 않고 빨간색 + 녹색 + 파란색 = 1과 같은 색상의 구개를 만들 수 있기를 원했으며 색상의 간격이 거의 균일했습니다. "me"매개 변수는 가능한 총 숫자 중 어떤 색을 사용 하는가입니다. 그것은 약 91 ish를 셉니다. 0에서 num-1까지 실행해야합니다. 다른 것들도 가능합니다. 위의 제약 조건은 임의적이지만 적어도 너무 많이 필요하지 않다고 가정하면 뚜렷한 색상을 생성합니다.

void select_color(int me,int num){
  int s[14]={0,1,3,6,10,15,21,28,36,45,55,66,78,91};
  int j,nrows=0,irow=0,jcol=0;
  float del,red,grn,blu;
// we build a red/green triangle with an area>=num
  for(j=0;j<14;j++)if(me>=s[j])irow=j;
  for(j=13;j>0;j--)if(num<=s[j])nrows=j;
  jcol=me-s[irow];
  del=1./(nrows-.9);
  red=1.-del*irow;
  grn=del*jcol;
  blu=1.-red-grn;
  glColor3f(red,grn,blu);
}

다시 말하지만, 색 이론을 사용하지 않기 때문에, 특히 부분적인 색맹을 가진 가끔 사용자와 관련이있는 경우 분별력을 최적화 할 수있는 검역소가 없습니다.

기본 색상 변수를 난수로 간단히 설정할 수도 있지만 시각적으로 구별되는 세트를 형성 할 가능성은 훨씬 낮습니다.

과거에는 20 가지 정도의 색상을 직접 선택하지 않고 직접 선택하여이 작업을 수행했습니다. 그래프가 매우 복잡하지 않으면 일반적으로 더 많은 것이 필요하지 않습니다. 이 방법은 단순하지만 그래프의 동일한 요소에 동일한 색상을 할당 할 수 있습니다 (예 : 항상 '판매'를 동일한 색상으로 만들어 그래프를보다 쉽게 ​​해석 할 수 있음).

나는 사진 에서 색상을 샘플링하는 것을 좋아 합니다. 디자이너로서 나는 이것을 수동으로한다. 프로그래머는 보통 임의의 픽셀을 선택합니다. 더 많은 제어 기능을 원하면 특정 규칙 세트를 준수하는 고유 한 '사진'을 만들 수 있습니다.

VisiBone의 온라인 유틸리티를 항상 좋아했습니다. 여러 색상을 선택하고 서로 얼마나 충돌하는지 대화식으로 평가할 수 있습니다. http://www.visibone.com/colorlab/

나는 "아날로그"예술에 적용되는 색상 대비에 익숙하고 디지털 아트에서 서로 충돌하는 색상이 얼마나 나쁜지에 놀랐 기 때문에 그것들이 얼마나 충돌 하는지를 말합니다. (분명히 나는 ​​디자이너가 아닙니다)