technical/index.html at master · DevEnol/technical · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <title>CSS Colors</title>
    <link rel="stylesheet" type="text/css" href="css/styles.css">
  </head>
  <body>
    <header id="title" class="title"><h1>CSS Colors</h1></header>
    <main id="main-doc">
      <section id="introduction" class="main-section">
        <header><h2>Introduction</h2></header>
        <p>In CSS colors can be specified by using one of the following:</p>
        <ol>
          <li><a href="#color_names">Color Names</a></li>
          <li><a href="#rgb_values">RGB Values</a></li>
          <li><a href="#rgba_values">RGBA Values</a></li>
          <li><a href="#hsl_values">HSL Values</a></li>
          <li><a href="#hsla_values">HSLA Values</a></li>
          <li><a href="#hexadecimal">Hexadecimal Values</a></li>
        </ol>
      </section>
      <section id="color_names" class="main-section">
        <header><h2>Color Names</h2></header>
        <p>
          A color can be specified by using a predefined color name. Such as:
        </p>
        <div class="code">
          <code>aqua, black, blue, fuchsia, gray, grey, green, lime, maroon, navy, olive, purple, red, silver, teal, white and yellow</code>
        </div>
        <p>
          All modern browsers support up to 140 color names. Click <a href="https://www.w3schools.com/colors/colors_names.asp">here</a> to see all the color names.
        </p>
      </section>
      <section id="rgb_values" class="main-section">
        <header><h2>RGB Values</h2></header>
        <p>RGB color values are supported in all major browsers, and it is specified with:</p>
        <div class="code">
          <code>rgb(red, green, blue)</code>
        </div>
        <p>
          Each parameter (red, green, and blue) defines the intensity of the color as an integer between 0 and 255. For example, <code>rgb(255, 0, 0)</code> is rendered as red, because the red parameter is set to its highest value (255) and the others are set to 0.
        </p>
        <p>
          To display black, set all color parameters to 0, like this: <code>rgb(0, 0, 0)</code>. To display white, set all color parameters to 255, like this: <code>rgb(255, 255, 255)</code>. Shades of gray are often defined using equal values for all the 3 light sources, for example:
        </p>
        <div class="code">
          <code>
            rgb(60, 60, 60), rgb(120, 120, 120), rgb(180, 180, 180), rgb(240, 240, 240)
          </code>
        </div>
      </section>
      <section id="rgba_values" class="main-section">
        <header><h2>RGBA Values</h2></header>
        <p>
          RGBA color values are an extension of RGB color values with an alpha channel - which specifies the opacity for a color.
        </p>
        <p>
          An RGBA color value is specified with:
        </p>
        <div class="code">
          <code>
            rgba(red, green, blue, alpha)
          </code>
        </div>
        <p>
          The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all).
        </p>
      </section>
      <section id="hsl_values" class="main-section">
        <header><h2>HSL Values</h2></header>
        <p>
          HSL color values are supported in IE9+, Firefox, Chrome, Safari, and in Opera 10+. HSL stands for Hue, Saturation, and Lightness. HSL color values are specified with:
        </p>
        <div class="code">
          <code>hsl(hue, saturation, lightness)</code>
        </div>
        <p>
          <em>Hue</em> is a degree on the color wheel from 0 to 360. With 0 is red, 120 is green, and 240 is blue.
        </p>
        <p>
          <em>Saturation</em> can be described as the intensity of a color in a percentage value, with 0% is completely gray, you can no longer see the color. A saturation value of 50% is gray, but you can still see the hue color, and a value 100% is pure color, no shades of gray.
        </p>
        <p>
          <em>Lightness</em> of a color can be described as how much light you want to give the color, where 0% means no light (black), 50% means 50% light (neither dark nor light) 100% means full lightness (white).
        </p>
        <p>
          Shades of gray are often defined by setting the hue and saturation to 0, and adjust the lightness from 0% to 100% to get darker/lighter shades.
        </p>
      </section>
      <section id="hsla_values" class="main-section">
        <header><h2>HSLA Values</h2></header>
        <p>
          HSLA color values are an extension of HSL color values with an alpha channel - which specifies the opacity for a color. An HSLA color value is specified with:
        </p>
        <div class="code">
          <code>hsla(hue, saturation, lightness, alpha)</code>
        </div>
        <p>
          The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all).
        </p>
      </section>
      <section id="hexadecimal" class="main-section">
        <header><h2>Hexadecimal</h2></header>
        <p>Hexadecimal color values are supported in all browsers. A hexadecimal color is specified with:</p>
        <div class="code">
          <code>#rrggbb</code>
        </div>
        <p>
          Where rr (red), gg (green) and bb (blue) are hexadecimal values between 00 and ff (same as decimal 0-255) specifying the intensity of the color. For example, <code>#ff0000</code> is displayed as red, because red is set to its highest value (ff) and the others are set to the lowest value (00).
        </p>
        <p>
          Shades of gray are often defined using equal values for all the 3 light sources:
        </p>
        <div class="code">
          <code>
            #3c3c3c, #787878, #b4b4b4, #f0f0f0
          </code>
        </div>
      </section>
      <section id="reference" class="main-section">
        <header><h2>Reference</h2></header>
        <p>All the documentation in this page is taken from <a href="https://www.w3schools.com/css/css_colors.asp" target="_blank">w3schools</a></p>
        <div class="page-end"></div>
      </section>
    </main>

    <nav id="navbar">
      <header>
        <h2>CSS Colors</h2>
      </header>
      <a href="#introduction" class="nav-link">
        Introduction
      </a>
      <a href="#color_names" class="nav-link">
        Color Names
      </a>
      <a href="#rgb_values" class="nav-link">
        RGB Values
      </a>
      <a href="#rgba_values" class="nav-link">
        RGBA Values
      </a>
      <a href="#hsl_values" class="nav-link">
        HSL Values
      </a>
      <a href="#hsla_values" class="nav-link">
        HSLA Values
      </a>
      <a href="#hexadecimal" class="nav-link">
        Hexadecimal
      </a>
      <a href="#reference" class="nav-link">
        Reference
      </a>
    </nav>
  </body>
</html>