Learn web color formats, gradients, glow effects, color theory, UI palettes, accessibility, and performance with plain-English explanations and practical tips.
Read practical explanations of color formats, gradients, glow systems, color theory, relationships, UI palettes, brand colors, and rendering performance.
Use these reference explanations and tips alongside the interactive swatches and previews. Check contrast and performance before bringing a color treatment into your project.
Color Formats
The most common color format on the web. Six characters after a # sign — two for red, two for green, two for blue. Shorthand (3 chars) works when both digits are the same (e.g., #fff = #ffffff).
Use 8-digit HEX (#RRGGBBAA) when you want one-line transparency without rgba(). Not supported in IE11, but all modern browsers handle it fine.
Color Formats
Red, Green, Blue — three channels, each from 0 to 255. Mixing all three at 255 gives white; all at 0 gives black. Great when you need to tweak channels mathematically.
RGB channels can be defined as CSS variables so you can build dynamic rgba() colors from a single palette definition — especially useful for theming.
Color Formats
RGB plus a fourth value (alpha) that controls opacity. Alpha 0 = invisible, 1 = fully opaque, 0.5 = 50% see-through. Essential for glassmorphism, overlays, and layered effects.
For very subtle tints (e.g., surface backgrounds), use alpha values below 0.08. This keeps the color transparent enough to feel like glass but adds just enough color for depth.
Color Formats
Hue (0–360°), Saturation (0–100%), Lightness (0–100%). Much more intuitive than RGB for designers — just rotate the hue to get a new color, and adjust lightness to get tints/shades.
Use HSL for building design tokens. Keeping the hue constant and varying lightness creates a perfect monochromatic palette with mathematically consistent tones.
Color Formats
HSL plus alpha transparency. The best format for glow effects, overlays, and dynamic theming because you can intuitively control color AND transparency together.
When writing glow box-shadows, HSLA beats RGBA because you can write all four layers with the same hue/saturation and just vary the lightness and alpha — making the layers read as a family.
Gradient System
Colors that flow in a straight line from one point to another. The default direction is top-to-bottom (180°). You control start color, end color, and angle.
135° diagonal gradients feel natural to the eye because they mimic the direction of light in most photography. Use it as your default angle for button and card backgrounds.
Gradient System
Gradients at an angle create energy and direction in your layouts. Any angle from 0° to 360° is valid — the angle describes the direction the gradient flows toward.
Keep background gradients subtle — dark to slightly-less-dark. High-contrast background gradients look amateur. Reserve vivid gradients for buttons, accents, and decorative elements.
Gradient System
Colors radiate outward from a center point, like a light source shining in a room. Perfect for glowing backgrounds, spotlight effects, and cinematic atmosphere.
Use radial-gradient as a separate layer stacked on top of your base background color. This lets you stack multiple radial orbs to build rich cinematic scenes with just CSS.
Gradient System
Moving the radial center to a corner or edge creates a dramatic scene light — as if a lamp or window is just off-screen. Used for hero sections and atmospheric backgrounds.
Stack 2–3 offset radials with different colors and opacity levels to create a scene that feels lit from multiple sources — a cinematic technique used in premium SaaS websites.
Gradient System
Colors rotate around a center point like a color wheel or pie chart. Less commonly used for backgrounds, but perfect for loading spinners, pie charts, and color wheel visuals.
Pair conic-gradient with border-radius: 50% and a radial-gradient mask to create a perfectly styled ring/donut spinner in pure CSS — no SVG or JavaScript needed.
Gradient System
Gradients can have as many color stops as you need, each at a specific position (percentage or pixel). Hard stops (no transition) create stripes. Soft stops blend naturally.
Use a 3-stop gradient that starts and ends with the same color (dark → color → dark) to create a glowing centerline effect on dividers, borders, and section separators.
Gradient System
A gradient that fades from a color to transparent. Used for image overlays, text readability on backgrounds, and fading content in/out at page edges.
The mask-image + linear-gradient pattern is the cleanest way to fade content out at the bottom of a container — no extra overlay divs needed.
Glow System
Box-shadow creates the illusion of glowing by projecting a soft, blurred color around an element. The more spread and blur, the softer the glow. Stack multiple shadows for depth.
Always add a matching border color when using box glow. A border at 30–50% opacity anchors the glow visually — without it, the glow appears to float disconnected from the element.
Glow System
Glow intensity is controlled by the alpha (opacity) of the color in your box-shadow. Low alpha = subtle ambient. High alpha = intense neon. The blur radius amplifies the effect.
For interactive elements, animate from 0.2 to 0.6 alpha on hover rather than from 0 to 1. This creates a 'brightening' feel rather than a 'switching on' feel — much more cinematic.
Glow System
The blur radius in box-shadow controls how far the glow spreads. Small radius = sharp, tight glow (neon sign effect). Large radius = wide, soft atmospheric halo.
The sweet spot for most UI elements is 2 layers: a tight (5–15px) core layer at high alpha, and a wide (50–100px) atmospheric layer at low alpha. This reads as 'glowing' not 'blurry'.
Glow System
Outer glow radiates outside the element boundary. This is what CSS box-shadow does by default — the glow extends outward. Used to make elements appear to emit light.
Add a matching border (at 40–60% alpha) alongside outer glow. It creates a defined edge that separates the element from the glow bloom — making the effect look intentional, not accidental.
Glow System
Inner glow sits inside the element, creating the effect of light coming from within. Use the 'inset' keyword in box-shadow. Great for pressed states, active inputs, and highlight rims.
Use inset glow on form inputs at focus state — it's more refined than outline and feels more premium. Pair it with a 1px inset border shadow for a crisp lit-edge effect.
Glow System
Ambient glow is wide, soft, and subtle — it fills the space around an element like the warm air around a candle. Used for section backgrounds and to add depth without calling attention to itself.
The ::after pseudo-element floor glow is a pro trick — it makes cards appear to float and cast light downward, adding a 3D dimension that's nearly impossible to fake with flat shadows.
Glow System
Neon glow simulates real neon tube signs — a bright, tight core with a wide halo. The key is a very light (near-white) element color with a vivid saturated glow around it.
Real neon tube signs have a light-colored tube with a vivid halo — replicate this by using a near-white or very light version of your accent color for the element itself, not the shadow.
Glow System
Stack 3–4 box-shadow layers: tight core (neon edge) → medium spread (core glow) → wide spread (outer bloom) → ultra-wide (ambient halo). Each layer serves a distinct role.
The 4-layer system reads as physically plausible because it mimics how real light works: bright near the source, then rapidly dimming with distance. Your eye interprets it as genuine luminosity.
Color Theory
Hue is the color family (red, blue, purple, etc.), measured in degrees on a color wheel. Saturation is how vivid vs. grey it appears. Lightness is how light or dark — 0% is black, 100% is white, 50% is the pure color.
Understand saturation as 'how much color' and lightness as 'how much light'. A saturated dark color is rich; a desaturated light color is pastel. Most professional dark themes use saturation between 15–30% for UI grays.
Color Theory
On screens (additive color), primary colors are Red, Green, and Blue (RGB). Combining them at full strength makes white. Secondary colors are formed by mixing two primaries: Cyan (G+B), Magenta (R+B), Yellow (R+G).
On dark UI sites, pure primaries are too intense for background use. Shift your accent colors to lower saturation and lightness (e.g., #8b5cf6 instead of pure #0000ff) for a professional look.
Color Theory
The accent color is the 'pop' color that draws the eye to calls-to-action, links, highlights, and interactive elements. Keep it rare — if everything is accented, nothing stands out.
A good rule: your accent color should appear on no more than 5–10% of your visible UI at any given time. Too much accent = no focal point. Too little = the design feels dead.
Color Theory
Warm colors (reds, oranges, yellows, and warm purples) feel energetic, exciting, and close. They advance visually — appearing nearer to the viewer. Use them for urgency, excitement, and energy.
Luxury design uses warm gold as the secondary accent rather than orange or red — gold reads as 'premium' while orange reads as 'discount'. Know what your warm hue communicates emotionally.
Color Theory
Cool colors (blues, greens, cyans, and cool purples) feel calm, trustworthy, and receding. They appear farther away visually. Used heavily in tech and SaaS for a professional, dependable impression.
Purple sits at the boundary of warm (red-purple) and cool (blue-purple). Creator Glow Lab uses a blue-leaning purple (#8b5cf6) — it reads as tech-forward and modern, not 'hot' like red-purple.
Color Theory
Neutrals are unsaturated colors (greys, off-whites, near-blacks) that provide breathing room and context for your accent and brand colors. 90% of a dark UI is neutral — the accent is just the punctuation.
Use Tailwind's Zinc scale for your dark UI neutrals — it has a very slight blue-purple undertone that pairs beautifully with purple/violet accent colors without feeling warm or muddy.
Color Relationships
Analogous colors sit next to each other on the color wheel. They feel harmonious and naturally blended — like purple, violet, and blue-purple. Use for gradients, multi-tone effects, and cohesive palettes.
Analogous gradients (3–4 adjacent hues, each 15–30° apart) are the most reliable way to create a vivid multi-color gradient that still reads as a unified design, not a rainbow.
Color Relationships
Complementary colors sit directly opposite each other on the color wheel. Purple and gold are complements — they create strong contrast and visual tension that draws the eye. The Creator Glow Lab palette is built on this pairing.
When using complementary colors together, avoid giving them equal visual weight. Let one dominate (80%) and use the other as a sparring partner (20%). Equal weight creates visual chaos — dominance creates hierarchy.
Color Relationships
One hue, varying only in lightness. Creates the most cohesive, professional look possible. This is how design systems generate entire palettes from a single brand color.
Build your interactive states (default, hover, active, disabled) entirely within a single monochromatic scale. This creates perfect visual consistency — the element clearly 'belongs' in your palette at every state.
Color Relationships
WCAG contrast ratio measures how different two colors look from each other. Normal text needs 4.5:1, large text needs 3:1. A ratio below these thresholds means some users cannot read your content.
Use the Chrome DevTools color picker — it shows the contrast ratio live as you pick colors. Or use Figma's built-in accessibility check. Never eyeball it; ratios below 3:1 are genuinely unreadable for many users.
Color Relationships
Three colors equally spaced on the color wheel (120° apart). Creates vibrant, balanced contrast. Harder to work with than complementary pairs, but very effective for data visualization and illustration.
Triadic palettes are great for dashboards and data viz where you need 3 distinctly different colors. In UI design, choose one as the dominant accent and use the others at very low saturation/opacity to avoid chaos.
UI Colors
The deepest, darkest layer — the canvas everything sits on. Should be almost-black but NOT pure black (#000) — pure black looks flat and synthetic. A slight blue, purple, or warm tint adds depth.
Test your background against #000 and #0a0a0f on your monitor. On OLED screens the difference is dramatic — #0a0a0f still looks very dark but feels intentional, while #000 looks like a hole.
UI Colors
The second layer above the background — used for sidebars, drawers, and content panels. Slightly lighter than the background, creating subtle depth.
Limit yourself to 3 depth layers: BG, Surface, and Elevated. More layers create confusion. Each layer gets its own background token and a matching border at 5–10% white opacity.
UI Colors
Cards float above the surface, containing grouped content. They're slightly lighter than the surface with a defined border and often a subtle shadow to separate them from the background.
Cards that use rgba() backgrounds instead of solid hex let background gradients and glows bleed through, creating a sense of depth and atmosphere. This is the core of the glassmorphism aesthetic.
UI Colors
Borders on dark UIs should be subtle — white at very low opacity. They define edges without calling attention to themselves. Accent-colored borders (purple, gold) create hierarchy and highlight interactive states.
Think of borders as a 5-level scale: whisper → default → visible → accent → active. Design your components to step up this scale on hover/focus/selected state for a natural, tactile feel.
UI Colors
Primary text should be near-white, not pure white. Pure white (#fff) on pure black looks harsh. A slight grey (#f4f4f5 or #e4e4e7) softens the contrast to a readable, premium level.
Never use pure white (#fff) for body text on dark backgrounds in production — it causes eye strain in dark environments. #f4f4f5 or #e4e4e7 is softer and still passes WCAG AA comfortably.
UI Colors
Status colors are semantic: green = success, yellow/amber = warning, red = error/destructive. On dark UIs, use them as muted tints (low opacity backgrounds) with vivid text — bright solid status backgrounds are overwhelming.
Keep status colors consistent throughout your entire app — if #22c55e means 'success' anywhere, it must mean 'success' everywhere. Never reuse a status color for decorative purposes.
Brand Colors
Creator Glow Lab's primary brand color. A medium-violet purple that reads as tech-forward, premium, and visually engaging. It sits between blue-purple and violet on the wheel.
When using the brand purple for glow effects, use --purple-100 (#c4b5fd) as the 'color' of the element and --purple-500 (#8b5cf6) as the shadow color. This mimics a real light source emitting its frequency.
Brand Colors
Creator Glow Lab's secondary brand color. A warm, slightly muted gold that reads as 'luxury' and 'premium' — not the harsh yellow of warning states, but the deep, confident warmth of precious metal.
The gold (#d4af37) is a slightly muted real-gold tone. If you need a more vivid gold for CTAs, use #f59e0b. If you need a more restrained luxury feel, use #b45309. Each reads differently emotionally.
Brand Colors
The full Creator Glow Lab color scene — deep-space black, vivid purple, luxury gold, and pure white. These four work together to create the 'cinematic creator' aesthetic.
Save all 8 cosmic tokens as CSS variables at the :root level. Reference only the variables in your component CSS — never hardcode a hex in a component. This way a future rebrand changes 8 lines, not 800.
Brand Colors
A deeper, darker purple palette for sections that should feel ultra-premium and mysterious — think high-ticket offers, exclusive membership tiers, and VIP access sections.
Reserve royal purple for your most exclusive tier or highest-price offer. Its darkness signals scarcity and exclusivity — use it for only one section per page or it loses its psychological power.
Brand Colors
A cool, vivid blue that signals technology, speed, and innovation. Pairs well with the CGL purple as a complementary cool accent — use for data, AI, and automation sections.
Cyan (#06b6d4) glow on a dark background has a distinctly 'AI' and 'holographic' connotation in modern design. Use it to visually signal digital, automated, or cutting-edge features.
Brand Colors
A warm, vivid rose/pink palette for emotional, feminine, or high-energy moments. Use for launch announcements, limited offers, and emotional storytelling sections where you need warmth and energy.
Rose glow creates urgency and excitement — more so than purple or gold. Use it exclusively for time-limited events, launches, or high-stakes calls-to-action where you need maximum emotional impact.
Brand Colors
Emerald green signals growth, success, prosperity, and nature. On a dark site, it works beautifully as a status/success accent or for creator niches in wellness, finance, and sustainability. It also pairs surprisingly well with CGL's gold.
Emerald and gold are a natural luxury pairing — think fine jewelry, premium financial brands, and high-end wellness. Use emerald for success/growth states and gold for premium/price-point moments in the same design.
Brand Colors
Any strong brand palette starts with one primary color and builds systematically outward. Choose a primary, derive a complementary secondary, add a neutral scale, and define your semantic states. That's a complete palette from one starting color.
The hue variable trick is powerful: set --primary-hue once and every scale derives from it automatically. Change 258 to 200 (blue) and your entire palette shifts to blue without touching another line.
Performance
CSS variables (custom properties) let you define colors once and use them everywhere. Changing one variable updates every element that references it — making theme changes instant. They also enable dark/light mode switching without JavaScript.
Store your brand RGB channels as variables (e.g., --brand: 139, 92, 246) so you can write rgba(var(--brand), 0.5) — this gives you full alpha control from a single source of truth.
Performance
currentColor is a CSS keyword that inherits the element's text color value for use in other properties. Use it for SVG fills, borders, and shadows that should automatically match the text color.
Use currentColor for all SVG icons in your UI — this means a single color change on the parent (for hover states, themes, etc.) automatically updates every icon inside, with zero extra code.
Performance
Users can set their OS to prefer dark or light mode. The prefers-color-scheme media query lets you serve different colors based on that preference — automatic dark/light switching without JavaScript.
Always declare color-scheme: dark on Creator Glow Lab pages — this tells the browser to use dark defaults for scrollbars, form inputs, and system UI, maintaining the aesthetic consistently throughout.
Performance
Colors that look perfect on desktop may be too subtle or too strong on mobile. Adjust glow intensity and contrast for smaller screens where elements are closer to the viewer's face.
Test your site's color contrast with the screen at full brightness AND at 50% brightness (common on mobile). Glows that look vivid on a bright desktop can become invisible on a dimmed phone screen.
Performance
When you animate box-shadow or opacity (common for glow animations), the browser re-paints every frame. will-change tells the browser to prepare ahead of time, making animations significantly smoother.
Use will-change sparingly — only on elements that ARE actively animating. Applying it to everything defeats the purpose and can actually slow pages down. Remove it after animations complete to free GPU memory.
Performance
Heavy glow effects, backdrop-filter blur, and large gradient backgrounds can slow page rendering — especially on mobile. Deferring them until the element enters the viewport keeps your Time to First Paint fast while still delivering the full cinematic experience when users scroll to it.
backdrop-filter: blur() is the most expensive CSS property on mobile — it triggers GPU compositing for every pixel behind the element. Reserve it for one or two hero elements and avoid it on long-scrolling card lists.
Performance
Some users have vestibular disorders or motion sensitivity and turn on 'Reduce Motion' in their OS settings. The prefers-reduced-motion media query lets you disable or tone down color animations for these users without removing the static glow effects they can still appreciate.
The best approach: keep static glows and color effects as-is (users can appreciate them), but disable all looping animations and large movement transitions. Users with motion sensitivity still get the full visual richness — minus the physical discomfort.