<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="UTF-8">
    <title>Palette de Rouges</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        summary {
            font-size: 18px;
            font-weight: bold;
            margin-top: 10px;
        }
        details {
            margin-bottom: 10px;
        }
        ul {
            list-style-type: none;
            padding-left: 0;
        }
        li {
            margin-bottom: 5px;
        }
        .color-box {
            width: 50px;
            height: 25px;
            display: inline-block;
            margin-left: 10px;
            border: 1px solid #000;
            vertical-align: middle;
        }
    </style>
    <script>
        function showColor(colorCode, elementId) {
            const colorBox = document.getElementById(elementId);
            colorBox.style.backgroundColor = colorCode;
        }
    </script>
</head>
<body>

<h1>Rouge</h1>

<details>
    <summary>Classique</summary>
    <ul>
        <li><strong>Cramoisi</strong> (#DC143C) : Un rouge vif avec des touches légèrement foncées. <div id="color1" class="color-box"></div> <button onclick="showColor('#DC143C', 'color1')">Voir</button></li>
        <li><strong>Vermillon</strong> (#E34234) : Un rouge brillant et éclatant. <div id="color2" class="color-box"></div> <button onclick="showColor('#E34234', 'color2')">Voir</button></li>
        <li><strong>Bordeaux</strong> (#800020) : Un rouge profond avec des nuances de violet. <div id="color3" class="color-box"></div> <button onclick="showColor('#800020', 'color3')">Voir</button></li>
        <li><strong>Écarlate</strong> (#FF2400) : Un rouge brillant et intense. <div id="color4" class="color-box"></div> <button onclick="showColor('#FF2400', 'color4')">Voir</button></li>
        <li><strong>Carmin</strong> (#960018) : Un rouge sombre qui évoque les pigments naturels. <div id="color5" class="color-box"></div> <button onclick="showColor('#960018', 'color5')">Voir</button></li>
        <li><strong>Grenat</strong> (#7B1A1A) : Un rouge foncé, souvent associé aux pierres précieuses. <div id="color6" class="color-box"></div> <button onclick="showColor('#7B1A1A', 'color6')">Voir</button></li>
        <li><strong>Rubis</strong> (#9B111E) : Un rouge vif rappelant les pierres précieuses. <div id="color7" class="color-box"></div> <button onclick="showColor('#9B111E', 'color7')">Voir</button></li>
        <li><strong>Tomate</strong> (#FF6347) : Une teinte rouge-orangée. <div id="color8" class="color-box"></div> <button onclick="showColor('#FF6347', 'color8')">Voir</button></li>
        <li><strong>Sang</strong> (#8A0707) : Une nuance rouge très foncée. <div id="color9" class="color-box"></div> <button onclick="showColor('#8A0707', 'color9')">Voir</button></li>
        <li><strong>Brique</strong> (#B22222) : Un rouge foncé avec une légère touche de brun. <div id="color10" class="color-box"></div> <button onclick="showColor('#B22222', 'color10')">Voir</button></li>
        <li><strong>Amarante</strong> (#E52B50) : Un rouge vif avec des nuances rosées. <div id="color11" class="color-box"></div> <button onclick="showColor('#E52B50', 'color11')">Voir</button></li>
        <li><strong>Rouge Coquelicot</strong> (#FF3F34) : Un rouge vif et brillant. <div id="color12" class="color-box"></div> <button onclick="showColor('#FF3F34', 'color12')">Voir</button></li>
        <li><strong>Rouge Rubicond</strong> (#960018) : Un rouge éclatant légèrement plus foncé. <div id="color13" class="color-box"></div> <button onclick="showColor('#960018', 'color13')">Voir</button></li>
        <li><strong>Rouge Groseille</strong> (#BB0B0B) : Un rouge lumineux et acidulé. <div id="color14" class="color-box"></div> <button onclick="showColor('#BB0B0B', 'color14')">Voir</button></li>
        <li><strong>Rouge Cardinal</strong> (#C41E3A) : Un rouge profond et vibrant. <div id="color15" class="color-box"></div> <button onclick="showColor('#C41E3A', 'color15')">Voir</button></li>
        <li><strong>Rouge Feu</strong> (#FF4500) : Un rouge-orangé vif. <div id="color16" class="color-box"></div> <button onclick="showColor('#FF4500', 'color16')">Voir</button></li>
        <li><strong>Rouge Terre</strong> (#8B0000) : Un rouge foncé avec des nuances de brun. <div id="color17" class="color-box"></div> <button onclick="showColor('#8B0000', 'color17')">Voir</button></li>
        <li><strong>Rouge Sépia</strong> (#9E2A2B) : Un rouge teinté de brun. <div id="color18" class="color-box"></div> <button onclick="showColor('#9E2A2B', 'color18')">Voir</button></li>
        <li><strong>Rouge Poussiéreux</strong> (#CD5C5C) : Un rouge atténué et terne. <div id="color19" class="color-box"></div> <button onclick="showColor('#CD5C5C', 'color19')">Voir</button></li>
        <li><strong>Rouge Antique</strong> (#A52A2A) : Un rouge brunâtre et foncé. <div id="color20" class="color-box"></div> <button onclick="showColor('#A52A2A', 'color20')">Voir</button></li>
    </ul>
</details>

<details>
    <summary>Vintage</summary>
    <ul>
        <li><strong>Rouge Brique Vintage</strong> (#A52A2A) : Un rouge foncé inspiré des briques anciennes. <div id="color21" class="color-box"></div> <button onclick="showColor('#A52A2A', 'color21')">Voir</button></li>
        <li><strong>Rouge Terre Vintage</strong> (#B84A39) : Un rouge avec des nuances de brun. <div id="color22" class="color-box"></div> <button onclick="showColor('#B84A39', 'color22')">Voir</button></li>
        <li><strong>Rouge Marron Vintage</strong> (#7E4A3B) : Un rouge sombre et légèrement brun. <div id="color23" class="color-box"></div> <button onclick="showColor('#7E4A3B', 'color23')">Voir</button></li>
        <li><strong>Rouge Sépia Vintage</strong> (#9E2A2B) : Un rouge atténué avec des nuances sépia. <div id="color24" class="color-box"></div> <button onclick="showColor('#9E2A2B', 'color24')">Voir</button></li>
        <li><strong>Rouge Sombre Vintage</strong> (#8B0000) : Un rouge profond et foncé. <div id="color25" class="color-box"></div> <button onclick="showColor('#8B0000', 'color25')">Voir</button></li>
        <li><strong>Rouge Rouille Vintage</strong> (#B22222) : Un rouge qui tire sur le brun, rappelant la rouille. <div id="color26" class="color-box"></div> <button onclick="showColor('#B22222', 'color26')">Voir</button></li>
        <li><strong>Rouge Poussiéreux Vintage</strong> (#CD5C5C) : Un rouge légèrement fané et poussiéreux. <div id="color27" class="color-box"></div> <button onclick="showColor('#CD5C5C', 'color27')">Voir</button></li>
        <li><strong>Rouge Sang Vintage</strong> (#BC3F38) : Un rouge foncé et profond. <div id="color28" class="color-box"></div> <button onclick="showColor('#BC3F38', 'color28')">Voir</button></li>
    </ul>
</details>

<details>
    <summary>Historique</summary>
    <ul>
        <li><strong>Cramoisi</strong> (#DC143C) : Rouge vif et puissant. <div id="color29" class="color-box"></div> <button onclick="showColor('#DC143C', 'color29')">Voir</button></li>
        <li><strong>Écarlate</strong> (#FF2400) : Un rouge flamboyant et vibrant. <div id="color30" class="color-box"></div> <button onclick="showColor('#FF2400', 'color30')">Voir</button></li>
        <li><strong>Amarante</strong> (#E52B50) : Une teinte florale. <div id="color31" class="color-box"></div> <button onclick="showColor('#E52B50', 'color31')">Voir</button></li>
        <li><strong>Rouge Cardinal</strong> (#C41E3A) : Une couleur associée à l'Église catholique. <div id="color32" class="color-box"></div> <button onclick="showColor('#C41E3A', 'color32')">Voir</button></li>
        <li><strong>Rouge Groseille</strong> (#BB0B0B) : Un rouge brillant et légèrement acide. <div id="color33" class="color-box"></div> <button onclick="showColor('#BB0B0B', 'color33')">Voir</button></li>
        <li><strong>Rouge Rubis</strong> (#9B111E) : Utilisé historiquement pour symboliser la royauté. <div id="color34" class="color-box"></div> <button onclick="showColor('#9B111E', 'color34')">Voir</button></li>
        <li><strong>Rouge Grenat</strong> (#941515) : Un rouge profond et riche. <div id="color35" class="color-box"></div> <button onclick="showColor('#941515', 'color35')">Voir</button></li>
        <li><strong>Rouge Sang</strong> (#8A0707) : Couleur associée aux batailles. <div id="color36" class="color-box"></div> <button onclick="showColor('#8A0707', 'color36')">Voir</button></li>
    </ul>
</details>

<details>
    <summary>Manga</summary>
    <ul>
        <li><strong>Rouge Sakura</strong> (#FF4D4D) : Un rouge vif inspiré des fleurs de cerisier. <div id="color37" class="color-box"></div> <button onclick="showColor('#FF4D4D', 'color37')">Voir</button></li>
        <li><strong>Rouge Kirsch</strong> (#FF3333) : Un rouge intense et brillant. <div id="color38" class="color-box"></div> <button onclick="showColor('#FF3333', 'color38')">Voir</button></li>
        <li><strong>Rouge Cerise</strong> (#E60000) : Un rouge vif et gourmand. <div id="color39" class="color-box"></div> <button onclick="showColor('#E60000', 'color39')">Voir</button></li>
        <li><strong>Rouge Vin</strong> (#990000) : Une teinte sombre et riche. <div id="color40" class="color-box"></div> <button onclick="showColor('#990000', 'color40')">Voir</button></li>
        <li><strong>Rouge Pâle</strong> (#FFA8A8) : Un rouge atténué. <div id="color41" class="color-box"></div> <button onclick="showColor('#FFA8A8', 'color41')">Voir</button></li>
        <li><strong>Rouge Pastel</strong> (#FFD1D1) : Un rouge très doux. <div id="color42" class="color-box"></div> <button onclick="showColor('#FFD1D1', 'color42')">Voir</button></li>
        <li><strong>Rouge Néon</strong> (#FF0033) : Un rouge éclatant et vif. <div id="color43" class="color-box"></div> <button onclick="showColor('#FF0033', 'color43')">Voir</button></li>
        <li><strong>Rouge Carmin Manga</strong> (#960018) : Une teinte sombre et veloutée. <div id="color44" class="color-box"></div> <button onclick="showColor('#960018', 'color44')">Voir</button></li>
        <li><strong>Rouge Feu</strong> (#FF4500) : Symbolise la puissance ou la rage. <div id="color45" class="color-box"></div> <button onclick="showColor('#FF4500', 'color45')">Voir</button></li>
        <li><strong>Rouge Tomate Manga</strong> (#FF6347) : Teinte plus claire. <div id="color46" class="color-box"></div> <button onclick="showColor('#FF6347', 'color46')">Voir</button></li>
        <li><strong>Rouge Sombre</strong> (#8B0000) : Une couleur sombre pour moments de suspense. <div id="color47" class="color-box"></div> <button onclick="showColor('#8B0000', 'color47')">Voir</button></li>
        <li><strong>Rouge Grenat</strong> (#7B1A1A) : Utilisé pour les tenues formelles. <div id="color48" class="color-box"></div> <button onclick="showColor('#7B1A1A', 'color48')">Voir</button></li>
        <li><strong>Rouge Passion</strong> (#FF2400) : Utilisé pour les scènes amoureuses. <div id="color49" class="color-box"></div> <button onclick="showColor('#FF2400', 'color49')">Voir</button></li>
        <li><strong>Rouge Écarlate</strong> (#FF2400) : Pour les scènes d’action. <div id="color50" class="color-box"></div> <button onclick="showColor('#FF2400', 'color50')">Voir</button></li>
        <li><strong>Rouge Vif</strong> (#FF0000) : Utilisé dans les moments critiques. <div id="color51" class="color-box"></div> <button onclick="showColor('#FF0000', 'color51')">Voir</button></li>
        <li><strong>Rouge Amarante Manga</strong> (#E52B50) : Couleur élégante. <div id="color52" class="color-box"></div> <button onclick="showColor('#E52B50', 'color52')">Voir</button></li>
        <li><strong>Rouge Groseille Manga</strong> (#BB0B0B) : Ton acidulé. <div id="color53" class="color-box"></div> <button onclick="showColor('#BB0B0B', 'color53')">Voir</button></li>
        <li><strong>Rouge Sang Manga</strong> (#8A0707) : Pour les scènes dramatiques. <div id="color54" class="color-box"></div> <button onclick="showColor('#8A0707', 'color54')">Voir</button></li>
        <li><strong>Rouge Antique Manga</strong> (#A52A2A) : Teinte associée aux personnages traditionnels. <div id="color55" class="color-box"></div> <button onclick="showColor('#A52A2A', 'color55')">Voir</button></li>
        <li><strong>Rouge Romantique Manga</strong> (#FF3F34) : Utilisé pour exprimer l’amour. <div id="color56" class="color-box"></div> <button onclick="showColor('#FF3F34', 'color56')">Voir</button></li>
    </ul>
</details>

<details>
    <summary>Pastel</summary>
    <ul>
        <li><strong>Rouge Pâle</strong> (#FFA8A8) : Un rouge clair, adouci. <div id="color57" class="color-box"></div> <button onclick="showColor('#FFA8A8', 'color57')">Voir</button></li>
        <li><strong>Rouge Pastel</strong> (#FFD1D1) : Une nuance très douce. <div id="color58" class="color-box"></div> <button onclick="showColor('#FFD1D1', 'color58')">Voir</button></li>
        <li><strong>Rouge Doux</strong> (#FFB3B3) : Un rouge léger. <div id="color59" class="color-box"></div> <button onclick="showColor('#FFB3B3', 'color59')">Voir</button></li>
        <li><strong>Rose Corail</strong> (#FF7F7F) : Un mélange doux entre le rouge et le rose. <div id="color60" class="color-box"></div> <button onclick="showColor('#FF7F7F', 'color60')">Voir</button></li>
        <li><strong>Rose Pastel</strong> (#FF9999) : Une nuance légère de rose. <div id="color61" class="color-box"></div> <button onclick="showColor('#FF9999', 'color61')">Voir</button></li>
        <li><strong>Rouge Rosé</strong> (#FFCCCC) : Un rouge très clair. <div id="color62" class="color-box"></div> <button onclick="showColor('#FFCCCC', 'color62')">Voir</button></li>
        <li><strong>Rouge Légèrement Pâle</strong> (#FFC0CB) : Proche du rose. <div id="color63" class="color-box"></div> <button onclick="showColor('#FFC0CB', 'color63')">Voir</button></li>
        <li><strong>Rose Clair</strong> (#FFCBCB) : Une teinte douce et pastel. <div id="color64" class="color-box"></div> <button onclick="showColor('#FFCBCB', 'color64')">Voir</button></li>
    </ul>
</details>

<details>
    <summary>Jeux Vidéo</summary>
    <ul>
        <li><strong>Rouge Pixel</strong> (#FF1A1A) : Un rouge vif et net. <div id="color65" class="color-box"></div> <button onclick="showColor('#FF1A1A', 'color65')">Voir</button></li>
        <li><strong>Rouge Sanguin</strong> (#990000) : Un rouge sombre. <div id="color66" class="color-box"></div> <button onclick="showColor('#990000', 'color66')">Voir</button></li>
        <li><strong>Rouge Laser</strong> (#FF4D4D) : Un rouge éclatant. <div id="color67" class="color-box"></div> <button onclick="showColor('#FF4D4D', 'color67')">Voir</button></li>
        <li><strong>Rouge Néon</strong> (#FF0033) : Un rouge lumineux. <div id="color68" class="color-box"></div> <button onclick="showColor('#FF0033', 'color68')">Voir</button></li>
        <li><strong>Rouge Magma</strong> (#B22222) : Utilisé pour représenter la lave. <div id="color69" class="color-box"></div> <button onclick="showColor('#B22222', 'color69')">Voir</button></li>
        <li><strong>Rouge Explosion</strong> (#FF5733) : Un rouge-orangé symbolisant les explosions. <div id="color70" class="color-box"></div> <button onclick="showColor('#FF5733', 'color70')">Voir</button></li>
        <li><strong>Rouge Santé</strong> (#FF6666) : Teinte pour représenter la barre de vie. <div id="color71" class="color-box"></div> <button onclick="showColor('#FF6666', 'color71')">Voir</button></li>
        <li><strong>Rouge Feu</strong> (#FF4500) : Utilisé pour des effets d’action rapide. <div id="color72" class="color-box"></div> <button onclick="showColor('#FF4500', 'color72')">Voir</button></li>
    </ul>
</details>

<details>
    <summary>Militaire</summary>
    <ul>
        <li><strong>Rouge Militaire Foncé</strong> (#7A1F1F) : Un rouge profond pour les uniformes. <div id="color73" class="color-box"></div> <button onclick="showColor('#7A1F1F', 'color73')">Voir</button></li>
        <li><strong>Rouge Rouille Militaire</strong> (#8B3E2F) : Une couleur usée rappelant les vieux équipements militaires. <div id="color74" class="color-box"></div> <button onclick="showColor('#8B3E2F', 'color74')">Voir</button></li>
        <li><strong>Rouge Brique Militaire</strong> (#A52A2A) : Teinte évoquant la robustesse militaire. <div id="color75" class="color-box"></div> <button onclick="showColor('#A52A2A', 'color75')">Voir</button></li>
        <li><strong>Rouge Sombre Militaire</strong> (#661919) : Un rouge foncé pour les équipements de terrain. <div id="color76" class="color-box"></div> <button onclick="showColor('#661919', 'color76')">Voir</button></li>
        <li><strong>Rouge Terre Militaire</strong> (#8A3324) : Un rouge terreux pour le camouflage. <div id="color77" class="color-box"></div> <button onclick="showColor('#8A3324', 'color77')">Voir</button></li>
        <li><strong>Rouge Marron Militaire</strong> (#5C2C1D) : Un rouge très sombre, presque brun. <div id="color78" class="color-box"></div> <button onclick="showColor('#5C2C1D', 'color78')">Voir</button></li>
        <li><strong>Rouge Oxydé Militaire</strong> (#964B00) : Une teinte rouge-brun rappelant la rouille. <div id="color79" class="color-box"></div> <button onclick="showColor('#964B00', 'color79')">Voir</button></li>
        <li><strong>Rouge Sang Militaire</strong> (#7C0A02) : Un rouge foncé évoquant la bataille. <div id="color80" class="color-box"></div> <button onclick="showColor('#7C0A02', 'color80')">Voir</button></li>
    </ul>
</details>

<details>
    <summary>Fluo</summary>
    <ul>
        <li><strong>Rouge Néon</strong> (#FF0033) : Un rouge très lumineux et éclatant. <div id="color81" class="color-box"></div> <button onclick="showColor('#FF0033', 'color81')">Voir</button></li>
        <li><strong>Rouge Fluo Clair</strong> (#FF3366) : Un rouge avec des nuances rosées. <div id="color82" class="color-box"></div> <button onclick="showColor('#FF3366', 'color82')">Voir</button></li>
        <li><strong>Rouge Fluo Intense</strong> (#FF1A1A) : Un rouge profond et brillant. <div id="color83" class="color-box"></div> <button onclick="showColor('#FF1A1A', 'color83')">Voir</button></li>
        <li><strong>Rouge Fluo Électrique</strong> (#FF2400) : Un rouge vibrant. <div id="color84" class="color-box"></div> <button onclick="showColor('#FF2400', 'color84')">Voir</button></li>
        <li><strong>Rouge Fluo Brillant</strong> (#FF5E57) : Un rouge vif. <div id="color85" class="color-box"></div> <button onclick="showColor('#FF5E57', 'color85')">Voir</button></li>
        <li><strong>Rouge Fluo Profond</strong> (#FF2200) : Un rouge riche et saturé. <div id="color86" class="color-box"></div> <button onclick="showColor('#FF2200', 'color86')">Voir</button></li>
        <li><strong>Rouge Fluo Rose</strong> (#FF3366) : Une teinte entre le rouge et le rose. <div id="color87" class="color-box"></div> <button onclick="showColor('#FF3366', 'color87')">Voir</button></li>
        <li><strong>Rouge Fluo Pâle</strong> (#FF6666) : Une teinte plus douce. <div id="color88" class="color-box"></div> <button onclick="showColor('#FF6666', 'color88')">Voir</button></li>
    </ul>
</details>

</body>
</html>