CSS Tutorial

CSS Color Values

Last modified on: November 6, 2024

<h3>CSS Color Values</h3>
<p>CSS provides multiple ways to specify color values, allowing you to add a variety of visual effects to your web content. Common methods include keywords, hexadecimal (HEX), RGB, RGBA, HSL, and HSLA.</p>
<hr />
<h4>1. Color Keywords</h4>
<p>Color keywords are predefined color names in CSS, like <code>red</code>, <code>blue</code>, <code>green</code>, etc.</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">css</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-css"><code>color: red;
background-color: lightblue;
</code></pre>
</div>
</div>
</div>
</div>
<p>&nbsp;</p>
<h4>2. HEX Colors</h4>
<p>HEX color values are defined using a hexadecimal format: <code>#RRGGBB</code> or <code>#RGB</code>.</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">css</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-css"><code>color: #ff6347; /* tomato color */
background-color: #ccc; /* light gray */
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h4>3. RGB Colors</h4>
<p>RGB color values use the format <code>rgb(red, green, blue)</code> with each value ranging from 0 to 255.</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">css</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-css"><code>color: rgb(255, 99, 71); /* tomato color */
background-color: rgb(204, 204, 204); /* light gray */
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h4>4. RGBA Colors</h4>
<p>RGBA is an extension of RGB, with an additional <strong>Alpha</strong> value for transparency. Format: <code>rgba(red, green, blue, alpha)</code>, where <strong>alpha</strong> is between 0 (fully transparent) and 1 (fully opaque).</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">css</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-css"><code>color: rgba(255, 99, 71, 0.5); /* semi-transparent tomato color */
background-color: rgba(204, 204, 204, 0.3); /* semi-transparent light gray */
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h4>5. HSL Colors</h4>
<p>HSL stands for <strong>Hue</strong>, <strong>Saturation</strong>, and <strong>Lightness</strong>. Format: <code>hsl(hue, saturation%, lightness%)</code>.</p>
<ul>
<li><strong>Hue</strong> is a degree on the color wheel (0-360), with 0 = red, 120 = green, and 240 = blue.</li>
<li><strong>Saturation</strong> is a percentage (0% = gray, 100% = full color).</li>
<li><strong>Lightness</strong> is also a percentage (0% = black, 100% = white).</li>
</ul>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">css</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-css"><code>color: hsl(9, 100%, 64%); /* tomato color */
background-color: hsl(0, 0%, 80%); /* light gray */
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h4>6. HSLA Colors</h4>
<p>HSLA is an extension of HSL, adding <strong>Alpha</strong> for transparency. Format: <code>hsla(hue, saturation%, lightness%, alpha)</code>.</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">css
<pre class="language-css"><code>color: hsla(9, 100%, 64%, 0.5); /* semi-transparent tomato */
background-color: hsla(0, 0%, 80%, 0.3); /* semi-transparent light gray */
</code></pre>
</div>
</div>
<hr />
<h3>Examples of Usage</h3>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;CSS Color Values Example&lt;/title&gt;
    &lt;style&gt;
        .keyword-color { color: red; }
        .hex-color { color: #ff6347; }
        .rgb-color { color: rgb(255, 99, 71); }
        .rgba-color { color: rgba(255, 99, 71, 0.5); }
        .hsl-color { color: hsl(9, 100%, 64%); }
        .hsla-color { color: hsla(9, 100%, 64%, 0.5); }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h2 class="keyword-color"&gt;Keyword Color: Red&lt;/h2&gt;
    &lt;h2 class="hex-color"&gt;HEX Color: #ff6347&lt;/h2&gt;
    &lt;h2 class="rgb-color"&gt;RGB Color: rgb(255, 99, 71)&lt;/h2&gt;
    &lt;h2 class="rgba-color"&gt;RGBA Color: rgba(255, 99, 71, 0.5)&lt;/h2&gt;
    &lt;h2 class="hsl-color"&gt;HSL Color: hsl(9, 100%, 64%)&lt;/h2&gt;
    &lt;h2 class="hsla-color"&gt;HSLA Color: hsla(9, 100%, 64%, 0.5)&lt;/h2&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
</div>
</div>
</div>
<p>This example demonstrates how various CSS color values affect text colors, offering flexibility for any design style. Adjusting each value type allows designers to find the exact tone and transparency they need.</p>

Web Technology View More

CSS Color Values

Learn Ansible

Learn HTML

Learn Angular 3

Learn PHP

Learn Angular 2.0

Learn Python

Learn C# Sharp

Learn CSS

Learn Node Js

Learn JQuery Framework

Learn SQL Tutorial

Learn MySql

Learn PHP 7.1

Learn Angular 3

Learn Angular 2

Learn HTML5

Learn Angular 2

Learn Angular 3.0

Learn Bootstrap 3

Learn Bootstrap 4

Learn Bootstrap 5

Learn JQuery Tutorials