HEX를 RGBA로 변경 후 inline 스타일에 적용하기

예리에르·2023년 10월 6일

CSS

목록 보기

4/7

문제 - var()로 정의된 HEX 색상의 투명도 조절

App.scss에 저장되어 있는 색깔변수

:root {
	    --color-chart-c-04: #77E266;
}

디자인 가이드에 적힌 내용

background: rgba(119, 226, 102, 0.80);
 box-shadow: 0px 0px 10px 0px rgba(119, 226, 102, 0.50);

style에 적용이 필요한 jsx

<span key={`label-${i}-${j}`} className={`${styles.label}`} style={{
                           backgroundColor: color,
                           opacity: '80%',
                           boxShadow: `0px 0px 10px 0px ${chartColors[index]}`}} />```

개발의 관리를 용의하기 위해 자주 사용되는 색깔은 root에 변수로 설정하였습니다. background 처럼 전체의 opacity를 주는거라면 css나 style에서 간단하게 설정할 수 있지만, jsx에서 var() 값을 가져와서 경우에 따라 다르게 opacity를 적용하는데 문제가 발생했습니다.

chartColors는

['var(--color-chart-c-01','var(--color-chart-c-02','var(--color-chart-c-03','var(--color-chart-c-04',...]

형태의 데이터를 담고있는 배열입니다.

해결

1. HEX -> RGB

export function extHexToRGB(hex: string, alpha?: number) {
    let r = parseInt(hex.slice(1, 3), 16),
        g = parseInt(hex.slice(3, 5), 16),
        b = parseInt(hex.slice(5, 7), 16);

    if (alpha) {
        return "rgba(" + r + ", " + g + ", " + b + ", " + alpha + ")";
    } else {
        return "rgb(" + r + ", " + g + ", " + b + ")";
    }
}

먼저 HEX 코드#0000 를 받아서 16진수로 변환하여 rgb의 형태로 변환시켜줍니다.
추가적으로 문제에 필요한 alpha값을 추가해주어 opacity의 변화도 가능하게해줍니다.

2. 모듈화 하기

export function extChartHexToRGB(chartColor: string, alpha: number = 1) {
    let rgb = '';
    switch (chartColor) {
        case 'var(--color-chart-c-01)':
            rgb = extHexToRGB('#D67EF5', alpha)
            break;
        case 'var(--color-chart-c-02)':
            rgb = extHexToRGB('#F2D226', alpha)
            break;
        case 'var(--color-chart-c-03)':
            rgb = extHexToRGB('#64CFE7', alpha)
            break;
        case 'var(--color-chart-c-04)':
            rgb = extHexToRGB('#77E266', alpha)
            break;
        case 'var(--color-chart-c-05)':
            rgb = extHexToRGB('#0F82EC', alpha)
            break;
        case 'var(--color-chart-c-06)':
            rgb = extHexToRGB('#E095AC', alpha)
            break;
        case 'var(--color-chart-c-07)':
            rgb = extHexToRGB('#F3851F', alpha)
            break;
        case 'var(--color-chart-c-08)':
            rgb = extHexToRGB('#17A58C', alpha)
            break;
        case 'var(--color-chart-c-09)':
            rgb = extHexToRGB('#8879EA', alpha)
            break;
        case 'var(--color-chart-c-10)':
            rgb = extHexToRGB('#866E6E', alpha)
            break;
        case 'var(--color-chart-c-11)':
            rgb = extHexToRGB('#1000C8', alpha)
            break;
    }
    return rgb
}

현재 개발하고 있는 컴포넌트는 차트로 최대 11개의 차트색깔을 미리 설정해두었습니다. 다른 차트에서도 사용할 수 있게 var() 값이 들어오면 원하는 opacity를 가진 rgbga 문자열을 반환해줍니다.

적용

const color = chartColors[index];

<span key={`label-${i}-${j}`} className={`${styles.label}`} style={{
                            backgroundColor: color,
                            opacity: '80%',
                            boxShadow: `0px 0px 10px 0px ${extChartHexToRGB(color, 0.5)}`}}>