JavaScript에서 RGB 색상 값을 16진수로 어떻게 변환할 수 있습니까?-JS 튜토리얼-php.cn

JavaScript에서 RGB 색상 값을 16진수로 어떻게 변환할 수 있습니까?

Patricia Arquette

풀어 주다： 2024-12-19 10:22:13

원래의

903명이 탐색했습니다.

How Can I Convert RGB Color Values to Hex in JavaScript?

RGB에서 16진수 색상 값 가져오기

제공된 jQuery를 사용하면 요소 배경색의 RGB 값을 검색할 수 있습니다. 하지만 대신 16진수 값이 필요한 경우에는 어떻게 해야 할까요?

해결책

RGB 값을 16진수 값으로 변환하려면 다음 한 줄 함수를 고려하세요.

const rgba2hex = (rgba) => `#${rgba.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+\.{0,1}\d*))?\)$/).slice(1).map((n, i) => (i === 3 ? Math.round(parseFloat(n) * 255) : parseFloat(n)).toString(16).padStart(2, '0').replace('NaN', '')).join('')}`

로그인 후 복사

개선된 답변 (2021)

EcmaScript 기능의 발전으로 더욱 간결하고 업데이트된 rgb2hex 버전은 다음과 같습니다.

const rgb2hex = (rgb) => `#${rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/).slice(1).map(n => parseInt(n, 10).toString(16).padStart(2, '0')).join('')}`

로그인 후 복사

사용 예

이러한 기능을 다음과 같이 활용할 수 있습니다.

console.log(rgb2hex('rgb(0,0,0)')) // '#000000'
console.log(rgb2hex('rgb(255, 255, 255)')) // '#ffffff'
console.log(rgb2hex('rgb(255,0,0)')) // '#ff0000'
console.log(rgb2hex('rgb(38, 170, 90)')) // '#26aa5a'

로그인 후 복사

위 내용은 JavaScript에서 RGB 색상 값을 16진수로 어떻게 변환할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!