두 색상 사이에 일련의 색상 생성

시작 색과 끝 색이 주어지면 알고리즘 사이에서 다양한 색상을 생성 할 수 있습니까? 예를 들어, 아래 이미지의 시작과 끝에서 파랑 / 회색의 명암 음영을 감안할 때 어떻게 중간 음영을 생성 할 수 있습니까?

내가 고려하고있는 한 가지 가능한 해결책은 두 가지 색상에서 그라디언트를 만든 다음 해당 그라디언트를 따라 등거리 지점에서 색상을 샘플링하는 것입니다. 이것이 최선의 방법일까요?

이것을 색상 보간 이라고 합니다 . 후드 아래에서 그라디언트가하는 일입니다. 다양한 방법과 방법을 사용하여 수행 할 수 있으며 결과가 정확히 보간되는 방법은 방법에 따라 다릅니다.

이 음악 시각화 프로그램 과 같이 색상을 동적으로 변경할 수 있도록 JavaScript를 사용하는 웹 프로젝트에서 일반적으로이 작업을 수행합니다 . 위의 예제에서 가져온 RGB를 사용한 매우 간단한 선형 보간 방법을 사용하는 JavaScript 구현은 다음과 같습니다.

라이브 데모

// Returns a single rgb color interpolation between given rgb color
// based on the factor given; via https://codepen.io/njmcode/pen/axoyD?editors=0010
function interpolateColor(color1, color2, factor) {
    if (arguments.length < 3) { 
        factor = 0.5; 
    }
    var result = color1.slice();
    for (var i = 0; i < 3; i++) {
        result[i] = Math.round(result[i] + factor * (color2[i] - color1[i]));
    }
    return result;
};
// My function to interpolate between two colors completely, returning an array
function interpolateColors(color1, color2, steps) {
    var stepFactor = 1 / (steps - 1),
        interpolatedColorArray = [];

    color1 = color1.match(/\d+/g).map(Number);
    color2 = color2.match(/\d+/g).map(Number);

    for(var i = 0; i < steps; i++) {
        interpolatedColorArray.push(interpolateColor(color1, color2, stepFactor * i));
    }

    return interpolatedColorArray;
}

다음과 같이 사용되며 보간 된 색상의 배열을 반환합니다.

var colorArray = interpolateColors("rgb(94, 79, 162)", "rgb(247, 148, 89)", 5);

색상 보간을 수행하기위한 PhotoShop (및 다른 프로그램) 확장도 찾을 수 있습니다. 그러나 보간 방법이 원하는 보간 방법과 같은지 확인하여 원하는 보간 방법을 사용할 수 있습니다.

이 답변을 살펴보십시오. 주어진 색상을 조금 더 어둡거나 밝게 만드는 방법은 무엇입니까?

여기서 각 RGB 구성 요소의 분리 된 값을 가져 와서 값을 나눕니다.

그러나 우리는 한 가지 문제가 있습니다. 색상 전환을 만드는 유일한 방법은 아닙니다.

첫 번째 방법은 가장 짧은 경로를 제공하지만 (1) 아마도 해당 경로가 필요한 경로가 아닐 수 있습니다.

이것은 또한 색상 모델이나 논리에 의해 영향을받습니다. 예를 들어 Lab * 색상 모델에서 빨강 및 녹색은 보색이므로 해당 모델의 짧은 경로는 중간 회색 (3)을 통과합니다.

색상의 색조 만 필요한 경우 다른 답변이 적합합니다.

Illustrator에서 블렌드를 RGB 또는 CMYK로 사용하십시오.

• 시작 색상 과 끝 색상이 각각 2 개의 도형을 만듭니다 (이 예에서는 회색과 검은 색,하지만 필요한 것을 선택하십시오)
• 가서 필요한 수량을 Object → Blend → Blend Options입력하십시오 Specified steps(아래 예에서 20).
• 두 개체를 선택하고을 선택하십시오 Object → Blend → Make. 그러면를 통해 개별 객체로 변환 할 수 있는 블렌드 가 생성 됩니다 Object → Expand. 그런 다음 자체 중간 코드를 사용하여 각 중간 오브젝트를 볼 수 있습니다.

이것은 다른 답변에 대한 추가 사항입니다.

sRGB에서 색상을 보간 할 때 RGB 값은 빛의 세기가 선형이 아니라 사람이 인식 한 빛의 강도가 선형임을 고려해야합니다. 이를 통해 값을 쉽게 저장할 수 있지만 다양한 색상 작업의 경우 선형 색상 공간으로 이동해야합니다.

빛의 강도에 대한 인간의 인식은 권력 법에 따라

linear = sRGB^2.2
sRGB = linear^(1/2.2)

둘 사이를 변환하는 데 사용할 수 있습니다. 이것은 sRGB의 값인 감마 값 2.2를 사용합니다. 이에 대한 자세한 내용은 이 Wikipedia 기사를 참조하십시오.

이 문제에 대한 자세한 분석과 잘못된 구현의 예는 여기 에서 찾을 수 있습니다 . 그중 하나는 선형 및 sRGB 보간을 사용하는 색상 그라디언트입니다.

Photoshop의 그라디언트 (또는 Ai의 "Blend")는 이미 시작 색상과 끝 색상 사이에서 선형 색상 전환을 얻는 방법으로 제공됩니다. 스크립팅 코드를 프로그래밍하지 않고 비선형 (곡선 전환 경로)을 얻는 방법은 무엇입니까?

한 가지 해결 방법은 조정 레이어 또는 혼합 모드 또는 둘 다를 사용하여 그래디언트 전환 경로를 수정하는 것입니다. 수정 레이어에 연속적인 레이어 마스크가 있고 시작과 끝에 애정을 0으로 만드는 경우 실제로 시작 색상에서 끝 색상으로 연속 변환됩니다.

여기에는 매우 복잡한 트위스트가 있습니다. "Target only"레이어에는 그라디언트가 있고 "Modifier"레이어는 "Color"모드를 혼합하여 연속적인 색상 이동을 생성합니다.

대비를 추가하는 조정 레이어 "곡선"에 의해 더 많은 왜곡이 발생합니다. 수정 자와 레이어 마스크가 동일하지만 반드시 그럴 필요는 없습니다. 시작과 끝에서 연속적이고 검은 색이면 모든 마스크가 정상입니다.

급격한 점프를 일으키는 불연속 블렌딩 모드와 커브가 있습니다. 그중 하나가 "Hue"입니다. 이 효과를 망치는 또 다른 가능성은 "0 변화", 즉 0 또는 모두 255로 클리핑하여 발생하는 눈에 띄는 일정한 색 영역입니다. 실제로 테스트하거나 계산하지는 않았지만 실제로 48 비트 / 픽셀 RGB 모드를 사용하는 데 도움이됩니다. 화면에는 여전히 24 비트 / 픽셀 만 있기 때문에 전혀 그렇지 않을 수도 있습니다.