誕生石９月～１２月

私はAI小説も書きますが、イラストも描きます。
また、Webデザインも勉強しているので、今回は色コードを書いてみます。
これから色デザインを学ぶ方々の参考になればと思っています。

Webデザインで使う場合はｒｇｂａ（）で透明度ができます。
ａは透明度を示します。

HEX（＃）カラー
色コードが簡潔で、
通常の色指定に適している。
範囲: R, G, Bはそれぞれ0〜255の値を16進数（0〜F）で表現

RGBカラー
透明度を含む色を使いたい時に便利で、
視覚的に理解しやすい。
範囲: R, G, Bはそれぞれ0〜255の値を指定

今回は誕生石カラーを紹介します。
＊このコードはAIに尋ねて書いており、作成はCanvaを使っています。

誕生石

9月 - サファイア

16進数: #0F52BA
RGB: rgb(15, 82, 186)
サファイアは深い青色で、
知恵、
誠実、
精神的な平穏を象徴する色です。

冷静さと集中力を高め、
心の安定をもたらす石として広く認識されています。
サファイアは、
真実と誠実を守る力を与えます。

10月 - オパール

16進数: #A8C3BC
RGB: rgb(168, 195, 188)
オパールは様々な色合いを持つ宝石で、
特に乳白色や虹色の輝きが特徴的です。

変幻自在で神秘的な印象を与え、
直感力を高めるとされます。

オパールは創造性や感受性を促進し、
幸運をもたらす石です。

11月 - トパーズ

16進数: #FFCC00
RGB: rgb(255, 204, 0)
トパーズは鮮やかな黄色またはオレンジ色の宝石で、
明るく活力に満ちた色です。

自信とエネルギーを与える石で、
繁栄や豊かさを象徴します。

トパーズは、
人間関係や幸福を強化するとされています。

12月 - ターコイズ

16進数: #40E0D0
RGB: rgb(64, 224, 208)
ターコイズは青緑色で、
平和、
調和、
癒しを象徴する色です。

心の安定をもたらし、
自己表現を促進します。

ターコイズは、
友好や誠実を守り、
危険を回避する力があるとされています。

私はwebデザインをこれから勉強する人には
透明度を使う場合はｒｇｂａが分かりやすいと思います。
例えば８０％透明にしたい場合は
rgba(255,0,0,0.8)
ではなく
rgba(255,0,0,0.２)です。
※誕生石１月～４月　誕生石５月～８月の記載が間違っていました。
正しくは８０％透明にしたい場合はrgba(255,0,0,0.２)です。
値が小さくなるほど色が透明に近くなり、値が大きくなるほど不透明になります。
100%不透明は値が大きい（1）
100%透明は値が小さい（0）
アルファ値 1 → 100%不透明（色が完全に見える、背景は見えない）
アルファ値 0 → 100%透明（色が完全に透明、背景が完全に見える）

赤 (Red): rgb(255, 0, 0) → 赤が最大で、緑と青は0。
緑 (Green): rgb(0, 255, 0) → 緑が最大で、赤と青は0。
青 (Blue): rgb(0, 0, 255) → 青が最大で、赤と緑は0。

RGBはディスプレイなどの光を使って色を表示する際に使われるモデルで、光を加えることで色を作り出すため、
値が大きくなるほど色が鮮やかになります。

rgbaの形式では、透明度（アルファ値）は0から1の範囲で指定されます。
rgba(255, 0, 0, 1) → 完全に不透明（透明度100%）
赤の色がそのまま表示されます。

rgba(255, 0, 0. 0) → 完全に透明（透明度0%）
色が完全に透明になり、
背景が透けて見える状態になります。

イラストの場合は＃を使って書いています。

rgba(255, 0, 0, 0)→１００％透明にしたい場合
１００%透明（完全に透明）
赤色が完全に透明になり、背景が完全に見える状態になります。
赤色は全く表示されず、背景が透けて見える

rgba(255, 0, 0, 0.1)→９０％透明にしたい場合
90%透明（10%だけ不透明）
背景が非常に透けて見えます。
赤色はわずかにしか見えず、ほぼ背景が見える状態になります。

rgba(255, 0, 0, 0.２)→８０％透明にしたい場合
80%透明 （20%だけ不透明）
少しだけ赤色が濃くなり、背景はまだ透けますが、0.1よりも赤色が目立ちます。
背景がより少しだけ見える状態です。

rgba(255, 0, 0, 0.３)→７０％透明にしたい場合
70%透明 （30%だけ不透明）
赤色はかなり薄くなり、背景が透けつつ、少し赤色が残る状態です。
赤色が少し濃くなり、背景が透けながらも赤色が 0.2 よりも目立つようになります。
赤色が少し強く残り、背景もやや透ける感じが残ります。

rgba(255, 0, 0, 0.４)→６０％透明にしたい場合
60%透明 （40%だけ不透明）
赤色がさらに 濃く なり、背景もまだ透けますが、赤色がしっかり目立つ ようになります。
0.3よりも赤がより鮮明に見えるようになります。

rgba(255, 0, 0, 0.５)→５０％透明にしたい場合
50%透明（50%だけ不透明）
赤色がさらに濃くなり、背景もまだ透けますが、赤色がしっかり目立つようになります。
0.4よりも赤がより鮮明に見えるようになります。
赤色がさらに濃くなり、背景が透けつつも赤色が目立つ状態

rgba(255, 0, 0, 0.６)→４０％透明にしたい場合
４0%透明（６0%だけ不透明）
赤色がさらに濃くなり、背景も透けつつ、赤色がしっかり目立つようになります。
0.5よりも赤がさらに鮮明に見えるようになります。
赤色がさらに濃くなり、背景が透ける状態でも赤色が より目立つ

rgba(255, 0, 0, 0.７)→３０％透明にしたい場合
３0%透明（７0%だけ不透明）
赤色がさらに濃くなり、背景が透けつつ、赤色がしっかり目立つようになります。
0.6よりも赤がさらに鮮明に見えるようになります。
赤色が目立ちやすくなる

rgba(255, 0, 0, 0.８)→２０％透明にしたい場合
２0%透明（８0%だけ不透明）
赤色がさらに濃くなり、背景が透けつつも、赤色がしっかり目立つようになります。
0.7よりも赤がさらに鮮明に見えるようになります。
赤色がかなり濃くなり、目立つ

rgba(255, 0, 0, 0.９)→１０％透明にしたい場合
１0%透明（９0%だけ不透明）
赤色がさらに濃くなり、背景が透けつつも、赤色が非常に強く目立つようになります。
0.8よりも赤がさらに鮮明に見えるようになります。
赤色がほぼ不透明 に近い形で 鮮明に見える

rgba(255, 0, 0, １)→０％透明にしたい場合
0%透明（完全に不透明）
赤色が完全に表示され、背景は透けません。
赤色がはっきりと鮮明に見え、他の要素は全く透けません。
赤色が完全に不透明 で、背景が透けることなく 赤色が完全に目立つ