조건부 서식 — 색상 변환 비율

StackOverflow https://stackoverflow.com/questions/25007

  •  09-06-2019
  •  | 
  •  

문제

백분율을 녹색(100%)에서 빨간색(0%), 노란색이 50% 범위의 색상으로 변환하는 가장 쉬운 방법은 무엇입니까?

저는 일반 32비트 RGB를 사용하고 있으므로 각 구성 요소는 0에서 255 사이의 정수입니다.저는 C#으로 이 작업을 하고 있지만 이와 같은 문제의 경우 언어는 그다지 중요하지 않다고 생각합니다.

Marius와 Andy의 답변을 바탕으로 다음 솔루션을 사용하고 있습니다.

double red = (percent < 50) ? 255 : 256 - (percent - 50) * 5.12;
double green = (percent > 50) ? 255 : percent * 5.12;
var color = Color.FromArgb(255, (byte)red, (byte)green, 0);

완벽하게 작동합니다. Marius 솔루션에서 조정해야 했던 유일한 조정은 100%일 때 (255 - (퍼센트 - 50) * 5.12 수율 -1과 같이 256을 사용하는 것이었고, 어떤 이유로 Silverlight에서 노란색이 발생했습니다(-1, 255, 0). ) -> 노란색 ...

도움이 되었습니까?

해결책

이 기능을 JavaScript로 만들었습니다.색상이 CSS 문자열임을 반환합니다.백분율을 변수로 사용하며 범위는 0에서 100까지입니다. 알고리즘은 모든 언어로 만들 수 있습니다. 라코 디스

다른 팁

원하는 것은 HSV 또는 HSL 색 공간에서 0 %에서 100 %까지 일부 포인트를 할당하는 것입니다. 거기에서 색상을 보간하고 (노란색은 빨간색과 녹색 사이에 있습니다.) 색상을 RGB로 변환 할 수 있습니다. . 그러면 둘 사이에 멋진 그라데이션이 생깁니다.

하지만 색상을 상태 표시기로 사용하고 사용자 인터페이스 관점에서 사용한다고 가정하면 색상의 작은 변화를 보는 데 매우 좋지 않기 때문에 이는 좋은 생각이 아닐 것입니다. 따라서 값을 예를 들어 3 ~ 7 개의 버킷으로 나누면 상황이 변경 될 때 약간의 정밀도를 희생하면서 더 눈에 띄는 차이를 얻을 수 있습니다 (어쨌든 이해하지 못할 가능성이 높습니다).

모든 수학을 제쳐두고 결국에는 v가 입력 값인 다음 색상의 조회 테이블을 권장합니다. 라코 디스

이것은 HSL 값 (0.0, 1.0, 1.0), (30.0, 1.0, 1.0), (60.0, 1.0, 1.0), (90.0, 1.0, 1.0), (120.0, 1.0, 1.0)에서 매우 순진하게 변환되었습니다. ), 목적에 맞게 색상을 약간 조정하고 싶을 수 있습니다 (일부는 빨간색과 초록색이 '순수'가 아닙니다).

참조 :

의사 코드에서.

  • 0-50 %에서 16 진수 값은 FFxx00이됩니다. 여기서 

    XX = ( Percentage / 50 ) * 255 converted into hex.

  • 50-100에서 16 진수 값은 xxFF00이됩니다. 여기서 

    XX = ((100-Percentage) / 50) * 255 converted into hex.

    도움이되고 이해할 수있는 희망

이것은 세 가지 방법으로 현재 허용되는 답변을 개선하는 훌륭하고 깨끗한 솔루션입니다.

  1. 매직 넘버(5.12)를 제거하여 코드를 더 쉽게 따라갈 수 있도록 합니다.
  2. 백분율이 100%일 때 -1을 제공하는 반올림 오류가 발생하지 않습니다.
  3. 사용하는 최소 및 최대 RGB 값을 사용자 정의할 수 있으므로 단순한 rgb(255, 0, 0) - rgb(0, 255, 0)보다 더 밝거나 더 어두운 범위를 생성할 수 있습니다.

표시된 코드는 C#이지만 알고리즘을 다른 언어에 적용하는 것은 쉽지 않습니다.

private const int RGB_MAX = 255; // Reduce this for a darker range
private const int RGB_MIN = 0; // Increase this for a lighter range

private Color getColorFromPercentage(int percentage)
{
    // Work out the percentage of red and green to use (i.e. a percentage
    // of the range from RGB_MIN to RGB_MAX)
    var redPercent = Math.Min(200 - (percentage * 2), 100) / 100f;
    var greenPercent = Math.Min(percentage * 2, 100) / 100f;

    // Now convert those percentages to actual RGB values in the range
    // RGB_MIN - RGB_MAX
    var red = RGB_MIN + ((RGB_MAX - RGB_MIN) * redPercent);
    var green = RGB_MIN + ((RGB_MAX - RGB_MIN) * greenPercent);

    return Color.FromArgb(red, green, RGB_MIN);
}

노트

다음은 몇 가지 백분율 값과 우리가 생성하려는 해당 빨간색 및 녹색 비율을 보여주는 간단한 표입니다.

VALUE   GREEN    RED       RESULTING COLOUR
 100%    100%     0%       green
  75%    100%    50%       yellowy green
  50%    100%   100%       yellow
  25%     50%   100%       orange
   0%      0%   100%       red

다행히도 당신은 그것을 꽤 명확하게 볼 수 있습니다

  • 녹색 값은 백분율 값의 2배입니다(단, 최대 값은 100임).
  • 빨간색은 반대입니다.2x(100 - 백분율)(그러나 최대값은 100)

그래서 내 알고리즘은 다음과 같은 테이블의 값을 계산합니다.

VALUE   GREEN    RED
 100%    200%     0%
  75%    150%    50%
  50%    100%   100%
  25%     50%   150%
   0%      0%   200%

...그런 다음 Math.Min() 100%로 제한합니다.

자바 스크립트 코드를 기반으로이 파이썬 함수를 작성했습니다.십진수로 백분율을 사용합니다.또한 백분율 스케일에서 더 오랫동안 색상을 빨간색으로 유지하기 위해 값을 제곱했습니다.또한 색상 범위를 255에서 180으로 좁혀 각 끝에 더 어두운 빨강과 녹색을 제공했습니다.이것들은 멋진 색상을 제공하기 위해 재생할 수 있습니다.중간에 주황색을 추가하고 싶지만 제대로 작업을해야합니다. 라코 디스

노란색은 빨간색과 녹색이 혼합되어 있으므로 #F00로 시작한 다음 #FF0를 누를 때까지 녹색으로 슬라이드 한 다음, #0F0까지 빨간색으로 슬라이드 할 수 있습니다. 라코 디스

다음 Python 루틴을 사용하여 색상을 혼합합니다. 라코 디스

예 : 라코 디스

다른 루틴은 이것을 래핑하여 "조건부 서식"에 대한 숫자 값을 멋지게 혼합합니다. 라코 디스

그래서 Jonas의 경우 : 라코 디스

ActionScript 3 용 솔루션 : 라코 디스

R-G-B이므로 색상은 정수 값 -1 (흰색)에서 -16777216 (검정색)으로 바뀝니다.중간 어딘가에 빨간색 녹색과 노란색이 있습니다.노란색은 실제로 -256이고 빨간색은 -65536이고 녹색은 -16744448입니다.따라서 노란색은 RGB 표기법에서 실제로 빨간색과 녹색 사이가 아닙니다.파장의 관점에서 보면 녹색은 한쪽에 있고 빨간색은 스펙트럼의 다른쪽에 있다는 것을 알고 있지만 스펙트럼이 모든 가시적 인 색상을 나타내지 않기 때문에 컴퓨터에서 사용되는 이러한 유형의 표기법을 본 적이 없습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top