SYNCERのロゴ
アイキャッチ画像

HEXをRGBに変換する方法

JavaScriptを使って、カラーコードのHEX(例: #FF0000)をRGB(例: 255,0,0)に変換します。

サンプルコード

文字列のHEXを、配列のRGBに変換します。HEXは基本的に6文字です。これらを2文字ずつに分解し、それぞれを16進数から10進数に変換してあげるとRGBになります。HEXは6文字の場合(例: #FF0000)と3文字の場合(例: #F00)があるので、これも考慮するものとします。

function hex2rgb ( hex ) {
	if ( hex.slice(0, 1) == "#" ) hex = hex.slice(1) ;
	if ( hex.length == 3 ) hex = hex.slice(0,1) + hex.slice(0,1) + hex.slice(1,2) + hex.slice(1,2) + hex.slice(2,3) + hex.slice(2,3) ;

	return [ hex.slice( 0, 2 ), hex.slice( 2, 4 ), hex.slice( 4, 6 ) ].map( function ( str ) {
		return parseInt( str, 16 ) ;
	} ) ;
}

hex2rgb( "#ff8040" ) ;	// [ 255, 128, 64 ]
hex2rgb( "#f00" ) ;	// [ 255, 0, 0 ]
hex2rgb( "f00" ) ;	// [ 255, 0, 0 ]

デモ

好きなHEX値を指定して、RGB値を確認してみて下さい。

function hex2rgb ( hex ) {
	if ( hex.slice(0, 1) == "#" ) hex = hex.slice(1) ;
	if ( hex.length == 3 ) hex = hex.slice(0,1) + hex.slice(0,1) + hex.slice(1,2) + hex.slice(1,2) + hex.slice(2,3) + hex.slice(2,3) ;

	return [ hex.slice( 0, 2 ), hex.slice( 2, 4 ), hex.slice( 4, 6 ) ].map( function ( str ) {
		return parseInt( str, 16 ) ;
	} ) ;
}

var a = hex2rgb( "#ff8040" ) ;
a =
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年9月13日 (水)
コンテンツを公開しました。