Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Hex Colors</title> <style> .grid { display: flex; flex-wrap: wrap; gap: 8px; } .chip { width: 100px; height: 60px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-family: monospace; } </style> </head> <body> <h1>Hex Color Examples</h1> <div class="grid"> <div class="chip" style="background:#e74c3c;color:white">#e74c3c</div> <div class="chip" style="background:#3498db;color:white">#3498db</div> <div class="chip" style="background:#2ecc71;color:white">#2ecc71</div> <div class="chip" style="background:#f39c12">#f39c12</div> <div class="chip" style="background:#9b59b6;color:white">#9b59b6</div> <!-- Shorthand --> <div class="chip" style="background:#f60;color:white">#f60</div> <!-- With alpha --> <div class="chip" style="background:#3498db80;border:1px solid #3498db">#3498db80</div> </div> </body> </html>
Result
Open