コンピューターが速くなり、メモリが安くなる程チャレンジしたい高解像度化。4K/8Kなど広さの解像度や、フレームレートという時間の解像度に加えて、表現できる色自体の高解像度化も図りたい。HDR(High Dynamic Range)に対応したテレビで対応コンテンツを見ると、今までのディスプレイでは表現できなかった発色と、光の表現を体感できる。ぜひ、これをプログラミングで自由自在に使いたい!

残念なことにブラウザにおけるHDR向けの仕様策定は始まったばかり。まだ実際のブラウザでは試すことはできない様子。
High Dynamic Range and Wide Gamut Color on the Web


LCh 3 colors picker」(src on GitHub)
CSS4で対応予定のLCH色指定、ステキな色選択LChコンポーネントがあったので、export文を1行加え、ESモジュール対応、シンプルなサンプルと3色選ぶアプリを作ってみた。HSLと違って、色相が変わっても見た目の明るさがほぼ同じで使い勝手よし!

既存のRGBで表現できている範囲が白線で表示できる機能があってONにしている。この境界はHDR対応のディスプレイやテレビだとぐっと広がっているはず。 ブラウザでHDRが気軽に楽しめる日が待ち遠しい。


テレビのHDRモードをHLGにすると、色の分解能はともかくダイナミックレンジは広くなる。ひとまずこれを利用して、花火などの表現には使えそう。

iPhoneのディスプレイも通常のRGBそれぞれ8bitの計24bitでは収まらない表示能力があるはず。ブラウザが対応するのも待つばかりでなく、ネイティブアプリとして開発して、せっかくの性能をフルに使う方法、また調べてみたい。

日本人男性の5%、日本人女性の0.2%が色弱という。
色覚特性について|メガネスーパー 眼鏡(めがね、メガネ),コンタクト,サングラス,補聴器販売
フランス・北欧の男性では10%と、そう珍しいことではありません。(色覚多様性 - Wikipedia

この色なんだろう?色を通じた子供とのコミュニケーションにも活用してもらえればと、
WebMegane colorsight」をもっとスマホで手軽につかえるバージョン「iromieru / いろみえる」を開発!


iromieru / いろみえる
色名は「JIS慣用色名 - Wikipedia」を利用しています(colorjis.js / colorjis.csv

色覚特性の人は”Super Green Eyes”の持ち主!
色覚特性(いわゆる色盲・色弱)の人は微妙な「緑」の違いを容易に識別できるといわれています。
色覚特性について|メガネスーパー
人も自分と同じように見えていると思ってしまいがちですが、大間違い。
色覚特性を細かく計測するアプリを作ってみたいですね。

MacBook Pro など、カメラ付きのPCでも動きます!
この色なんだろう?を手軽に解決!?

iromieru src on GitHub

ARアプリのテンプレートとしても活用ください!
WebMegane colorsight も、JISカラーに対応版にバージョンアップ!

Code for Sabae発、WebMeganeがCode for Nerimaに飛び火。
WebMegane(色覚体験)

WebMegane、色を文字化してみました。

colorsightsrc on GitHub in JS
時計表示のおまけ付き! 簡単なJavaScriptで改造可能です!


マダガスカル、モロッコからの留学生へIchigoSodaレクチャーする高専生!


夜は高専インターンOG/OBと!

高専生による高専生のための、最高のインターンを目指す、jig.jpインターン、申込み期限間近!
学生インターンプログラム2018~全国高専生向けjig.jpインターンシップ募集開始のお知らせ~

Webものづくりの鍵、色。

シンプルに使える色選択コンポーネントを目指して、作ってみました。


「circle color picker」 クリックかタップすると円形パレット登場

まだ、PC用ですが、タブレット、スマホで使うことを意識してます。

参考リンク
- 色関係アプリ 2012年一日一創より


「画像色付け」

画像に色付け

モノクロのクリップアートを色付けするアプリです。
ドラッグアンドドロップでファイルを加工できます。

LICENSE: CC BY (show & link to this page)


「ランダム配色」

ランダム配色

70:25:5 で配色するといいみたいです。
とりあえず、ランダムにいろいろ試せるアプリです。 参考「色彩センスのいらない配色講座


「カラースライダー」

カラースライダー

縦型のスライダーを作ってみたので、色作成ツールにしてみました。
ひとまず、PC用なので、スマホでは使いにくいです。


「虹色ボール」

SVGで虹を表現してみました。
なかなかいい動きしてくれます。


「Webカラー当てクイズ」

色あてクイズです。
ウェブ標準、W3CのCSSの色として定義されている146色から出題され続けます。覚えると、ウェブアプリ作成の際に気の聞いた色がさっと使えて便利そうです。
CSS Color Module Level 3


「色当てクイズ」

色あてクイズ

光の三原色、赤、緑、青を混ぜて、右側の色をつくってみましょう。
#???というのが色を表し、赤、緑、青の順番で16進数でそれぞれの強さを指定します。

Tweet
クリエイティブ・コモンズ・ライセンス
この作品は「Creative Commons — CC BY 4.0」の下に提供されています。
CC BY / @taisukef / アイコン画像 / プロフィール画像 / RSS