Apply colors and opacity

Color utilities combine a property, color name, and shade:

<p class="border-blue-200 bg-blue-50 text-blue-950">Saved</p>

The prefixes target different CSS properties: text-*, bg-*, border-*, fill-*, and stroke-*. Reusing the same shade number across them does not guarantee the same visual importance because area, neighboring colors, and display conditions change perception.

Slash modifiers add alpha to that color:

<div class="bg-black/50 text-white">Overlay label</div>

This makes the background color translucent while leaving the text opaque. opacity-50 would reduce the opacity of the entire element, including its children, and can destroy text contrast.

Contrast must be checked against the composited background. text-white over bg-blue-600/70 can land on different page colors. Test normal, hover, focus, disabled, selected, and dark states—not just the default screenshot.

Color should not be the only signal. Pair error red with text or an icon, selected color with shape or label, and focus color with a visible outline. Check forced-colors and high-contrast modes when the interface is critical.

Raw palette utilities are useful while exploring. When a color represents a stable semantic role across many components, define a project theme token such as brand, surface, or danger. That makes a redesign a token decision rather than a search for every blue-600.

Use browser contrast tooling, but inspect the actual rendered state and text size. Transparency, gradients, images, and antialiasing can make a nominal ratio misleading.

Your action is to create success and error messages with text, border, and background colors. Test both over two parent backgrounds, remove color in DevTools, and confirm that the meaning remains available.