Monday, September 25, 2023

HTML HEX Colors

                               HTML HEX Colors

A hexadecimal color is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color.

HEX Color Values

In this style, we define the color in 6 digit hexadecimal numbers (from 0 to F).

In HTML, a color can be specified using a hexadecimal value in the form:

#rrggbb

Where rr (red), gg (green) and bb (blue) are hexadecimal values between 00 and ff (same as decimal 0–255).

For example, #ff0000 is displayed as red, because red is set to its highest value (ff), and the other two (green and blue) are set to 00.

Another example, #00ff00 is displayed as green, because green is set to its highest value (ff), and the other two (red and blue) are set to 00.

To display black, set all color parameters to 00, like this: #000000.

To display white, set all color parameters to ff, like this: #ffffff.

Experiment by mixing the HEX values below:

Example:

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:#ff0000;">#ff0000</h1>
<h1 style="background-color:#0000ff;">#0000ff</h1>
<h1 style="background-color:#3cb371;">#3cb371</h1>
<h1 style="background-color:#ee82ee;">#ee82ee</h1>
<h1 style="background-color:#ffa500;">#ffa500</h1>
<h1 style="background-color:#6a5acd;">#6a5acd</h1>

</body>
</html>

A new webpage opens as shown below with different hex values:

Shades of Gray

Shades of gray are often defined using equal values for all three parameters:

Example:

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:#404040;">#404040</h1>
<h1 style="background-color:#686868;">#686868</h1>
<h1 style="background-color:#a0a0a0;">#a0a0a0</h1>
<h1 style="background-color:#bebebe;">#bebebe</h1>
<h1 style="background-color:#dcdcdc;">#dcdcdc</h1>
<h1 style="background-color:#f8f8f8;">#f8f8f8</h1>

</body>
</html>

A new webpage opens as shown below with different hex values of gray:

at No comments:

Sunday, September 24, 2023

HTML Color Values

                          HTML Color Values

In HTML, colors can also be specified using RGB values, HEX values, HSL values, RGBA values, and HSLA values.

The following three <div> elements have their background color set with RGB, HEX, and HSL values:

Color Values
<html>
<body>

<p>Same as color name "Green":</p>

<h1 style="background-color:rgb(27, 216, 30);">rgb(27, 216, 30)</h1>
<h1 style="background-color:#18c02e;">18c02e</h1>
<h1 style="background-color:hsl(107, 79%, 38%);">hsl(107, 79%, 38%)</h1>

<p>Same as color name "Green", but 50% transparent:</p>
<h1 style="background-color:rgba(39, 169, 18, 0.5);">rgba(39, 169, 18, 0.5)</h1>
<h1 style="background-color:hsla(117, 81%, 38%, 0.5);">hsla(117, 81%, 38%, 0.5)</h1>

<p>In addition to the predefined color names, colors can be specified using RGB, HEX, HSL, or even transparent colors using RGBA or HSLA color values.</p>

</body>
</html>

This is how one colour is specified by the colour values.

Now let us learn about rgb and rgba colors.

HTML RGB and RGBA Colors

An RGB color value represents RED, GREEN, and BLUE light sources.

An RGBA color value is an extension of RGB with an Alpha channel (opacity).

RGB Color Values

In HTML, a color can be specified as an RGB value, using this formula:

rgb(red, green, blue)

Each parameter (red, green, and blue) defines the intensity of the color with a value between 0 and 255.

This means that there are 256 x 256 x 256 = 16777216 possible colors!

For example, rgb(255, 0, 0) is displayed as red, because red is set to its highest value (255), and the other two (green and blue) are set to 0.

Another example, rgb(0, 255, 0) is displayed as green, because green is set to its highest value (255), and the other two (red and blue) are set to 0.

To display black, set all color parameters to 0, like this: rgb(0, 0, 0).

To display white, set all color parameters to 255, like this: rgb(255, 255, 255).

Experiment by mixing the RGB values below:

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:rgb(255, 0, 0);">rgb(255, 0, 0)</h1>
<h1 style="background-color:rgb(0, 0, 255);">rgb(0, 0, 255)</h1>
<h1 style="background-color:rgb(150, 196, 25);">rgb(60, 179, 113)</h1>
<h1 style="background-color:rgb(239, 235, 21);">rgb(238, 130, 238)</h1>
<h1 style="background-color:rgb(187, 90, 5);">rgb(255, 165, 0)</h1>
<h1 style="background-color:rgb(204, 54, 169);">rgb(106, 90, 205)</h1>

</body>
</html>

This is how the RGB color parameters are set to different values and below is the output:

RGBA Color Values

RGBA color values are an extension of RGB color values with an Alpha channel — which specifies the opacity for a color.

An RGBA color value is specified with:

rgba(red, green, blue, alpha)

The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all):

Experiment by mixing the RGBA values below:

Example:

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:rgba(15, 18, 16, 0);">rgba(255, 99, 71, 0)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.2);">rgba(255, 99, 71, 0.2)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.4);">rgba(255, 99, 71, 0.4)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.6);">rgba(255, 99, 71, 0.6)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.8);">rgba(255, 99, 71, 0.8)</h1>
<h1 style="background-color:rgba(255, 99, 71, 1);">rgba(255, 99, 71, 1)</h1>

</body>
</html>

This is how the RGBA color parameters are set to different values and below is the output:


at No comments:

Saturday, September 23, 2023

HTML Colors

                                       HTML Colors

HTML colors are specified with predefined color names, or with RGB, HEX, HSL, RGBA, or HSLA values.

Color Names

In HTML, a color can be specified by using a color name:

Background Color

You can set the background color for HTML elements:

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:hsl(186, 41%, 48%);">This is a heading</h1>
<p style="background-color:hsl(129, 100%, 64%);">This is a paragraph.</p>

</body>
</html>

A new webpage opens as shown below:

Text Color

You can also set the color of text:

<!DOCTYPE html>
<html>
<body>

<h1 style="color:hsl(337, 100%, 50%);">This is a heading</h1>
<p style="color:hsl(212, 100%, 50%);">This is a paragraph.</p>

</body>
</html>

A new webpage opens with text coloured as shown below:

Border Color

You can set the color of borders:

<!DOCTYPE html>
<html>
<body>

<h1 style="border: 2px solid Tomato;">Hello World</h1>

<h1 style="border: 2px solid DodgerBlue;">Hello World</h1>

<h1 style="border: 2px solid Violet;">Hello World</h1>

</body>
</html>

A new webpage opens with coloured borders around the text as shown below:

at No comments:

Friday, September 22, 2023

HTML Comments

                             HTML Comments

HTML comments are not displayed in the browser, but they can help document your HTML source code.

HTML Comment Tag

You can add comments to your HTML source by using the following syntax:

<!-- Write your comments here -->

The exclamatory mark is in the begining and it is not at the end.

Note: Comments are not displayed by the browser, but they can help document your HTML source code.

Add Comments

With comments you can place notifications and reminders in your HTML code:

Example

<!DOCTYPE html>
<html>
<body>

<!-- This is a comment -->
<p>This is a paragraph.</p>
<!-- Comments are not displayed in the browser -->

</body>
</html>

Note: comments are not diplayed in the browser

Hide Content

Comments can be used to hide content.

This can be helpful if you hide content temporarily:

Example

<!DOCTYPE html>
<html>
<body>

<!-- This is a comment -->
<p>This is a paragraph.</p>
<!-- Comments are not displayed in the browser -->
<!--This is another paragraph-->
<p>Hii</p>

</body>
</html>

Hide Inline Content

Comments can be used to hide parts in the middle of the HTML code.

Example

Hide a part of a paragraph:

<!DOCTYPE html>
<html>
<body>
<!--hiding content inside a paragraph-->
<p>This <!-- great text --> is a paragraph.</p>
<p>Hii</p>

</body>
</html>
at No comments:
Subscribe to: Posts (Atom)

Building Static Website(part6) HTML Lists

  Building Static Website (part6) HTML Lists Today, let us add some lists to our detailed view section by using html lists. Lists: List is a...

  • Advantages and disadvantages of MySQL
                 MySQL Advantages and                     Disadvantages Advantages: L ike other relational database system, MySQL database serve...
  • HTML Text Formatting
                               HTML Text Formatting HTML contains several elements for defining text with a special meaning. HTML Formatting Ele...
  • HTML Table Colspan & Rowspan
      HTML Table Colspan & Rowspan HTML tables can have cells that span over multiple rows and/or columns. HTML Table — Colspan To make a ce...