「カラーを制するものは、デザインを制する」という有名な言葉を信じ、日々プログラムとデザインと会社経営を行っている、ユゲタです。
え？誰が言った言葉かって？そんな事は知らないし、このブログを見た人は、「下駄が言ってた」と言ってもらっても構わない。
WEBサービス制作、ホームページ作成、何かしらのツール構築・・・いろんな場合にWEBインターフェイスを使う場合はcssから逃げられません。
プログラマーが故に「デザインが苦手」と色指定をまるっとデザイナーに投げて仕事をしているヤツもいるが、色相の原則などは十分に理解していて当たり前の世界なので、カラーパレットの知識ぐらいはデフォルトで備えておきましょう。
そんなカラーパレットの指定がcssでは、RGB値の指定とハッシュ値"#"の指定があり、どちらを使ったほうがいいか迷うことありませんか？
正直どちらを使ってもいいんですが、相互に行き来するのって結構めんどくさいので、javascriptで自動変換できるスニペットを作っておきました。
その前に・・・
あなたはRGB派？ハッシュ派？
どっちでもいいと言われても実際にどちらかで記述しなければいけないのですが、人によってどちらか片方だけを使用するほうが圧倒的に多いと思われます。
もちろん、CSSをコピペだけで行っている人は、こういう事に対して疑問も執着も持ったことがないと思いますが、そもそもRGBとハッシュ値は何が違うのでしょうか？
簡単に説明すると、RGBは0から255の値をRGB分３つ繋げた形式で(0,0,0)が黒で(255,255,255)が白です。
ハッシュ値は、この数値を16進数に変換して繋げた状態で、#000000(#000)が黒で、#FFFFFF(#FFF)が白です。
ハッシュ値の方が若干ですが、使用する文字数が少ない分省エネっぽく扱えます。
ただ、何かしらの計算で色味を変更する場合には、rgb値で扱ったほうが楽に操作できるので、どっちを使うかは、そのシステムでどういう操作をするかによって決まってきそうですね。
個人的には通常はハッシュ値の短縮形(#FFF)で記述して、細かな値が必要な場合は、6桁で使っています。
またフェイドアウトなどをJSで記述する際は・・・cssを使うのでRGBを使うことってそんなにないですね。
でも、過去に数度使用したことがあるので、以下ソースコードを使うと便利になるかもね・・・
ソース
// (255,255,255)rgb値を#******に変換
// **,**,** -> #**
if(typeof String.prototype.rgb2hash === "undefined"){
String.prototype.rgb2str = function(){
var col = this;
if(!col.match(/^(\d{1,3})\,(\d{1,3})\,(\d{1,3})$/)){
console.log("Error : unable to convert !!");
return col;
}
var rgb = col.split(",");
var val="#";
for(var i=0;i<3;i++){
var val2 = parseInt(rgb[i],10).toString(16);
if(val2.length==1){
val+="0"+val2;
}
else{
val+= val2;
}
}
col = val;
return col;
};
}
// #******をrgb(255,255,255)に変換
// #** -> **,**,**
if(typeof String.prototype.hash2rgb === "undefined"){
String.prototype.str2rgb = function(){
var col = this;
if(!col.match(/^#[a-zA-Z0-9]{6}$/)){
console.log("Error : unable to convert !!");
return col;
}
var r = col.substr(1,2);
var g = col.substr(3,2);
var b = col.substr(5,2);
r = parseInt(r , 16);
g = parseInt(g , 16);
b = parseInt(b , 16);
col = r+","+g+","+b;
return col;
};
}
使い方
ネイティブ関数にしているので、文字列に直接関数指定ができます。
// RGBからハッシュ値へ変換
"#888888".hash2rgb()
> "136,136,136"
// ハッシュ値からRGBへ変換
"136,136,136".rgb2hash()
> "#888888"
あとがき
ソースの中身は、正規表現で値を抽出して、16進数と10進数を相互変換しているだけなんですが、計算機で変換する手間などを考えるとスニペットで行えるほうが遥かに効率的ですからね。
ちなみに、このソースコードでは、ハッシュ値の短縮形には対応していないので、6桁で使用してください。
0 件のコメント:
コメントを投稿