Shade
Embed This Widget
Add the script tag and a data attribute to embed this widget.
Embed via iframe for maximum compatibility.
<iframe src="https://colorfyi.com/iframe/glossary/shade/" width="420" height="400" frameborder="0" style="border:0;border-radius:10px;max-width:100%" loading="lazy"></iframe>Paste this URL in WordPress, Medium, or any oEmbed-compatible platform.
https://colorfyi.com/glossary/shade/Add a dynamic SVG badge to your README or docs.
[](https://colorfyi.com/glossary/shade/)Use the native HTML custom element.
A color produced by adding black to a pure hue, making it darker.
Shades are darker variations of a base color. For example, adding black to blue produces navy, which is a shade of blue. Shades preserve the original hue but increase depth and intensity. In web design, shades work well for text, borders, and emphasis elements. Tailwind CSS shade scales from 600 to 950 typically represent shades of the base color. Shades convey richness, stability, and seriousness in design contexts.
Try It Out
Related Articles
CSS color-mix(): Blend Colors Natively in the Browser
Learn CSS color-mix() to blend colors natively in the browser. Master syntax, color spaces, practical use cases, and create dynamic palettes without JavaScript.
Perceptual Color Spaces: Lab, LCH, Oklab, OKLCH
Explore perceptually uniform color spaces — CIE Lab, LCH, Oklab, and OKLCH. Learn how each was designed, where it excels, and which to use for CSS and design work.
Multi-Brand Color Architecture: One Codebase, Many Themes
Build multi-brand color architecture with CSS custom properties and design tokens. Support white-label theming from a single codebase with Tailwind integration.
Color for Data Storytelling: Beyond Default Chart Colors
Go beyond default chart colors for data storytelling. Learn sequential, diverging, and categorical palettes, accessibility in dataviz, and D3/Chart.js color scales.
Emerald vs Jade vs Forest Green: Green Comparison Guide
Compare emerald (#50C878), jade (#00A86B), and forest green (#228B22). Learn the visual and hex code differences between these popular green shades.
CSS light-dark() Function: Native Theme Switching
Use CSS light-dark() for native theme switching. Replace JavaScript toggles and media queries with a single CSS function for light and dark mode colors.