2016-12-01 72 views
4

多くのトピックのチュートリアルを見ながら、HTML/CSSの色の16進コードの代わりにRGB & RGBAを使用することがよくあります。16進数のカラー、RGB、RGBAの違いと、それぞれを使用する必要がある場合

RGB、RGBA、16進数の違いは何かを私に説明することができますか?

+1

.. ['hsl()'](https://developer.mozilla.org/en/docs/Web/CSS/color_value#hsl())と['hsla()'を忘れないでください。 ](https://developer.mozilla.org/en/docs/Web/CSS/color_value#hsla()):) –

答えて

7

RGBと六角の色に違いはありません。 10進数

進:

FF = 255

はそう#FFFFFF = RGB(255,255,255)

あなたはヘキサ色打破:

#FF FF FF 
red green blue 

をしかし、rgb (アルファ)あなたとアルファ変数を追加することができます。不透明度をあなたの色に追加します。

あなたはRGBを使用し、それはあなたの好みの

例依存HEXことができます。RGBとRGBAの違いは違いはありません」、と言うことは簡単です

div { 
 
width:100px; 
 
height:100px; 
 
border:solid 1px black; 
 
} 
 

 
.rgb{ 
 
    background-color:rgb(124,220,50); /* to hexa = 7C DC 32 */ 
 
} 
 

 
.hexa{ 
 
    background-color:#7CDC32; 
 
} 
 

 
.rgba{ 
 
    background-color:rgba(124,220,50,0.2); /*opacity = 0.2/1 */ 
 
}
<div class="rgb">rgb</div> 
 
<div class="hexa">hexa</div> 
 
<div class="rgba">rgba</div>

+0

奇妙なことから、何かを使って不透明度そのものを設定するよりも、RGBAを使う利点は何でしょうか? (不透明度:0.5;)? RGBAは色の不透明度だけを設定し、残りは通常どおりに保つのに使用されますか? – nobetterdan

+3

オーバーレイや透過性のあるブロックを追加する場合に便利です。要素の「不透明度」を変更すると、すべての内容が透明になります。 rgbaを使用すると、バックグラウンドに透明性を追加することしかできません。 – Alexis

+0

HEXよりもRGBの利点は、値を操作するのが少し楽です。 Javascriptでは、2つの数値/リテラル​​の積ではなく、数値を設定するだけで済みます。 – Marvin

4

を"A" - >アルファを除く

RGB(赤緑青) RGBA(赤緑青アルファ)

アルファパラメータは、色を透明にする場合に使用します。 (0.0〜1.0の間の値)

そして、RGB/RGBAとHEXの主な違いは、HEXが6文字と数字の混在を使用することです。 (16進数) RGBは3組の3つの数値を使用します。これらの数値の範囲は0〜255です。

これ以上の違いはなく、使いたいことはあなた次第です。

3

RGB(赤、緑、青)の値は、印刷や出版を含むさまざまな業界で古くから普遍的に使用されています。過去には、今日よりもウェブサイトで広く使用されていました。

RGBA(赤、緑、青、アルファ)は、色を透明にするために使用されます。 A(アルファ)の値は0から完全に透明、1から完全に不透明です。

16進数は、ウェブサイトやアプリケーション専用に使用される、最近の簡単で簡単な値です。

関連する問題