CSS Color Reference 🎨
Complete guide to CSS color formats with real-world examples, browser support information, and practical applications. Master everything from basic hex codes to advanced color functions and gradients.
Understanding CSS Colors
CSS provides multiple ways to define colors, each with its own strengths and use cases. From simple named colors to advanced color functions, understanding these formats is essential for creating beautiful, accessible, and maintainable web designs.
🎯 Color Strategy
Different color formats serve different purposes - hex for consistency, RGB for transparency, HSL for dynamic theming, and gradients for modern visual effects.
Key Color Formats:
- Hex Colors: #RRGGBB format for consistency
- RGB/RGBA: Red, Green, Blue with alpha transparency
- HSL/HSLA: Hue, Saturation, Lightness for dynamic theming
- Named Colors: Predefined keywords for quick prototyping
- Gradients: Smooth color transitions for modern UI
- Advanced Functions: Color mixing, contrast, and manipulation
Complete CSS Color Reference
Production-Ready Examples:
- Real-world use cases from modern web applications
- Accessibility-focused color implementations
- Performance-optimized color usage
- Browser compatibility considerations
- Mobile-first responsive color systems
Interactive Color Reference
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Color Reference - Real World Examples</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
line-height: 1.6;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 2rem;
color: #2c3e50;
}
.container {
max-width: 1400px;
margin: 0 auto;
}
.header {
text-align: center;
margin-bottom: 3rem;
color: white;
}
.header h1 {
font-size: 3rem;
margin-bottom: 1rem;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
.categories {
display: flex;
gap: 1rem;
margin-bottom: 2rem;
flex-wrap: wrap;
justify-content: center;
}
.category-btn {
background: white;
border: none;
padding: 0.75rem 1.5rem;
border-radius: 25px;
cursor: pointer;
font-weight: 600;
transition: all 0.3s ease;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.category-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.category-btn.active {
background: #3498db;
color: white;
}
.colors-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: 2rem;
}
.color-card {
background: white;
border-radius: 15px;
padding: 2rem;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
transition: transform 0.3s ease;
}
.color-card:hover {
transform: translateY(-5px);
}
.color-header {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1rem;
padding-bottom: 1rem;
border-bottom: 2px solid #ecf0f1;
}
.color-icon {
width: 50px;
height: 50px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
color: white;
}
.hex { background: #e74c3c; }
.rgb { background: #3498db; }
.hsl { background: #2ecc71; }
.named { background: #9b59b6; }
.current { background: #f39c12; }
.gradient { background: #1abc9c; }
.color-syntax {
font-family: 'Fira Code', monospace;
background: #2c3e50;
color: white;
padding: 0.5rem 1rem;
border-radius: 5px;
font-size: 1.1rem;
margin-bottom: 1rem;
}
.color-description {
color: #7f8c8d;
margin-bottom: 1rem;
line-height: 1.6;
}
.real-world-usage {
background: #f8f9fa;
padding: 1rem;
border-radius: 8px;
margin-bottom: 1rem;
}
.usage-title {
color: #2c3e50;
margin-bottom: 0.5rem;
font-weight: 600;
}
.code-example {
background: #2c3e50;
color: #ecf0f1;
padding: 1rem;
border-radius: 5px;
font-family: 'Fira Code', monospace;
font-size: 0.9rem;
margin: 0.5rem 0;
}
.demo-area {
background: #ecf0f1;
padding: 1.5rem;
border-radius: 10px;
margin-top: 1rem;
border: 2px dashed #bdc3c7;
}
.demo-container {
display: grid;
gap: 1rem;
}
.color-palette {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
gap: 0.5rem;
margin: 1rem 0;
}
.color-swatch {
height: 60px;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 0.75rem;
font-weight: bold;
text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}
.browser-support {
display: flex;
align-items: center;
gap: 0.5rem;
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid #ecf0f1;
}
.support-badge {
padding: 0.25rem 0.5rem;
border-radius: 4px;
font-size: 0.8rem;
font-weight: bold;
}
.supported { background: #d4edda; color: #155724; }
.partial { background: #fff3cd; color: #856404; }
@media (max-width: 768px) {
.colors-grid {
grid-template-columns: 1fr;
}
.header h1 {
font-size: 2rem;
}
.categories {
flex-direction: column;
align-items: center;
}
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>🎨 CSS Color Reference</h1>
<p>Real-world examples of CSS color formats and applications</p>
</div>
<div class="categories">
<button class="category-btn active" onclick="filterColors('all')">All Formats</button>
<button class="category-btn" onclick="filterColors('hex')">Hex Colors</button>
<button class="category-btn" onclick="filterColors('rgb')">RGB/RGBA</button>
<button class="category-btn" onclick="filterColors('hsl')">HSL/HSLA</button>
<button class="category-btn" onclick="filterColors('named')">Named Colors</button>
<button class="category-btn" onclick="filterColors('gradient')">Gradients</button>
</div>
<div class="colors-grid">
<!-- Hex Colors -->
<div class="color-card" data-category="hex">
<div class="color-header">
<div class="color-icon hex">#</div>
<div>
<h3>Hex Colors</h3>
<p>Six-digit hexadecimal notation</p>
</div>
</div>
<div class="color-syntax">#RRGGBB, #RGB</div>
<div class="color-description">
The most common color format in web development. Hex codes represent
red, green, and blue components with hexadecimal values (00-FF).
</div>
<div class="real-world-usage">
<div class="usage-title">Real World Usage:</div>
<ul>
<li>Brand colors and design systems</li>
<li>CSS frameworks and component libraries</li>
<li>Quick prototyping and development</li>
<li>Cross-browser compatibility</li>
</ul>
</div>
<div class="code-example">
<span class="comment">/* Brand color system */</span><br>
:root {<br>
--primary: #3498db;<br>
--success: #2ecc71;<br>
--warning: #f39c12;<br>
--danger: #e74c3c;<br>
--dark: #2c3e50;<br>
--light: #ecf0f1;<br>
}<br><br>
<span class="comment">/* Button variants */</span><br>
.btn-primary { background: #3498db; }<br>
.btn-success { background: #2ecc71; }<br>
.btn-warning { background: #f39c12; }<br>
.btn-danger { background: #e74c3c; }
</div>
<div class="demo-area">
<div class="demo-container">
<div class="color-palette">
<div class="color-swatch" style="background: #3498db;">#3498db</div>
<div class="color-swatch" style="background: #2ecc71;">#2ecc71</div>
<div class="color-swatch" style="background: #e74c3c;">#e74c3c</div>
<div class="color-swatch" style="background: #f39c12;">#f39c12</div>
<div class="color-swatch" style="background: #9b59b6;">#9b59b6</div>
<div class="color-swatch" style="background: #1abc9c;">#1abc9c</div>
</div>
<div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
<button style="background: #3498db; color: white; border: none; padding: 0.5rem 1rem; border-radius: 4px; font-size: 0.875rem;">
Primary
</button>
<button style="background: #2ecc71; color: white; border: none; padding: 0.5rem 1rem; border-radius: 4px; font-size: 0.875rem;">
Success
</button>
<button style="background: #e74c3c; color: white; border: none; padding: 0.5rem 1rem; border-radius: 4px; font-size: 0.875rem;">
Danger
</button>
</div>
</div>
</div>
<div class="browser-support">
<span>Browser Support:</span>
<span class="support-badge supported">100%</span>
<span class="support-badge supported">All</span>
<span class="support-badge supported">All</span>
<span class="support-badge supported">All</span>
</div>
</div>
<!-- RGB/RGBA Colors -->
<div class="color-card" data-category="rgb">
<div class="color-header">
<div class="color-icon rgb">RGB</div>
<div>
<h3>RGB/RGBA Colors</h3>
<p>Red, Green, Blue with Alpha channel</p>
</div>
</div>
<div class="color-syntax">rgb(255, 255, 255), rgba(255, 255, 255, 0.5)</div>
<div class="color-description">
Defines colors using the RGB color model. RGBA includes an alpha
channel for transparency control (0 = fully transparent, 1 = fully opaque).
</div>
<div class="real-world-usage">
<div class="usage-title">Real World Usage:</div>
<ul>
<li>Semi-transparent overlays and modals</li>
<li>Glass morphism and modern UI effects</li>
<li>Dynamic opacity adjustments</li>
<li>Color manipulation with JavaScript</li>
</ul>
</div>
<div class="code-example">
<span class="comment">/* Glass morphism effect */</span><br>
.glass-card {<br>
background: rgba(255, 255, 255, 0.1);<br>
backdrop-filter: blur(10px);<br>
border: 1px solid rgba(255, 255, 255, 0.2);<br>
}<br><br>
<span class="comment">/* Overlay with transparency */</span><br>
.overlay {<br>
background: rgba(0, 0, 0, 0.7);<br>
position: fixed;<br>
top: 0;<br>
left: 0;<br>
width: 100%;<br>
height: 100%;<br>
}<br><br>
<span class="comment">/* Hover states with opacity */</span><br>
.button:hover {<br>
background: rgba(52, 152, 219, 0.8);<br>
}
</div>
<div class="demo-area">
<div class="demo-container">
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-bottom: 1rem;">
<div class="color-swatch" style="background: rgb(52, 152, 219);">rgb(52,152,219)</div>
<div class="color-swatch" style="background: rgba(52, 152, 219, 0.7);">rgba(52,152,219,0.7)</div>
<div class="color-swatch" style="background: rgba(52, 152, 219, 0.3);">rgba(52,152,219,0.3)</div>
</div>
<div style="
background: rgba(52, 152, 219, 0.1);
backdrop-filter: blur(8px);
border: 1px solid rgba(52, 152, 219, 0.2);
padding: 1rem;
border-radius: 8px;
text-align: center;
">
<h4 style="margin: 0 0 0.5rem 0; color: #2c3e50;">Glass Card</h4>
<p style="margin: 0; color: #7f8c8d; font-size: 0.875rem;">With rgba background and backdrop filter</p>
</div>
</div>
</div>
<div class="browser-support">
<span>Browser Support:</span>
<span class="support-badge supported">100%</span>
<span class="support-badge supported">All</span>
<span class="support-badge supported">All</span>
<span class="support-badge supported">All</span>
</div>
</div>
<!-- HSL/HSLA Colors -->
<div class="color-card" data-category="hsl">
<div class="color-header">
<div class="color-icon hsl">HSL</div>
<div>
<h3>HSL/HSLA Colors</h3>
<p>Hue, Saturation, Lightness with Alpha</p>
</div>
</div>
<div class="color-syntax">hsl(120, 100%, 50%), hsla(120, 100%, 50%, 0.5)</div>
<div class="color-description">
Defines colors using the HSL color model, which is more intuitive
for creating color variations and themes. Hue (0-360), Saturation (0%-100%),
Lightness (0%-100%).
</div>
<div class="real-world-usage">
<div class="usage-title">Real World Usage:</div>
<ul>
<li>Dynamic theme systems and color schemes</li>
<li>Accessible color contrast adjustments</li>
<li>Color palette generation</li>
<li>Real-time color manipulation</li>
</ul>
</div>
<div class="code-example">
<span class="comment">/* Dynamic theme system */</span><br>
:root {<br>
--hue: 204;<br>
--primary: hsl(var(--hue), 70%, 50%);<br>
--primary-light: hsl(var(--hue), 70%, 70%);<br>
--primary-dark: hsl(var(--hue), 70%, 30%);<br>
}<br><br>
<span class="comment">/* Theme variations */</span><br>
.theme-blue { --hue: 204; }<br>
.theme-green { --hue: 145; }<br>
.theme-purple { --hue: 282; }<br><br>
<span class="comment">/* Accessible text colors */</span><br>
.text-primary { color: hsl(0, 0%, 20%); }<br>
.text-muted { color: hsl(0, 0%, 60%); }
</div>
<div class="demo-area">
<div class="demo-container">
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-bottom: 1rem;">
<div class="color-swatch" style="background: hsl(204, 70%, 50%); color: white;">hsl(204,70%,50%)</div>
<div class="color-swatch" style="background: hsl(204, 70%, 70%); color: black;">hsl(204,70%,70%)</div>
<div class="color-swatch" style="background: hsl(204, 70%, 30%); color: white;">hsl(204,70%,30%)</div>
</div>
<div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.25rem;">
<div class="color-swatch" style="background: hsl(0, 70%, 50%); height: 40px; font-size: 0.6rem;">Red</div>
<div class="color-swatch" style="background: hsl(90, 70%, 50%); height: 40px; font-size: 0.6rem;">Green</div>
<div class="color-swatch" style="background: hsl(180, 70%, 50%); height: 40px; font-size: 0.6rem;">Cyan</div>
<div class="color-swatch" style="background: hsl(270, 70%, 50%); height: 40px; font-size: 0.6rem;">Purple</div>
</div>
</div>
</div>
<div class="browser-support">
<span>Browser Support:</span>
<span class="support-badge supported">100%</span>
<span class="support-badge supported">All</span>
<span class="support-badge supported">All</span>
<span class="support-badge supported">All</span>
</div>
</div>
<!-- Named Colors -->
<div class="color-card" data-category="named">
<div class="color-header">
<div class="color-icon named">A</div>
<div>
<h3>Named Colors</h3>
<p>Predefined color keywords</p>
</div>
</div>
<div class="color-syntax">red, blue, transparent, currentColor</div>
<div class="color-description">
CSS provides 148 named colors that represent common colors.
These are easy to remember and use for quick prototyping and basic styling.
</div>
<div class="real-world-usage">
<div class="usage-title">Real World Usage:</div>
<ul>
<li>Quick prototyping and mockups</li>
<li>Educational examples and documentation</li>
<li>Basic styling and testing</li>
<li>Semantic color usage (red for errors, green for success)</li>
</ul>
</div>
<div class="code-example">
<span class="comment">/* Semantic color usage */</span><br>
.error {<br>
color: red;<br>
background-color: lightpink;<br>
border: 1px solid darkred;<br>
}<br><br>
<span class="comment">/* Success states */</span><br>
.success {<br>
color: green;<br>
background-color: lightgreen;<br>
border: 1px solid darkgreen;<br>
}<br><br>
<span class="comment">/* Quick prototyping */</span><br>
.debug {<br>
border: 1px solid red;<br>
background-color: yellow;<br>
}
</div>
<div class="demo-area">
<div class="demo-container">
<div class="color-palette">
<div class="color-swatch" style="background: red;">red</div>
<div class="color-swatch" style="background: blue;">blue</div>
<div class="color-swatch" style="background: green;">green</div>
<div class="color-swatch" style="background: orange;">orange</div>
<div class="color-swatch" style="background: purple;">purple</div>
<div class="color-swatch" style="background: teal;">teal</div>
</div>
<div style="display: flex; gap: 1rem; flex-wrap: wrap;">
<div style="
background: lightpink;
color: darkred;
padding: 0.5rem 1rem;
border: 1px solid darkred;
border-radius: 4px;
font-size: 0.875rem;
">
Error Message
</div>
<div style="
background: lightgreen;
color: darkgreen;
padding: 0.5rem 1rem;
border: 1px solid darkgreen;
border-radius: 4px;
font-size: 0.875rem;
">
Success Message
</div>
<div style="
background: lightyellow;
color: darkgoldenrod;
padding: 0.5rem 1rem;
border: 1px solid darkgoldenrod;
border-radius: 4px;
font-size: 0.875rem;
">
Warning Message
</div>
</div>
</div>
</div>
<div class="browser-support">
<span>Browser Support:</span>
<span class="support-badge supported">100%</span>
<span class="support-badge supported">All</span>
<span class="support-badge supported">All</span>
<span class="support-badge supported">All</span>
</div>
</div>
<!-- CurrentColor -->
<div class="color-card" data-category="named">
<div class="color-header">
<div class="color-icon current">C</div>
<div>
<h3>currentColor</h3>
<p>Inherit current text color</p>
</div>
</div>
<div class="color-syntax">currentColor</div>
<div class="color-description">
A special keyword that represents the current value of the color property.
It enables consistent theming and reduces code duplication.
</div>
<div class="real-world-usage">
<div class="usage-title">Real World Usage:</div>
<ul>
<li>Icon systems that match text color</li>
<li>Border colors that inherit from text</li>
<li>SVG styling and icon coloring</li>
<li>Component theming systems</li>
</ul>
</div>
<div class="code-example">
<span class="comment">/* Icon button with currentColor */</span><br>
.icon-btn {<br>
color: #3498db;<br>
border: 2px solid currentColor;<br>
background: none;<br>
}<br>
.icon-btn svg {<br>
fill: currentColor;<br>
}<br><br>
<span class="comment">/* Link styling */</span><br>
a {<br>
color: #e74c3c;<br>
text-decoration: none;<br>
border-bottom: 1px solid currentColor;<br>
}<br><br>
<span class="comment">/* Component theming */</span><br>
.card {<br>
color: #2c3e50;<br>
border: 1px solid currentColor;<br>
box-shadow: 0 2px 4px currentColor;<br>
}
</div>
<div class="demo-area">
<div class="demo-container">
<div style="display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem;">
<button style="
color: #3498db;
border: 2px solid currentColor;
background: none;
padding: 0.5rem 1rem;
border-radius: 4px;
font-size: 0.875rem;
">
🔵 Blue Button
</button>
<button style="
color: #e74c3c;
border: 2px solid currentColor;
background: none;
padding: 0.5rem 1rem;
border-radius: 4px;
font-size: 0.875rem;
">
🔴 Red Button
</button>
<button style="
color: #2ecc71;
border: 2px solid currentColor;
background: none;
padding: 0.5rem 1rem;
border-radius: 4px;
font-size: 0.875rem;
">
🟢 Green Button
</button>
</div>
<div style="
color: #9b59b6;
border: 1px solid currentColor;
padding: 1rem;
border-radius: 4px;
text-align: center;
">
<div style="font-weight: bold; margin-bottom: 0.5rem;">Card Title</div>
<div style="font-size: 0.875rem;">This card uses currentColor for borders</div>
</div>
</div>
</div>
<div class="browser-support">
<span>Browser Support:</span>
<span class="support-badge supported">100%</span>
<span class="support-badge supported">All</span>
<span class="support-badge supported">All</span>
<span class="support-badge supported">All</span>
</div>
</div>
<!-- CSS Gradients -->
<div class="color-card" data-category="gradient">
<div class="color-header">
<div class="color-icon gradient">🌅</div>
<div>
<h3>CSS Gradients</h3>
<p>Smooth color transitions</p>
</div>
</div>
<div class="color-syntax">linear-gradient(), radial-gradient(), conic-gradient()</div>
<div class="color-description">
CSS gradients let you display smooth transitions between two or more
specified colors. They can be linear, radial, or conic and are
rendered by the browser.
</div>
<div class="real-world-usage">
<div class="usage-title">Real World Usage:</div>
<ul>
<li>Modern button designs and UI elements</li>
<li>Background hero sections and banners</li>
<li>Loading animations and progress bars</li>
<li>Data visualization and charts</li>
</ul>
</div>
<div class="code-example">
<span class="comment">/* Modern gradient button */</span><br>
.gradient-btn {<br>
background: linear-gradient(45deg, #667eea, #764ba2);<br>
color: white;<br>
border: none;<br>
padding: 12px 24px;<br>
border-radius: 8px;<br>
}<br><br>
<span class="comment">/* Hero section background */</span><br>
.hero {<br>
background: linear-gradient(135deg,<br>
rgba(102, 126, 234, 0.9),<br>
rgba(118, 75, 162, 0.9)<br>
);<br>
}<br><br>
<span class="comment">/* Radial gradient for spotlight */</span><br>
.spotlight {<br>
background: radial-gradient(circle, #ffeb3b, #ff9800);<br>
}
</div>
<div class="demo-area">
<div class="demo-container">
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-bottom: 1rem;">
<div class="color-swatch" style="background: linear-gradient(45deg, #667eea, #764ba2);">
Linear
</div>
<div class="color-swatch" style="background: radial-gradient(circle, #667eea, #764ba2);">
Radial
</div>
</div>
<button style="
background: linear-gradient(45deg, #667eea, #764ba2);
color: white;
border: none;
padding: 0.75rem 1.5rem;
border-radius: 8px;
font-weight: bold;
margin-bottom: 1rem;
">
Gradient Button
</button>
<div style="
background: conic-gradient(from 0deg, #667eea, #764ba2, #667eea);
height: 60px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
">
Conic Gradient
</div>
</div>
</div>
<div class="browser-support">
<span>Browser Support:</span>
<span class="support-badge supported">98%</span>
<span class="support-badge supported">26+</span>
<span class="support-badge supported">16+</span>
<span class="support-badge supported">12+</span>
</div>
</div>
</div>
</div>
<script>
function filterColors(category) {
const cards = document.querySelectorAll('.color-card');
const buttons = document.querySelectorAll('.category-btn');
buttons.forEach(btn => {
btn.classList.remove('active');
if (btn.textContent.toLowerCase().includes(category)) {
btn.classList.add('active');
}
});
cards.forEach(card => {
if (category === 'all' || card.dataset.category.includes(category)) {
card.style.display = 'block';
} else {
card.style.display = 'none';
}
});
}
</script>
</body>
</html>Advanced CSS Color Features
Modern Color Functions
Advanced color features for dynamic theming, accessibility, and real-time color manipulation in modern web applications.
color-mix() color-contrast()
lab() lch() color()
filter: hue-rotate()
background-blend-mode
System & Accessibility
Features that ensure your colors work across different operating systems and meet accessibility standards.
prefers-color-scheme
system colors (Canvas, ButtonFace)
forced-colors media query
color contrast checking
Advanced Color Implementation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Advanced CSS Color - Modern Web Development</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
line-height: 1.6;
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
min-height: 100vh;
padding: 2rem;
color: #2c3e50;
}
.container {
max-width: 1400px;
margin: 0 auto;
}
.header {
text-align: center;
margin-bottom: 3rem;
color: white;
}
.header h1 {
font-size: 3rem;
margin-bottom: 1rem;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
.advanced-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
gap: 2rem;
}
.advanced-card {
background: white;
border-radius: 15px;
padding: 2rem;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.color-group {
margin-bottom: 2rem;
}
.color-group h3 {
color: #2c3e50;
margin-bottom: 1rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid #3498db;
}
.color-item {
background: #f8f9fa;
padding: 1rem;
border-radius: 8px;
margin-bottom: 1rem;
border-left: 4px solid #3498db;
}
.color-syntax {
font-family: 'Fira Code', monospace;
background: #2c3e50;
color: white;
padding: 0.5rem 1rem;
border-radius: 5px;
margin-bottom: 0.5rem;
font-size: 0.9rem;
}
.color-description {
color: #7f8c8d;
margin-bottom: 0.5rem;
}
.demo-container {
background: #ecf0f1;
padding: 1.5rem;
border-radius: 10px;
margin: 1rem 0;
}
.color-mix-demo {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 1rem;
margin: 1rem 0;
}
.mix-box {
height: 80px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}
.filter-demo {
width: 200px;
height: 200px;
margin: 1rem auto;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect width="100" height="100" fill="%233498db"/><circle cx="50" cy="50" r="40" fill="%232ecc71"/></svg>');
}
.blend-demo {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
margin: 1rem 0;
}
.blend-box {
height: 100px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
}
@media (max-width: 768px) {
.advanced-grid {
grid-template-columns: 1fr;
}
.header h1 {
font-size: 2rem;
}
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>🚀 Advanced CSS Color</h1>
<p>Modern CSS color features for sophisticated web development</p>
</div>
<div class="advanced-grid">
<!-- Color Mix -->
<div class="advanced-card">
<h2>🎨 Color Mix Function</h2>
<div class="color-group">
<h3>Dynamic Color Blending</h3>
<div class="color-item">
<div class="color-syntax">color-mix(in srgb, #3498db 50%, #e74c3c)</div>
<div class="color-description">
The color-mix() function allows you to mix two colors in a specified
color space, with optional weighting for each color.
</div>
</div>
</div>
<div class="demo-container">
<h4>Color Mix Demo:</h4>
<div class="color-mix-demo">
<div class="mix-box" style="background: #3498db;">Blue</div>
<div class="mix-box" style="background: color-mix(in srgb, #3498db 50%, #e74c3c);">Mixed</div>
<div class="mix-box" style="background: #e74c3c;">Red</div>
</div>
<div class="color-mix-demo">
<div class="mix-box" style="background: #2ecc71;">Green</div>
<div class="mix-box" style="background: color-mix(in srgb, #2ecc71 70%, #34495e);">Dark Green</div>
<div class="mix-box" style="background: #34495e;">Dark</div>
</div>
</div>
</div>
<!-- Color Contrast -->
<div class="advanced-card">
<h2>⚖️ Color Contrast Function</h2>
<div class="color-group">
<h3>Accessible Color Selection</h3>
<div class="color-item">
<div class="color-syntax">color-contrast(#3498db vs #fff, #000)</div>
<div class="color-description">
Automatically selects the color with the highest contrast ratio
from a list of colors, ensuring accessibility compliance.
</div>
</div>
</div>
<div class="demo-container">
<h4>Color Contrast Demo:</h4>
<style>
.contrast-demo {
padding: 1rem;
margin: 0.5rem 0;
border-radius: 4px;
font-weight: bold;
}
</style>
<div class="contrast-demo" style="background: #3498db; color: color-contrast(#3498db vs white, black);">
Blue Background - Auto Text Color
</div>
<div class="contrast-demo" style="background: #2c3e50; color: color-contrast(#2c3e50 vs white, #f39c12, black);">
Dark Background - Best Contrast
</div>
<div class="contrast-demo" style="background: #f39c12; color: color-contrast(#f39c12 vs white, black);">
Orange Background - Accessible Text
</div>
</div>
</div>
<!-- CSS Filters -->
<div class="advanced-card">
<h2>🔍 CSS Color Filters</h2>
<div class="color-group">
<h3>Real-time Color Manipulation</h3>
<div class="color-item">
<div class="color-syntax">filter: hue-rotate(90deg) saturate(1.5)</div>
<div class="color-description">
Apply visual effects like hue rotation, saturation, brightness,
and contrast to elements and their children.
</div>
</div>
</div>
<div class="demo-container">
<h4>Color Filter Demo:</h4>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
<div class="filter-demo"></div>
<div class="filter-demo" style="filter: hue-rotate(90deg) saturate(1.5);"></div>
</div>
<div style="display: flex; gap: 1rem; margin-top: 1rem;">
<div style="
background: #3498db;
padding: 1rem;
border-radius: 4px;
color: white;
flex: 1;
">
Normal
</div>
<div style="
background: #3498db;
padding: 1rem;
border-radius: 4px;
color: white;
flex: 1;
filter: brightness(1.5) contrast(1.2);
">
Bright + Contrast
</div>
<div style="
background: #3498db;
padding: 1rem;
border-radius: 4px;
color: white;
flex: 1;
filter: grayscale(1);
">
Grayscale
</div>
</div>
</div>
</div>
<!-- Blend Modes -->
<div class="advanced-card">
<h2>🎭 Blend Modes</h2>
<div class="color-group">
<h3>Advanced Color Composition</h3>
<div class="color-item">
<div class="color-syntax">background-blend-mode: multiply</div>
<div class="color-description">
Control how an element's background layers blend with each other
and how elements blend with their backdrop.
</div>
</div>
</div>
<div class="demo-container">
<h4>Blend Mode Demo:</h4>
<div class="blend-demo">
<div class="blend-box" style="
background:
linear-gradient(45deg, #3498db, transparent),
linear-gradient(-45deg, #e74c3c, transparent);
background-blend-mode: multiply;
">
Multiply
</div>
<div class="blend-box" style="
background:
linear-gradient(45deg, #3498db, transparent),
linear-gradient(-45deg, #e74c3c, transparent);
background-blend-mode: screen;
">
Screen
</div>
</div>
<div class="blend-demo">
<div class="blend-box" style="
background:
linear-gradient(45deg, #2ecc71, transparent),
linear-gradient(-45deg, #9b59b6, transparent);
background-blend-mode: overlay;
">
Overlay
</div>
<div class="blend-box" style="
background:
linear-gradient(45deg, #f39c12, transparent),
linear-gradient(-45deg, #34495e, transparent);
background-blend-mode: difference;
">
Difference
</div>
</div>
</div>
</div>
<!-- Color Spaces -->
<div class="advanced-card">
<h2>🌈 Color Spaces</h2>
<div class="color-group">
<h3>Modern Color Representation</h3>
<div class="color-item">
<div class="color-syntax">color(display-p3 1 0.5 0)</div>
<div class="color-description">
CSS Color Module Level 4 introduces new color spaces like
display-p3, rec2020, and lab() for wider color gamuts and
more accurate color representation.
</div>
</div>
</div>
<div class="demo-container">
<h4>Color Space Demo:</h4>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1rem 0;">
<div class="mix-box" style="background: rgb(255, 0, 0);">sRGB Red</div>
<div class="mix-box" style="background: color(display-p3 1 0 0);">P3 Red</div>
</div>
<div style="
background: linear-gradient(
to right,
color(display-p3 1 0 0),
color(display-p3 1 1 0),
color(display-p3 0 1 0),
color(display-p3 0 1 1),
color(display-p3 0 0 1),
color(display-p3 1 0 1)
);
height: 60px;
border-radius: 8px;
margin: 1rem 0;
"></div>
<p style="text-align: center; color: #7f8c8d; font-size: 0.875rem;">
P3 color space offers wider gamut than sRGB
</p>
</div>
</div>
<!-- System Colors -->
<div class="advanced-card">
<h2>💻 System Colors</h2>
<div class="color-group">
<h3>Native Theme Integration</h3>
<div class="color-item">
<div class="color-syntax">Canvas, CanvasText, LinkText</div>
<div class="color-description">
CSS system colors allow your website to adapt to the user's
operating system theme and accessibility settings automatically.
</div>
</div>
</div>
<div class="demo-container">
<h4>System Color Demo:</h4>
<div style="
background: Canvas;
color: CanvasText;
padding: 1rem;
border-radius: 4px;
border: 1px solid ButtonBorder;
margin-bottom: 1rem;
">
<h4 style="margin: 0 0 0.5rem 0; color: CanvasText;">System Styled Card</h4>
<p style="margin: 0 0 1rem 0; color: CanvasText;">This card uses system colors</p>
<button style="
background: ButtonFace;
color: ButtonText;
border: 1px solid ButtonBorder;
padding: 0.5rem 1rem;
border-radius: 4px;
cursor: pointer;
">
System Button
</button>
</div>
<div style="
color: LinkText;
text-decoration: underline;
cursor: pointer;
display: inline-block;
margin-right: 1rem;
">
System Link Color
</div>
<div style="
color: VisitedText;
text-decoration: underline;
cursor: pointer;
display: inline-block;
">
Visited Link Color
</div>
</div>
</div>
</div>
</div>
</body>
</html>CSS Color Cheatsheet
Quick Reference Guide
Essential CSS color formats organized by category for quick lookup and reference during development. Each format includes practical use cases and implementation guidance.
/* Color System */
--primary: #3498db;
--surface: rgba(255,255,255,0.1);
--hue: 204;
color: hsl(var(--hue), 70%, 50%);
Complete Color Cheatsheet
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Color Cheatsheet - Quick Reference</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
line-height: 1.6;
background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
min-height: 100vh;
padding: 2rem;
color: #2c3e50;
}
.container {
max-width: 1400px;
margin: 0 auto;
}
.header {
text-align: center;
margin-bottom: 3rem;
}
.header h1 {
font-size: 3rem;
margin-bottom: 1rem;
color: #2c3e50;
}
.cheatsheet-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.cheatsheet-section {
background: white;
border-radius: 15px;
padding: 2rem;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.section-header {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 2px solid;
}
.section-icon {
font-size: 2rem;
}
.hex { border-color: #e74c3c; }
.rgb { border-color: #3498db; }
.hsl { border-color: #2ecc71; }
.named { border-color: #9b59b6; }
.gradient { border-color: #f39c12; }
.advanced { border-color: #1abc9c; }
.color-list {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.color-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem;
background: #f8f9fa;
border-radius: 8px;
transition: background 0.2s ease;
}
.color-row:hover {
background: #e9ecef;
}
.color-name {
font-family: 'Fira Code', monospace;
font-weight: 600;
color: #2c3e50;
}
.color-purpose {
font-size: 0.85rem;
color: #7f8c8d;
text-align: right;
}
.quick-examples {
background: #2c3e50;
color: #ecf0f1;
padding: 1.5rem;
border-radius: 10px;
margin-top: 2rem;
}
.example-title {
color: #3498db;
margin-bottom: 1rem;
font-weight: 600;
}
.code-block {
background: #34495e;
padding: 1rem;
border-radius: 5px;
margin: 1rem 0;
overflow-x: auto;
}
.best-practices {
background: #fff3cd;
border-left: 4px solid #ffc107;
padding: 1.5rem;
border-radius: 8px;
margin-top: 2rem;
}
.browser-support {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 1rem;
margin-top: 2rem;
}
.browser-item {
text-align: center;
padding: 1rem;
background: #f8f9fa;
border-radius: 8px;
}
.browser-icon {
font-size: 2rem;
margin-bottom: 0.5rem;
}
@media (max-width: 768px) {
.cheatsheet-grid {
grid-template-columns: 1fr;
}
.header h1 {
font-size: 2rem;
}
.color-row {
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
}
.color-purpose {
text-align: left;
}
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>📋 CSS Color Cheatsheet</h1>
<p>Quick reference guide for CSS color formats and functions</p>
</div>
<div class="cheatsheet-grid">
<!-- Hex Colors -->
<div class="cheatsheet-section hex">
<div class="section-header">
<div class="section-icon">#</div>
<h2>Hex Colors</h2>
</div>
<div class="color-list">
<div class="color-row">
<span class="color-name">#RRGGBB</span>
<span class="color-purpose">6-digit hex</span>
</div>
<div class="color-row">
<span class="color-name">#RGB</span>
<span class="color-purpose">3-digit hex</span>
</div>
<div class="color-row">
<span class="color-name">#RRGGBBAA</span>
<span class="color-purpose">8-digit hex with alpha</span>
</div>
<div class="color-row">
<span class="color-name">#RGBA</span>
<span class="color-purpose">4-digit hex with alpha</span>
</div>
</div>
</div>
<!-- RGB Colors -->
<div class="cheatsheet-section rgb">
<div class="section-header">
<div class="section-icon">RGB</div>
<h2>RGB Colors</h2>
</div>
<div class="color-list">
<div class="color-row">
<span class="color-name">rgb(255,255,255)</span>
<span class="color-purpose">RGB values</span>
</div>
<div class="color-row">
<span class="color-name">rgba(255,255,255,0.5)</span>
<span class="color-purpose">RGB with alpha</span>
</div>
<div class="color-row">
<span class="color-name">rgb(255 255 255)</span>
<span class="color-purpose">Modern RGB syntax</span>
</div>
<div class="color-row">
<span class="color-name">rgb(100% 100% 100%)</span>
<span class="color-purpose">Percentage RGB</span>
</div>
</div>
</div>
<!-- HSL Colors -->
<div class="cheatsheet-section hsl">
<div class="section-header">
<div class="section-icon">HSL</div>
<h2>HSL Colors</h2>
</div>
<div class="color-list">
<div class="color-row">
<span class="color-name">hsl(120,100%,50%)</span>
<span class="color-purpose">HSL values</span>
</div>
<div class="color-row">
<span class="color-name">hsla(120,100%,50%,0.5)</span>
<span class="color-purpose">HSL with alpha</span>
</div>
<div class="color-row">
<span class="color-name">hsl(120 100% 50%)</span>
<span class="color-purpose">Modern HSL syntax</span>
</div>
<div class="color-row">
<span class="color-name">hsl(120deg 100% 50%)</span>
<span class="color-purpose">Explicit degree unit</span>
</div>
</div>
</div>
<!-- Named Colors -->
<div class="cheatsheet-section named">
<div class="section-header">
<div class="section-icon">A</div>
<h2>Named Colors</h2>
</div>
<div class="color-list">
<div class="color-row">
<span class="color-name">red, blue, green</span>
<span class="color-purpose">Basic colors</span>
</div>
<div class="color-row">
<span class="color-name">transparent</span>
<span class="color-purpose">Fully transparent</span>
</div>
<div class="color-row">
<span class="color-name">currentColor</span>
<span class="color-purpose">Current text color</span>
</div>
<div class="color-row">
<span class="color-name">rebeccapurple</span>
<span class="color-purpose">Special named color</span>
</div>
</div>
</div>
<!-- Gradients -->
<div class="cheatsheet-section gradient">
<div class="section-header">
<div class="section-icon">🌅</div>
<h2>Gradients</h2>
</div>
<div class="color-list">
<div class="color-row">
<span class="color-name">linear-gradient()</span>
<span class="color-purpose">Linear color transition</span>
</div>
<div class="color-row">
<span class="color-name">radial-gradient()</span>
<span class="color-purpose">Circular gradient</span>
</div>
<div class="color-row">
<span class="color-name">conic-gradient()</span>
<span class="color-purpose">Angular gradient</span>
</div>
<div class="color-row">
<span class="color-name">repeating-linear-gradient()</span>
<span class="color-purpose">Repeating pattern</span>
</div>
</div>
</div>
<!-- Advanced Colors -->
<div class="cheatsheet-section advanced">
<div class="section-header">
<div class="section-icon">🚀</div>
<h2>Advanced Colors</h2>
</div>
<div class="color-list">
<div class="color-row">
<span class="color-name">color-mix()</span>
<span class="color-purpose">Color blending</span>
</div>
<div class="color-row">
<span class="color-name">color-contrast()</span>
<span class="color-purpose">Accessibility contrast</span>
</div>
<div class="color-row">
<span class="color-name">color()</span>
<span class="color-purpose">Color spaces</span>
</div>
<div class="color-row">
<span class="color-name">lab(), lch()</span>
<span class="color-purpose">Perceptual colors</span>
</div>
</div>
</div>
</div>
<!-- Quick Examples Section -->
<div class="quick-examples">
<div class="example-title">🚀 Real-World Color Patterns</div>
<div class="code-block">
<span class="comment">/* Modern color system */</span><br>
:root {<br>
--primary: #3498db;<br>
--primary-rgb: 52, 152, 219;<br>
--primary-hsl: 204, 70%, 53%;<br>
--surface: rgba(255, 255, 255, 0.1);<br>
}<br><br>
<span class="comment">/* Glass morphism effect */</span><br>
.glass {<br>
background: rgba(255, 255, 255, 0.1);<br>
backdrop-filter: blur(10px);<br>
border: 1px solid rgba(255, 255, 255, 0.2);<br>
}<br><br>
<span class="comment">/* Dynamic theming */</span><br>
.theme {<br>
--hue: 204;<br>
color: hsl(var(--hue), 70%, 50%);<br>
background: linear-gradient(<br>
45deg,<br>
hsl(var(--hue), 70%, 50%),<br>
hsl(var(--hue), 70%, 30%)<br>
);<br>
}
</div>
</div>
<!-- Best Practices -->
<div class="best-practices">
<h3>💡 CSS Color Best Practices</h3>
<ul>
<li><strong>Use HSL for dynamic theming</strong> - Easier to manipulate hue, saturation, and lightness</li>
<li><strong>Prefer RGBA for transparency</strong> - More intuitive than hex with alpha</li>
<li><strong>Establish a color system early</strong> - Define primary, secondary, and semantic colors</li>
<li><strong>Test color contrast ratios</strong> - Ensure accessibility compliance (WCAG AA/AAA)</li>
<li><strong>Use currentColor for consistency</strong> - Maintain color harmony across components</li>
<li><strong>Consider color blindness</strong> - Test with simulators and provide alternatives</li>
<li><strong>Use CSS variables for maintainability</strong> - Centralize color definitions</li>
<li><strong>Provide dark mode support</strong> - Use prefers-color-scheme media query</li>
</ul>
</div>
<!-- Browser Support -->
<div class="browser-support">
<div class="browser-item">
<div class="browser-icon">🌐</div>
<div>Chrome</div>
<div style="color: #2ecc71; font-weight: bold;">Excellent</div>
</div>
<div class="browser-item">
<div class="browser-icon">🌐</div>
<div>Firefox</div>
<div style="color: #2ecc71; font-weight: bold;">Excellent</div>
</div>
<div class="browser-item">
<div class="browser-icon">🌐</div>
<div>Safari</div>
<div style="color: #2ecc71; font-weight: bold;">Excellent</div>
</div>
<div class="browser-item">
<div class="browser-icon">🌐</div>
<div>Edge</div>
<div style="color: #2ecc71; font-weight: bold;">Excellent</div>
</div>
</div>
</div>
</body>
</html>Practical Applications & Patterns
🎯 Production Use Cases
- Design systems with consistent color palettes
- Dark/light mode theming with CSS variables
- Accessible interfaces with proper contrast ratios
- Modern UI effects with gradients and transparency
- Dynamic theming with HSL color manipulation
- Brand consistency across applications
🔧 Development Workflow
- Establish a color system with CSS variables
- Use HSL for dynamic theming capabilities
- Implement proper color contrast checking
- Add dark mode support with media queries
- Test across different devices and browsers
- Document your color system for team consistency
💡 Pro Tips for Color Mastery
Accessibility & Performance:
- Always test color contrast ratios (WCAG AA/AAA)
- Use system colors for native theme integration
- Optimize gradient performance on mobile devices
- Provide fallbacks for modern color features
Best Practices:
- Use semantic color names in your design system
- Establish a consistent color hierarchy
- Consider color blindness in your palette choices
- Use currentColor for maintainable component styling
Master CSS Colors Today! 🚀
Start exploring CSS colors with real-world examples and practical demos. Build your CSS skills with comprehensive reference materials and production-ready color systems.