>웹 프론트엔드 >JS 튜토리얼 >JavaScript에서 RGB 색상 값을 16진수로 어떻게 변환할 수 있습니까?

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

Patricia Arquette
Patricia Arquette원래의
2024-12-19 10:22:13957검색

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.