tande lab.

Archive
Tag "Color"

背景色に応じて、見やすいように文字色を白または黒に振り分けるサンプルコード。
Chrome Extension “Color Thief – 色泥棒” で利用したコードのメモです。

やってることは単純で、RGB それぞれの値を以下の計算式に当てはめます。

Y = 0.3*R + 0.6*G + 0.1*B

で Y > 127 なら黒、それ以外なら白、と振り分けています。

<script>
	var checkTxtColor = function(cR,cG,cB){

		// 最高値は 255 なので、約半分の数値 127 を堺目にして白/黒の判別する
		var cY = 0.3*cR + 0.6*cG + 0.1*cB;
		
		if(cY > 127){
			return "#000000"; // 黒に設定
		}
		return "#FFFFFF"; // 白に設定
	}

	// 関数 checkTxtColor を実行
	console.log(checkTxtColor(200,200,100));

	// 実行結果
	// #000000
</script>
Read More

久しぶりに Processing ネタでも。
Processing は画像の色を使う操作がとても簡単です。

例えばこの画像の色を使って
https://lh6.googleusercontent.com/-9t5egV7NgrQ/SjmjSrfCmqI/AAAAAAAARr0/dFZi4wXm7cw/s400/P1040840.JPG
こんなのが作れたりします。
https://lh4.googleusercontent.com/-CoNwQ4Gh66M/UW-jtvLWa_I/AAAAAAABSYc/vk6WnIW4lGY/s400/130418-0001.png

以下、サンプルコードです。

Read More

結構、昔からあるサービスなので、今更って感じですが。

Adobe が提供するカラーパレット共有サービス Kuler (クーラーと読むらしい) いいですよね。
https://kuler.adobe.com/

私、ずっと Web サービスだと思ってたんですけど
Adobe 製品の CS4 以降であれば、アプリ内から直接利用できるんですね!
知らなかった! 超今更!!

Read More

Android は 16bit での表示前提で設計されているそうなので、
今の時代でも実はフルカラー表示ではないようです。

中間色を擬似的に見せる Dithering という処理をハードウェア側で行って
マッハバンドが出にくいようにする仕組みになっているようなのですが、
中間色がキレイに表示にだせないから Android はグラデが汚いと言われるんですね。納得。

16bitカラー表示のモバイル機器 – beruponの日記

とか

Androidでの画像表示あれこれ – Mlog Memo

によると

Bitmap のオブジェクトとしては 32bit カラーのものが作れるけど、あくまで書き込み先の端末のスクリーンは 16bit を想定している

ということのようです。

年々世の中の端末の解像度は上がってきてるけど、
Android ではなるべくグラデーション表現とかやらない方がいいんですかねー。

どうやら Windows Phone とかも同様で 16bit 表現が前提らしい。
Windows Phone で採用されてる Metro UI がフラットデザインを推しているのって
そういう制約も加味された上でのことなんだろうか。きっとそうなんだろうな。

Read More

ひとつのアプリケーション内で利用する色って限られているので、いくつかパターンを決めておいて変数のように指定できたら便利だなーと思ってたら、ちゃんとそういう仕組みが用意されてた。

やり方は以下な感じ。

res > values

の中に "colors.xml" を新規作成します。

https://lh4.googleusercontent.com/-8O8Xi_Kmx9Q/UOcH0h_KtLI/AAAAAAABPTs/Nj5VUBt85kE/s800/130105-0001.png

下記のように、色の名前と16進数の色コードを対応付けて登録します。

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="white">#FFF</color>
	<color name="gray_normal">#666</color>
	<color name="gray_dark">#333</color>
	<color name="gray_light">#CCC</color>
	<color name="green_normal">#6a8c18</color>
	<color name="green_dark">#153703</color>
</resources>
Read More

色表記の変換が簡単になる JavaScript ライブラリの紹介です。

RGB color parser in JavaScript / Stoyan’s phpied.com
上記サイトで紹介されている rgbcolor.js を使うと

  • RGB表記 rgb(255,0,0)
  • 16進数表記 #FF0000
  • RGB各色を10進数で取得

が簡単にできます。

こちらでデモが見れます。
RGBColor test

Read More