イイダリョウのブログ。間はどのくらいグラデーションになるかCSSCSSで色を指定するときによく使う#fff、#eeeなどの3桁コード。便利だけど色の差が若干激しい?16進数ではどのくらいのグラデーションになるか調べてみた。クモのようにコツコツと【目次】CSSの色指定方法16進数カラーコードとは16進数カラーコードの3桁表示!#fff→#000の階調(3桁)#fffと#eeeの間(6桁)#000と#111の間(6桁)まとめCSSの色指定方法CSSでは16進数のカラーコードをよく使います。カラーモードはRGB(レッド、グリーン、ブルー)の3色です。#ff0000;頭にハッシュ#が付き、そのあとに6桁の英数字が続く。ff0000と打つと真っ赤(一番濃いレッド)な色になります。色の指定、他にはこんな書き方もあります。red;10進数は見慣れていますね。RGBの三色をカンマで区切り、最大値は255です。一色目のRが最大値ということ。パーセントもわかりやすいですね。RGBの一色目のRが100%で最大値。色の名前を直接指定することもできる。中間的な色名はあまり用意されていないため微妙なニュアンスが指定しにくい。RGBモードの階調は一色あたり256階調です。パーセントだと1%あたり2.56階調に相当し、若干刻みが荒いため、10進数の方が細かい指定ができます。1足りないのは0からカウントするためです)16進数カラーコードとはさて、この256という数字は一体どこかきたのでしょう。正解は16進数の二乗(10進数で書くと16×16=256)です。16進数は一体どう表現するのか。最初の例にあったようにローマ字の力を借ります。0〜9の10個の数字に加え、A〜Fの6つのローマ字を加えた合計16(最大値はF)。10進数と16進数を比較するとこうなる(太字は桁の変わり目)。1000010進数は9を超えると2桁目に入る16進数はローマ字応援団のお陰で10進数での16でようやく2桁目に入る(おまけ)2進数はさらに激しいペースで桁が増えていくのがわかる*110進数の二乗10×10は100で2桁と3桁の起点。ここから-1すると99で、2桁の最大値です。同様に16進数の二乗10×10(10進数では16×16)も100(10進数では256)で3桁の起点。-1すると2桁の最大値FF(10進数では255)になります。10進数の二乗10×10は100(3桁の起点)。-1すると99(2桁の最大値)16進数の二乗10×10も100(3桁の起点)。-1するとFF(2桁の最大値)16進数のFFは10進数では255ですが、0からカウントすると一つ増えるため、16進数の2桁のみ(0〜FF)で256階調を表現できるわけです。いえば最初の16進数は6桁でしたね。これはRGBの3色を16進数の2桁ずつで並べた(3色x2桁=6桁)ことを意味します。#ff0000;#=16進数カラーコードだよ最初の2桁はRで値はffだよ次の2桁はGで値は00だよ最後の2桁はBで値は00だよ16進数カラーコードは、パーセント(100階調)よりも細かい256階調を6桁で表現できます。6桁数字を一度にコピーできてコンパクト!16進数カラーコードの3桁表示!さてこの6桁の16進数カラーコードですが、さらに楽な書き方があります。#f00;この二つは同じ色になります!3桁だとCSSではff、00など1桁目と2桁目に同じ数字が並んでいると解釈されます!ちなみに、RGBの格色を最大値fにするとこうなる。三色が均等な数字だと白や黒などの無彩色になる。RGBを1色ずつ最大値fにすると文字通りレッド、グリーン、ブルー。RGB2色ずつ最大値fにするとシアン、マゼンタ、イエロー。色の三原色についてはこちらで解説しています。クモのようにコツコツと#fff→#000の階調(3桁)RGBの3色を均等に増やすと無彩色のグラデーション(ホワイト→グレー→ブラック)になります。カラーコード(3桁)で表すとこうなる。CodePen.RGBの3桁を最小値0から最大値Fまで一つずつ増やしている16進数でいうと、1桁目、2桁目とも同じ数字で00、11、22という感じで上がっていることになる256階調でいうと、1色進むたびに16階調ずつ上がっていることになるCSSはこうなる。#000;}カラーコード(3桁)はとても書きやすくてよく使いますが、考えてみると一つ一つの間は16階調飛びになっているんですね。色の差が若干激しい印象。#fffと#eeeの間(6桁)カラーコード(3桁)の間の階調は実際のところどんな感じなんだろう。#fffと#eeeの間をカラーコード(6桁)で調べてみた。CodePen.#fff=#ffffff、#eee=#eeeeee#ffffffの次は1桁目が一つ減るので#fefefe、その次は#fdfdfd1桁目の最小値#f0f0f0までいいくと、次は2桁目が一つ減って#eeeeeeになる。グラデーションになっていますよね!CSSはこうなった。#eeeeee;}16進数のA〜Fは馴染みが薄いため、私はffのひとつ下がfeになるとかの認識はこれまで曖昧でした。調べてみて良かったです。#000と#111の間(6桁)今度はブラック寄りの方を見ていきましょうか。#000と#111の間です。CodePen.#000=#000000、#111=#111111#000000の次は1桁目が一つ増えてので#010101、その次は#0202021桁目の最大値#0f0f0fまでいいくと、次は2桁目が一つ増えて#111111になる。方法は先ほどと同じ方法で、順番は最小値からだんだんとあげていきました。うーむ、私の環境ではあまり階調を感じられないぁ。限りなく黒に近いグレー...CSSはこうなります。#111111;}こちらは00、01、02...と慣れ親しんだ数字が増えていくので割と理解しやすいですね!まとめ16進数カラーコード、まとめです。CSSの色指定方法はいくつかあり16進数カラーコードはその中の一つ16進数カラーコード(6桁)は256階調をRGB3色x2桁で表す。(6桁数字を一度にコピーできる)16進数カラーコード(3桁)はRGB3色x2桁で表す。(1桁目と2桁目が同じ数字を意味する)#fff→#000の階調(3桁)の一色一色は厳密には16階調ほど離れている。#fffと#eeeの間をカラーコード(6桁)で見ると細かい階調が確認できる。#000と#111の間をカラーコード(6桁)の方はあまり階調は確認できない。#fffと#eeeの間の色は細かいニュアンスの表現に使えそうじゃないでしょうか!私はなんとなく#fffの次に薄いグレーは#eeeのような気がしていたんですが、もう少し薄いグレーにしたいなーと思うことがよくありました。Train(p5.js1.4〜1....p5.jsの続きです。1.1...p5.jsシリーズの続きです。P_1_0_01」のコー...p5.jsの続きです。はてなブログProフロントエンドエンジニア。神奈川に住まう四十路のオジキ。DTP→Webデザイナーから転向し今に至る。引き続きコツコツの日々。(24)リンクTwitterInstagramYoutubeCodePenGitHubPinterestQuolaFacebooknoteQiitaはてなブログをはじめよう!idr_zzさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。