Windowsのおまけ電卓で10進数と16進数の変換をしよう

Windowsにおまけでついてくる電卓を使って10進数と16進数の変換をします。ソフトウエアで色を指定するときに必要な場面がときどきあるので知っていたら便利だと思います。普段の生活で16進数を使うことはほとんどないと思いますけど。

Windows7のとき

電卓を起動しよう

スタートボタン→[すべてのプログラム]→[アクセサリ]→[電卓]

calc

このままでは変換しようがないので

メニューの[表示]→[プログラマ]で電卓を切り替えます。

calc72

Windowsにはいろんな電卓が入っているんです。知ってましたか?

10進→16進変換をしよう

10進の「128」を16進に変換してみましょう。

まず[10進]モードにします。
左上にある[10進]ボタンをクリックします。

calc73

電卓の数字キーで「128」を入力します。

calc74

[16進]ボタンをクリックすると「80」と表示されます。
10進の「128」は16進数の「80」つまり「はちぜろ」です。

calc76

16進→10進変換をしよう

16進の「A0」を10進に変換してみましょう。

さっきの「80」をクリアします。
[16進]ボタンをクリックして[16進]モードにします。
「A0」と入力します。

calc77

[10進]ボタンをクリックすると「160」と表示されます。
16進数の「A0」は10進数の「160」です。

calc78

Windows10のとき

操作はWindows7の電卓とほぼ同じなので↑を参考に。

電卓を起動しよう

  1. ウインドウズボタンの隣の検索ボタン(虫眼鏡のボタン)クリック→「電卓」と入力して[自分のコンテンツ]をクリック
  2. ウインドウズボタンをクリック→[全てのアプリ]をクリック→左側のリストを下にスクロールして[電卓]をクリック

これで電卓が起動しなければ、、すみません。Google先生に教えてもらってね。

calc10

Windows7に比べるとずいぶんあっさりした電卓ですね。左上にあるメニューボタン(黒い3本横ラインのボタン)をクリックして[プログラマー]をクリックします。

calc101

10進→16進変換をしよう

10進の「128」を16進に変換してみましょう。

まず[10進]モードにします。
左上の[DEC]ボタンをクリックします。

calc102

Windows7の時と同じく、電卓の数字キーで「128」を入力し、左上にある[HEX]ボタンをクリックすると16進値の「80」が表示されます。[HEX]ボタンは[DEC]ボタンのすぐ上ですよ。

16進→10進変換をしよう

16進の「A0」を10進に変換してみましょう。

さっきの「80」をクリアします。
[HEX]ボタンをクリックして[16進]モードにします。
「A0」と入力します。[DEC]ボタンをクリックすると「160」と表示されます。

以上です。

色のRGB値を変換するときは、R、G、Bそれぞれの値を変換したうえでソフトウエアに入力してくださいね。

 

色の話7 – 10進値と16進値で色を指定する

前回のおさらい。

すべての色は赤・緑・青の組み合わせで表現できる

『光の三原則』という言葉があるように、パソコンの画面上のすべての色は赤・緑・青の3色の組み合わせで表現します。

『ブルー』といっても薄い青から濃い青、緑がかった青や黒っぽい青などいろいろありますが『赤:78 緑:103 青:200のブルー』と指定すれば色を特定することができます。
実際には『RGB(78,103,200)』と表現します。

  • R → Red → 赤が78
  • G → Green → 緑が103
  • B → Blue → 青が200

ちなみにRGB(78,103,200)は↓の色。

50

色味のない色、つまり黒と白も赤・緑・青の組み合わせで表現します。

  • 黒は赤・緑・青がすべて0 → RGB(0,0,0)
  • 白は赤・緑・青がすべて255 → RGB(255,255,255)

具体的に色の名前を見てみよう

色相環の一部

51

モノクロの場合

52

色名を表現するときは[10進値]と[16進値]の二通りの表記法があります。どちらの値で色を指定するかは使うソフトウエアや状況によって決まります。

10進値

色名を[10進数]で表したものです。[10進数]とは0から9まで数えたら桁がひとつ上がるという、日常生活で使っている数の数え方です。これまでの色の話は10進値で色の名前を表現していました。

10進値の特徴

  • R、G、Bの値を0から255までの範囲で指定する
  • 全てが0のとき → RGB(0,0,0) → 黒
  • 全てが255のとき → RGB(255,255,255) → 白

ソフトの一例

  • Microsoft Office
  • Windowsのペイント
  • JTrim
  • GIMP ← GIMPは10進値・16進値両方使える

16進値

色の名前の先頭に『#』がついていれば[16進値]で表現した色名です。

53

『#』のあとの数字を2桁ずつに区切って考えます。左からR、G、Bの色を表します。

「『FF』が数字?」と思うかもしれませんね。これは[16進数]と呼ぶ数値の表記方法です。[16進数]はコンピュータの世界で使われる数の数え方で、あまりなじみがないかもしれません。

1の位の値は0~9とA~Fを使います。Fは10進数の16に相当します。

0、1、2、3、4、5、6、7、8、9、A、B、C、D、E、F

Fまで数えたら桁が上がります。

10、11、12、13、14、15、16、17、18、19、1A、1B、1C、1D、1E、1F

「10」は「じゅう」でなく「いちぜろ」と読みます。

16進値の特徴

  • 10進数の「0」は16進数でも「0」
  • 10進数の「255」は16進数では「FF」
  • R、G、Bの値を0からFFまでの範囲で指定する
  • 全てが0のとき → #000000 → 黒
  • 全てがFFのとき → #FFFFFF → 白
  • 2桁の数字が同じときは略して書くことがある → #FFFは#FFFFFFと同じ意味

ソフトの一例

  • Photoshop
  • Web系ファイル(htmlやcss)の記述
  • GIMP ← GIMPは10進値・16進値両方使える

色を指定しよう

自分が使うソフトが10進値・16進値のどちらで色を指定するのかを確認し、それに合わせて数値を入力します。

赤だったら

255,0,0 または #FF0000

を入力すればOKですね。

さてここで問題が

↑の表のように色に対応する値が両方が書かれていれば値をそのまま入力すればいいのですが、10進値または16進値どちらか一方の値しかわからないことも多いです。

そんなときは値を変換します。いちいち計算するのは面倒なので変換ツールを使うわけですが、Windowsに入っている電卓を使うと簡単に変換ができます。別記事に使い方を書きました。

Windowsの電卓で10進・16進変換をしよう

関数電卓を持っていれば関数電卓を使ってください。
スマートフォンのアプリがよければ「10進 16進 変換」で検索するといろいろ出てきます。

 

色の話6 – Wordで『テーマの色』にない色を使う方法

文字や図形に色を設定しても、文書を別のテーマに変えたら設定したはずの色が全部新しいテーマの色に全部置き換わってしまいます。

「さっき設定した色がなくなった!」そんなときは色の名前を覚えておけば大丈夫。

『テーマの色』は何色?

テーマ[スリップストリーム]のカラーパレット。

14

拡大してみよう。

31

テーマの色を他のもの、例えば[キュート]に変えるとパレットは[キュート]の色に置き換わり、[スリップストリーム]の色はもう表示されません。

キュートの色はこれ。

40

テーマは[キュート]にしたい、でも[スリップストリーム]のあの色が使いたい!というとき(たとえばの話ね)。色の名前を覚えておけばいつでも自由に好きな色を使うことができますよ。


色の名前を調べよう

左から2番目のブルーの名前を調べてみます。

37

☆テーマの色を[スリップストリーム]に設定します。

  • Word2010:[ページレイアウト]タブ→[テーマの色]→[スリップストリーム]
  • Word2013:[デザイン]タブ→[配色]→[スリップストリーム]

☆[ホーム]タブ→[フォントの色]の▼をクリックし、[テーマの色]の左から5番目のブルー(青、アクセント1)をクリックします。

36

☆もう一度[ホーム]タブ→[フォントの色]の▼をクリックして、今度は[その他の色]をクリックします。

41

[色の設定]ダイアログボックスが表示されます。
[ユーザー設定]タブに切り替えます。

39

下に表示されている

  • 赤:78
  • 緑:103
  • 青:200

というのがこの色の名前です。これをメモしておきましょう。


テーマ『キュート』でスリップストリームのブルーを使う

☆テーマを『キュート』に変更します。これから四角形の塗りつぶしの色をさっきの『スリップストリーム』のブルーに変更します。

<『キュート』の色の四角形>

42

☆図形を選択して[書式]タブ→[図形の塗りつぶし]→[その他の色]をクリックします。パレットの色が『キュート』の色になってますね。

43

☆[色の設定]ダイアログボックスが表示されます。[ユーザー設定]タブをクリックして赤と緑と青の数値を先ほどメモした数値に変更します

  • 赤:78
  • 緑:103
  • 青:200

ですね。すると[新規の色]がブルーに変わります。

45

[OK]をクリックすると、四角形がブルーに変わりました。輪郭の色を変えてないのでいまひとつですが、まあ。

46

☆もう一度図形を選択して[書式]タブ→[図形の塗りつぶし]→[その他の色]をクリックします。

[最近使用した色]に自分で設定したブルーが表示されます。このブルーをクリックすれば何度でも同じ色を使うことができます。

47

こんな感じで他のテーマの色も自由に使うことができます。

自分で設定した色はこの文書内での使用に限られます。別の文書で同じ色を使いたいときは面倒ですがまたご自身で設定してくださいね。

☆☆☆
[最近使用した色]は最大10色まで保存されます。11色目を設定すると残念ながら一番初めに設定した色がいなくなります。
☆☆☆


すべての色は赤・緑・青の組み合わせで表現できる

『光の三原則』という言葉があるように、パソコンの画面で見える全ての色は赤・緑・青の3色の組み合わせで表現されています。

『ブルー』といっても薄い青から濃い青、緑がかった青や黒っぽい青などいろいろありますが『赤:78 緑:103 青:200のブルー』と指定すれば色を特定することができます。
実際には『RGB(78,103,200)』と表現することが多いかも。

『RGB(78,103,200)』は

  • R → Red → 赤が78
  • G → Green → 緑が103
  • B → Blue → 青が200

という意味です。そのまんまです。
名前っぽくないですがこれが色の名前なのです。

『色を指定する方法』についてはこちらもどうぞ。

色の話5 – 仲間の色を集めよう

Wordでテーマの色を確認しよう

テーマの色は下記のボタンで設定します。

  • Word2010:[ページレイアウト]→[テーマの色](下記画像)
  • Word2013:[デザインタブ]→[配色]

24

Wordのテーマ4つを比べてみる

ネオン

青っぽい鮮やかな色の集まり。

フレッシュ

黄色っぽい濃い色の集まり。

スリップストリーム

鮮やかな色の集まり。

エコロジー

くすんだ薄い色の集まり。

仲間の色の見つけ方

色にはいくつかの特徴があります。

  • 青っぽい
  • 黄色っぽい
  • 鮮やか
  • くすんでる など

特徴が同じ色は仲間の色です。仲間の色を集めると安心感があって読み手にセンスがいいと思わせる文書になります。仲間ではない色をもってくると微妙…読み手に違和感を与え文書の内容に集中できなくなってしまいます。

微妙な組み合わせの例

青っぽい色グループに黄色っぽい色を入れた

くすんだ色グループに鮮やかな色を入れた

34

 

色の話4 – 45度の法則で深みを出そう

色を増やそう:24色色相環

ここまで12色の色相環を見ながら補色・類似色で実験をしてきました。30度の法則はわかったけどわたしはもっとカラフルなのがすきなの、というあなたに24色色相環をご紹介します。ほい。

3

12色の間にひとつずつ中間色が入りました。小さい画像で分かりにくいのでクリックで大きくしてご覧ください。30度の法則で使った青と水色は赤い矢印が指している色です。

18

今度は元の2色に緑の矢印で示した2色を加えて4色で例の文書を飾ってみます。

落ち着いた例

左が4色、右が元の2色です。

18 19

文書の見出し、グラフの色を変更しています。どの4色を選ぶか、どこにその色を配置するかによって印象は全然違ってきますのでお好みで調整していただきましょう。

色相環で並んだ4色をグラデーションのように配置するとまとまり、落ち着きを感じます。4色の端の色同士を効果的に配置すると賑やか・華やかさを演出することができます。

賑やか・華やかの例

緑から黄色を基本とし、オレンジまで色を広げました。左が4色、右が元の2色です。

2322

黄色やオレンジは元々が賑やかなイメージの色なので同じ4色使いでも上のブルー系とは全く印象が変わりました。

45度の法則とは

24色色相環は隣り合う色と色が15度の角度になるよう配置されています。360度÷24色=15度です。基準の色をひとつ決めて、その色から3つ目の色、つまり色の範囲を45度離れた色までに限定した使い方を45度の法則と呼びます。

30度の法則と同様に類似色の組み合わせですが、30度は色の範囲が狭いためグラデーションのような印象が得意です。一方45度は色の幅が広がる分アクセントを効かせることが得意です。使える色数が増えるにつれ、配置の仕方が大きく印象を変えるのでいろいろと遊んでみると面白いですよ。

文書やwebサイトなどでは色の範囲を60度まで広げても落ち着き・まとまりのある色使いができます。配置や分量に工夫すれば 補色を使わなくてもアクセント効果が得られます。60度以上に範囲を広げると選べる色が多くなりすぎてかえって混乱してしまうので初心者の方はまず30度と45度で練習してみてくださいね。