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 =
関連記事
- RGBをHEXに変換する方法
- カラーコードをRGBからHEXに変換します。
- 要素の位置座標を取得する方法
- 指定した要素の位置座標を取得します。
- クリックした位置を取得する方法
- マウスでクリックした位置を取得するには、eventオブジェクトのpageX、pageYを参照します。
- RGBをHSLに変換する方法
- カラーコードをRGBからHSLに変換します。
- HSLをRGBに変換する方法
- カラーコードをHSLからRGBに変換します。