HTML 5 Colors

Last modified on: October 20, 2024

<h3>HTML Colors</h3>
<p>In HTML, colors can be applied to text, backgrounds, borders, and other elements to enhance the visual appeal of a webpage. Colors in HTML can be specified in various ways, including named colors, hexadecimal values, RGB values, RGBA values, HSL values, and HSLA values.</p>
<h3>1. <strong>Named Colors</strong></h3>
<p>HTML supports a list of standard color names. These colors are predefined and easy to use.</p>
<h4>Syntax</h4>
<div class="dark bg-gray-950 contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative">
<div class="flex items-center text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9">
<pre class="language-markup"><code>&lt;element style="color: color-name;"&gt;
</code></pre>
</div>
</div>
<h4>Example</h4>
<div class="dark bg-gray-950 contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative">
<div class="flex items-center text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9">
<pre class="language-markup"><code>&lt;p style="color: red;"&gt;This text is red.&lt;/p&gt;
&lt;p style="background-color: lightblue;"&gt;This paragraph has a light blue background.&lt;/p&gt;
</code></pre>
</div>
</div>
<h3>2. <strong>Hexadecimal Colors</strong></h3>
<p>Hexadecimal color values are a way to specify colors using hexadecimal (base-16) notation. A hex color code is a combination of six characters: <code>#RRGGBB</code>, where <code>RR</code>, <code>GG</code>, and <code>BB</code> represent the red, green, and blue color channels.</p>
<h4>Syntax</h4>
<div class="dark bg-gray-950 contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative">
<div class="flex items-center text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9">
<pre class="language-markup"><code>&lt;element style="color: #RRGGBB;"&gt;
</code></pre>
</div>
</div>
<h4>Example</h4>
<div class="dark bg-gray-950 contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative">
<div class="flex items-center text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9">
<pre class="language-markup"><code>&lt;p style="color: #ff6347;"&gt;This text is tomato red.&lt;/p&gt;
&lt;p style="background-color: #00ff00;"&gt;This paragraph has a green background.&lt;/p&gt;
</code></pre>
</div>
</div>
<h3>3. <strong>RGB Colors</strong></h3>
<p>RGB (Red, Green, Blue) colors are defined using the <code>rgb()</code> function. Each color channel (red, green, and blue) is specified as a number between 0 and 255.</p>
<h4>Syntax</h4>
<div class="dark bg-gray-950 contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative">
<div class="flex items-center text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9">
<pre class="language-markup"><code>&lt;element style="color: rgb(R, G, B);"&gt;
</code></pre>
</div>
</div>
<h4>Example</h4>
<div class="dark bg-gray-950 contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative">
<div class="flex items-center text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9">
<pre class="language-markup"><code>&lt;p style="color: rgb(255, 99, 71);"&gt;This text is tomato red using RGB.&lt;/p&gt;
&lt;p style="background-color: rgb(0, 255, 0);"&gt;This paragraph has a green background using RGB.&lt;/p&gt;
</code></pre>
</div>
</div>
<h3>4. <strong>RGBA Colors</strong></h3>
<p>RGBA extends RGB by adding an alpha channel for opacity. The <code>rgba()</code> function allows you to specify the red, green, and blue channels, as well as an alpha value between 0 (completely transparent) and 1 (completely opaque).</p>
<h4>Syntax</h4>
<div class="dark bg-gray-950 contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative">
<div class="flex items-center text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9">
<pre class="language-markup"><code>&lt;element style="color: rgba(R, G, B, A);"&gt;
</code></pre>
</div>
</div>
<h4>Example</h4>
<div class="dark bg-gray-950 contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative">
<div class="flex items-center text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9">
<pre class="language-markup"><code>&lt;p style="color: rgba(255, 99, 71, 0.5);"&gt;This text is tomato red with 50% opacity.&lt;/p&gt;
&lt;p style="background-color: rgba(0, 255, 0, 0.3);"&gt;This paragraph has a green background with 30% opacity.&lt;/p&gt;
</code></pre>
</div>
</div>
<h3>5. <strong>HSL Colors</strong></h3>
<p>HSL (Hue, Saturation, Lightness) colors are defined using the <code>hsl()</code> function. Hue is a degree on the color wheel (0 to 360), and saturation and lightness are percentages.</p>
<h4>Syntax</h4>
<div class="dark bg-gray-950 contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative">
<div class="flex items-center text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9">
<pre class="language-markup"><code>&lt;element style="color: hsl(H, S%, L%);"&gt;
</code></pre>
</div>
</div>
<h4>Example</h4>
<div class="dark bg-gray-950 contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative">
<div class="flex items-center text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9">
<pre class="language-markup"><code>&lt;p style="color: hsl(120, 100%, 50%);"&gt;This text is a pure green color using HSL.&lt;/p&gt;
&lt;p style="background-color: hsl(240, 100%, 50%);"&gt;This paragraph has a pure blue background using HSL.&lt;/p&gt;
</code></pre>
</div>
</div>
<h3>6. <strong>HSLA Colors</strong></h3>
<p>HSLA extends HSL by adding an alpha channel for opacity. The <code>hsla()</code> function allows you to specify the hue, saturation, lightness, and alpha value.</p>
<h4>Syntax</h4>
<div class="dark bg-gray-950 contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative">
<div class="flex items-center text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9">
<pre class="language-markup"><code>&lt;element style="color: hsla(H, S%, L%, A);"&gt;
</code></pre>
</div>
</div>
<h4>Example</h4>
<div class="dark bg-gray-950 contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative">
<div class="flex items-center text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9">
<pre class="language-markup"><code>&lt;p style="color: hsla(120, 100%, 50%, 0.5);"&gt;This text is green with 50% opacity using HSLA.&lt;/p&gt;
&lt;p style="background-color: hsla(240, 100%, 50%, 0.3);"&gt;This paragraph has a blue background with 30% opacity using HSLA.&lt;/p&gt;
</code></pre>
</div>
</div>
<h3>Example Combining Different Color Types</h3>
<div class="dark bg-gray-950 contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative">
<div class="flex items-center text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9">
<pre class="language-markup"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;title&gt;HTML Colors Example&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;h1&gt;HTML Colors&lt;/h1&gt;

&lt;!-- Named Color --&gt;
  &lt;p style="color: coral;"&gt;This text is coral using a named color.&lt;/p&gt;

&lt;!-- Hexadecimal Color --&gt;
  &lt;p style="color: #ff4500;"&gt;This text is orange-red using a hexadecimal color.&lt;/p&gt;

&lt;!-- RGB Color --&gt;
  &lt;p style="color: rgb(255, 105, 180);"&gt;This text is hot pink using RGB.&lt;/p&gt;

&lt;!-- RGBA Color --&gt;
  &lt;p style="color: rgba(255, 69, 0, 0.8);"&gt;This text is red-orange with 80% opacity using RGBA.&lt;/p&gt;

&lt;!-- HSL Color --&gt;
  &lt;p style="color: hsl(180, 100%, 50%);"&gt;This text is cyan using HSL.&lt;/p&gt;

&lt;!-- HSLA Color --&gt;
  &lt;p style="color: hsla(300, 100%, 50%, 0.6);"&gt;This text is violet with 60% opacity using HSLA.&lt;/p&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
</div>
<h3>Conclusion</h3>
<p>Colors in HTML are a fundamental aspect of web design, providing visual appeal and enhancing user experience. By using named colors, hexadecimal, RGB, RGBA, HSL, and HSLA values, you can apply a wide range of colors and opacities to various elements on your webpage. Each method offers flexibility for different use cases and design preferences.</p>

Web Technology View More