CSSのcolorをrgb指定する方法を現役エンジニアが解説【初心者向け】

初心者向けにCSSのcolorをrgb指定する方法について解説しています。色を指定するとき、カラーネームやカラーコードの他にRGBカラーモデルを使って記述することができます。RGBの記述方法、参照方法について見ていきましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

CSSのcolorをrgb指定する方法について解説します。rgb設定ができるようになると、細かな色彩を指定できるようになるので、表現の幅が増えたりサイトデザインを自社カラーに近いものにできたりできます。ぜひ参考にしてみてください。

CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のCSSカリキュラムをもとに執筆しています。

 

田島悠介

今回は、CSSに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

colorをrgb指定する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

色の指定方法

CSSで色を指定するには、いくつかの方法があります。

 

カラーネーム

あらかじめ決められている色の名前で指定することができます。redやblueなどの誰でもすぐにわかる名称のものや、tomatoやorangeなど様々な名称が割り当てられています。色から名前を連想しやすいので使いやすいですね。

red  gold  tomato  limegreen

カラーコード

16進数で色を表現します。16進数とは0~9までの数字とA〜Fまでのアルファベットの組み合わせです。カラーネームよりも指定できる色が多くなります。

#FF0000  #FFD700  #FF6347  #32CD32

RGBカラーモデル

red,green,blueの3色を混ぜて、色を表現します。

rgb(255,0,0)  rgb(255,215,0)  rgb(255,99,71)  rgb(50,205,50)

rgbの記述方法

rgbカラーモデルでは、Red、Green、Blueの色の割合を0〜255で指定し、下記のように書きます。

/*rgb(Redの割合,Greenの割合,Blueの割合)*/
rgb(255,0,0)      //赤
rgb(0,255,0)      //緑
rgb(0,0,255)      //青
rgb(0,0,0)        //黒
rgb(255,255,255)  //白

絵の具などをイメージした場合、色をたくさん混ぜると暗なっていくというように思いますが、上の例のように黒はrgb(0,0,0)、白は(255,255,255)となり、RGBでは反対になります。

とはいえ、数値を見ただけで色がわかる必要もありませんので、Googleで検索したり、Photoshopなどのツールで色を調べながら使っていきましょう。

Googleで16進数のカラーコードを検索すれば、カラーピッカーが出てきます。RGBの値やカラーコードをすぐに調べることができます。

以下のサイトでも、カラーコードやカラーネームを調べることができます。

原色大辞典: https://www.colordic.org/
HTMLリファレンス: http://www.htmq.com/color/colorname.shtml

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

色を様々な方法で指定してみよう

それでは、いろんな指定方法で文字色を指定してみましょう。

<html>
  <head>
    <meta charset="utf-8">
    <title>色を様々な方法で指定してみよう</title>
    <link rel="stylesheet" href="./css/style.css">
  </head>
  <body>
    <div class="box1">rgb(255, 200, 0)</div>
    <div class="box2">rgb(100, 100, 100)</div>
    <div class="box3">rgb(150, 200, 100)</div>
    <div class="box4">tomato</div>
    <div class="box5">olive</div>
    <div class="box6">#33debc</div>
  </body>
</html>

CSS:

div{
  width:300px;
  height:200px;
  float:left;
  font-size:20px;
  text-align:center;
  line-height:200px;
  color:#fff;
}
.box1{
  background:rgb(255, 200, 0);
}
.box2{
  background:rgb(100, 100, 100);
}
.box3{
  background:rgb(150, 200, 100);
}
.box4{
  background:tomato;
}
.box5{
  background:olive;
}
.box6{
  background:#33debc;
}

 

監修してくれたメンター

メンター 橋本真理

フリーのweb/グラフィックデザイナー

会社・店舗・自治体等のwebサイトのデザインから制作一式、ロゴや各種広告などのグラフィックデザインを主に活動。TechAcademyではWebデザインコース・WordPressコースを担当しています。

ラジオとバナナが好き。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるオンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。