💁 issue
- transColor 의 rgb 값이 정상적으로 적용되지 않음
📑 원인
- 콘솔 확인 결과 색상 HEX 코드로 부터 String.slice로 추출해낸 rgb 값에 amount(가중치)를 곱하는 과정에서
정상적인 HEX 값 범위인 0~255를 초과하여 비정상적인 HEX 코드값이 리턴되는 경우를 확인
🚧 해결
// 기존의 로직
lighten: (color, amount) => {
if (!color) return;
const r = Math.round(parseInt(color.slice(1, 3), 16) * (1 + amount));
const g = Math.round(parseInt(color.slice(3, 5), 16) * (1 + amount));
const b = Math.round(parseInt(color.slice(5, 7), 16) * (1 + amount));
return `#${r.toString(16)}${g.toString(16)}${b.toString(16)}`;
// 변경된 로직
lighten: (color, amount) => {
if (!color) return;
const r = Math.min(
255,
Math.round(parseInt(color.slice(1, 3), 16) * (1 + amount))
);
const g = Math.min(
255,
Math.round(parseInt(color.slice(3, 5), 16) * (1 + amount))
);
const b = Math.min(
255,
Math.round(parseInt(color.slice(5, 7), 16) * (1 + amount))
);
const rHex = r.toString(16).padStart(2, "0");
const gHex = g.toString(16).padStart(2, "0");
const bHex = b.toString(16).padStart(2, "0");
return `#${rHex}${gHex}${bHex}`;
},
- Math.min(255, _) : amount(가중치)를 곱한 값이 255를 초과한다면 최대값을 255로 적용
- padStart(2,'0') : 조절된 rgb 값을 16진수로 변환하고 해당 숫자의 자릿수를 2 자리로 고정
🚧 개선해야 할 점
- 위의 경우를 polished 라이브러리와 비교했을 때 색상에 유의미한 차이가 있는 것 같아서
관련 레퍼런스를 찾아보고 있습니다.
