Toggle navigation
☰
HTML
CSS
Scripting
Database
<!DOCTYPE html> <title>Example</title> <style> .swatch-container { display: flex; gap: 16px; font-family: sans-serif; margin-top: 10px; } .color-chip { width: 60px; height: 60px; border-radius: 6px; border: 2px solid CanvasText; display: flex; align-items: center; justify-content: center; color: white; font-size: 12px; font-weight: bold; } /* Opts out of browser forced-color overrides */ .keep-color { forced-color-adjust: none; } .crimson { background-color: #dc2626; } .emerald { background-color: #059669; } .indigo { background-color: #4f46e5; } </style> <p>Color chips with <code>forced-color-adjust: none</code> to retain visibility in High Contrast / Forced Colors Mode:</p> <div class="swatch-container"> <div class="color-chip crimson keep-color">Red</div> <div class="color-chip emerald keep-color">Green</div> <div class="color-chip indigo">Blue</div> </div>
