LoginSignup
2
1

More than 5 years have passed since last update.

CSSで使える色名

Last updated at Posted at 2018-11-04

TL;TD;

スタイルシートでは色は名前を使ったほうが直感的に分かりやすい。
しかし、いっぱいあるし一覧だとわかりにくい名前もあるので自分用にまとめてみた。
すべてのブラウザで使える一覧はW3C school.comのHPにあります、一覧にないものもリストアップしてあるのでブラウザによっては色が表示できないかもしれません。

種類別一覧

色の三原色と光の三原色

  • red
  • blue
  • green
  • cyan (aquaでもOK、こっちのほうがイメージしやすい)
  • magenta (いつも綴り間違いをする)
  • yellow

灰色系

  • black (rgb={0})
  • dimgray (rgb={105})
  • gray (rgb={128})
  • darkgray (rgb={169}、grayより薄い)
  • silver (rgb={192}、銀色だけど光沢はない)
  • lightgray (rgb={211})
  • gainsboro (rgb={220}、白鼠の意味)
  • whitesmoke (rbg={245})
  • white (rbg={255})

パステルカラー系

  • pink (イメージしやすいピンクはdeeppink)
  • lightpink (pinkとそんなに変わらない)
  • lightcoral (coral=さんご)
  • lightsalmon (salmon=鮭)
  • violet (violet自体は柔らかい色)
  • aquamarine
  • powderblue (パウダーブルー)
  • skyblue
  • lightskyblue (こっちのほうが好み)
  • lightsteelblue (steelblue(鉄青)のパステルカラー版?)
  • palegreen (pale=淡い)
  • lightgreen
  • yellowgreen
  • greenyellow (yellowgreenとは別の色)
  • lightseagreen (lightとついているがこの中では少し浮いている印象?)

原色系

  • seagreen
  • darkseagreen (ダークとあるがseagreenより薄い)
  • forestgreen
  • lime (明るい緑色)
  • darkgreen
  • darkolivegreen
  • goldenrod (秋の麒麟草の色、金色ではない)
  • orange
  • darkorange
  • orangered (一番、オレンジのイメージに近い)
  • deeppink
  • salmon
  • darksalmon
  • crimson (思ったより紅く無い)
  • darkred (ちょっと濃すぎる、暗色系よりかな)
  • darkviolet
  • purple (darkvioletより濃い紫)
  • indigo
  • navy
  • darkblue

Code Pen

HTMLは省略

See the Pen color names by Kentaro (@ForlHeadeOfficer) on CodePen.

JavaScript

window.addEventListener('load', ()=>{
    const main=document.getElementsByTagName('main')[0];

    for( const name of colornames ){
        const div=document.createElement('div');
        div.innerHTML=name;
        div.style.background=name;
        main.appendChild(div);
        console.log(name);
    }
});

を使って色名と背景色が見れるようにした。
今ある色の一覧も

colornames.js
const colornames=[
    'red', 'blue', 'green', // 色の三原色                                                       
    'cyan', 'aqua' /* cyanの別名 */, 'magenta', 'yellow', // 光の三原色 
    'black', 'dimgray', 'gray', 'darkgray', 'silver', 'lightgray', 'gainsboro' /* 白鼠 */, 'ghostwhite', 'white', // 黒から白へ 
    'pink', 'lightpink', 'lightcoral', 'lightsalmon', 'violet',
    'aquamarine', 'skyblue', 'lightskyblue', 'powderblue', 'lightsteelblue',
    'palegreen', 'lightgreen', 'yellowgreen', 'greenyellow', 'lightseagreen'
    'seagreen', 'darkseagreen', 'forestgreen', 'lime', 'darkgreen', 'darkolivegreen',
    'goldenrod', 'orange', 'darkorange', 'orangered', 'deeppink',
    'salmon', 'darksalmon', 'crimson', 'darkred',
    'darkviolet', 'purple', 'indigo', 'navy', 'darkblue',
];

最後に

まとめてみると意外とイメージと違う色が多かった。他にもいっぱい使える色名はあると思います。
あと、エメラルドグリーンemeraldgreenが無かった。

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1