【カラーコード】について

HTML,CSS ホームページの背景色や文字色 (フォントカラー)は カラーコードで変更できます。

カラーコードは#と6桁英数字から なります。

  • 英数字の並びの部分が、さっきのRGBで各2桁ずつです。

RGB は光の3原色。赤(RED)・緑(GREEN)・青(BLUE)の頭文字。

  • 英数字の部分は16進法と言われていて、16とは0~Fまでのこと。

0123456789ABCDEF 数えると16

  • この並びは光の量。左が小さく右に行くにつれて多くなります。

最小が0、最大がF。

 

3色が光の量が最小が #000000 黒。

その逆で 光が最大が #FFFFFF 白。

赤は#FF0000、緑は#00FF00、青は#0000FF

それぞれの原色の部分が最大であとは最小になってるのです。

自分の好きな色に変えられす

<span style=”color:#〇〇〇〇〇〇;”>色を変えたい文字</span>
h2 {color: #〇〇〇〇〇〇;} 見出し2の色指定

枠、ライン、背景など、その部分を指定して、color:の後ろの6桁のコード部分を変えれば自分の好きな色に変えられまるよ。

おすすめのカラーコードサイト

140色のコードが わかりやすいのでよく使用します。

原色・和色・洋色・ビビッド・パステル・モノトーン・メトロとタブごとに分かれています。

WEB色見本 原色大辞典 - HTMLカラーコード
色の名前とカラーコードが一目でわかるWEB色見本

カラー成分測定「色とりどり」画像の色をデータ分析するツールが便利です。
画像から、その色のコードを調べられます。

配色の見本帳 | キーカラーで選ぶ配色パターン - ホームページで作る配色
色見本、配色を提案するWEB色見本のホームページ。選んだ色をキーカラーにして色の法則から多彩な配色と出会えます。漫画配色検索や旅する配色見本、カラー成分測定「色とりどり」といった色彩を調べるツールも充実しています。デザインからファッションや占いまで、色を扱うときに役立つのが配色見本です。さまざまな色の組み合わせを見て理...

HTML,CSS 色の設定方法が掲載

HTML,CSS カラーコード一覧表 | 背景色や文字色の設定
HTML,CSS 500色のカラーコード一覧表。W3C指定16色やセーフカラー216色など、ホームページのフォントカラーや背景色。カラーコード一覧表

【グラデーション用】 サイトで色の調整をしてCSSを丸ごとコピーできます。

uiGradients - Beautiful colored gradients
uiGradients is a handpicked collection of beautiful color gradients for designers and developers.

【グラデーションのカスタマイズ可能】画像をワンクリックでCSSコピーができて使いやすい

Grab yourself a gradient
Beautiful and simple UI for generating web gradients.

よく使用するカラーコードはこちら

カラー名 カラー名 16進数 短縮系
black #000000 #000
グレー gray #808080
silver #C0C0C0
白い white #FFFFFF #FFF
blue #0000FF #00F
海軍 navy #000080
ティール teal #008080
green #008000
ライム lime #00FF00 #0F0
アクア aqua #00FFFF #0FF
yellow #FFFF00 #FF0
red #FF0000 #F00
フクシア fuchsia #FF00FF #F0F
オリーブ olive #808000
紫の purple #800080
あずき色 maroon #800000

 

配色パターン見本40選:ベストな色の組み合わせを探せるツール

サルワカさんが作った サイトがすごく参考になります。

配色パターン見本40選:ベストな色の組み合わせ確認ツール
コピペで使えるオシャレな色の組み合わせを紹介します。それぞれの配色の実際の使用例まで用意しました。
タイトルとURLをコピーしました