퍼센트(%) 수치에 따라 색깔 표현하기

퍼센테이지를 표현할때 주로 상승 수치는 빨간색, 하향 수치는 파란색으로 표현 되는데요,

그 보다는 좀 세밀하게 표현 해 보고 싶었습니다.

마이너스가 클수록 더 파랗고, 플러스가 더 클수록 더 빨간겁니다.

예시를 보시죠

http://coin.fran.kr/all.php

지금 이 글을 쓰고 있는 상황엔 오올블루지만, 좀 내려 보시면 빨간 애들도 있습니다.

색깔을 구하는 소스는 아래와 같습니다.

function perColor($percent) {
    $hex = dechex(min(30,abs($percent)) / 30 * 100 + 155);
    
    if($percent < 0) {
        return "#0000".$hex;
    } else if($percent > 0) {
        return "#".$hex."0000";
    } else {
        return "#000000";
    }
}

간단하죠?

플러스 마이너스 30이 최대값입니다. +30이 되면 완전 빨간색, -30이 되면 완전 파란색. 그 사이는 퍼센테이지에 따라서 채도가 정해집니다. 이 최대값을 수정 하시려면 위에서 30이라고 된 값 2개를 수정 해 주시면 됩니다.

-0.1% 같은 경우 마이너스라 파랗게 보여야 하는데 너무 순차적으로 올라가면 파란색이 거의 티가 안나겠죠. 그래서 100이라는 값을 기본으로 줍니다.

색깔코드는 십진수 기준으로 0 ~ 255까지이기 때문에, 새빨갛고 새파랗게 하고 싶으면 나누는 수와 더하는 수의 합이 255가 나와야 합니다. 좀 덜 빨갛고 덜 파랗게 하고 싶다면 합이 255보다 작게 나오도록 조절 하시면 되겠죠?

정말 간단한 수식이므로 달리 설명할 필요가 없을 듯 합니다.

그냥 완전 빨간색, 완전 파란색은 좀 못생겼다고 생각하시면

if($percent < 0) {
        return "#5533".$hex;
    } else if($percent > 0) {
        return "#".$hex."3355";
    } else {
        return "#000000";
    }

이렇게 나머지 값들을 좀 조절 해 주시면 됩니다.

마지막으로, 색깔을 편하게 적용하고 ▲ ▼ 까지 표현 해 주고 싶다면, 아래 함수를 같이 쓰시면 됩니다.

function upDown($percent) {
    if($percent > 0) 
        return "<span style='color:".perColor($percent)."'>&#x25B4;".$percent."%</span>";
    else 
        return "<span style='color:".perColor($percent)."'>&#x25BE;".$percent."%</span>";
}

저는 이렇게 활용합니다.

<?=upDown('-25')?>

이렇게 해 주면 파란색의, 아래쪽 화살표를 가진 25가 보입니다.

예시는 아래 주소에서 보시면 됩니다.

http://coin.fran.kr/all.php

진짜 마지막으로, php뿐만 아니라 ajax로 불러와서 값을 세팅하는 분들을 위하여 자바스크립트 버전 함수입니다.

function perColor(percent) {
        hex = (Math.min(30,Math.abs(percent)) / 30 * 100 + 155).toString(16).substring(0,2);
        console.log(percent+' '+hex);
        
        if(percent < 0) {
            return "#5533"+hex;
        } else if(percent > 0) {
            return "#"+hex+"3355";
        } else {
            return "#000000";
        }
    }

    function upDown(percent) {
        if(percent > 0) 
            return "<span style='color:"+perColor(percent)+"'>&#x25B4;"+percent+"%</span>";
        else 
            return "<span style='color:"+perColor(percent)+"'>&#x25BE;"+percent+"%</span>";
    }