티스토리 뷰

반응형

웹에서 사용하는 숫자를 나타내는 방법은 두 가지 입니다.

 

하나는 10진수를 사용한 방법이고,

예) rgb(255, 123, 28) 또는 rgba(255, 123, 28, 1)

또 한 가지는 맨 앞에 샵(#)을 붙이고 16진수를 이어서 나열하는 방법이다.

예) #FF7B1C 또는 #FF7B1CFF

 

코딩중 RGB코드를 16진수 코드로 바꿔야 하는 상황이 생기는데,

아래는 그 때 사용하기 위해 만든 함수이다.

 

function rgb2Hex(_rgbColor) {
    let rgbNums = _rgbColor.match(/rgb[a]{0,1}\((\d+)\,[\s]{0,}(\d+)\,[\s]{0,}(\d+)/);
    if(rgbNums != null) {
        let _hexColor = "#";
        for(i = 1; i <= 3; i++) _hexColor += parseInt(rgbNums[i]).toString(16);
        return _hexColor.toUpperCase();
    }
    else return _rgbColor;
}

console.log(rgb2Hex("rgb(255, 123, 28)")); // #FF7B1C
console.log(rgb2Hex("rgba(255, 123, 28, 0.5)")); // #FF7B1C
console.log(rgb2Hex("  rgb(255, 123, 28)  ")); // #FF7B1C
console.log(rgb2Hex("rgb(255,    123,    28)")); // #FF7B1C
console.log(rgb2Hex("#FF7B1C")); // #FF7B1C
console.log(rgb2Hex("Hello")); // Hello
console.log(rgb2Hex("{ background: rgb(255, 123, 28); color: rgb(0, 0, 0) }")); // #FF7B1C

 

문자열 내에 여러 개의 rgb코드를 입력해도 하나만 나오게 했다.

반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
«   2024/05   »
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함