Mustertext – Farbtestbereich

Dies ist ein reiner Mustertext, der ausschließlich dazu dient, die Farbgebung, den Kontrast und die Gesamtwirkung innerhalb eines vollständigen HTML‑Codes zu testen. Dieser Text hat keinen inhaltlichen Zweck und dient nur als Beispiel für Layout, Design und Stil‑Experimente.

Hier kannst du ausprobieren, wie sich Farben, Hintergründe, Schriftgrößen, Abstände und Container‑Designs verhalten. Dieser Bereich ist rein privat, unverbindlich und dient nur zum Testen deiner zukünftigen Webseiten‑Ideen.

🎨 Kurze Erklärung: Wie du die Farben in diesem Code selbst ändern kannst

In diesem HTML‑Code werden alle Farben direkt im Element selbst festgelegt. Das nennt man Inline‑CSS. Du kannst jede Farbe ändern, indem du einfach den Farbcode austauschst.

Die wichtigsten Stellen sind:

• background: Hintergrundfarbe
• color: Textfarbe
• border: Rahmenfarbe
• text-shadow: Schattenfarbe
• linear-gradient(...) Farbverläufe
• rgba(...) transparente Farben

Beispiel: Wenn du die Hintergrundfarbe ändern willst, suchst du im Code nach:

background:#f7e3e3;

und ersetzt sie durch eine andere Farbe, z. B.:

background:#fce1e1;

Farbverläufe kannst du ändern, indem du die einzelnen Farbcodes im linear-gradient() austauschst. Du kannst Farben hinzufügen, entfernen oder die Reihenfolge ändern.

Schattenfarben findest du in rgba(). Der letzte Wert bestimmt die Stärke der Transparenz (0.1 = sehr leicht, 1.0 = komplett deckend).

So kannst du jederzeit selbst bestimmen, wie dein Design aussehen soll.


<!-- ========================================================= -->
<!--   MUSTERTEXT-BEREICH – ROTE FARBPALETTE + ROTER RAHMEN     -->
<!-- ========================================================= -->

<div style="
background:#f8e5e5;
padding:35px;
border-radius:10px;
max-width:900px;
margin:auto;
font-family:'Fira Sans', sans-serif;
box-shadow:0 10px 25px rgba(0,0,0,0.35), inset 0 0 18px rgba(0,0,0,0.25);
border:6px solid transparent;
background-image:
    linear-gradient(#f8e5e5, #f8e5e5),
    linear-gradient(135deg, #8b0000, #b22222, #cd5c5c, #ff6b6b, #ff7f7f, #b22222);
background-origin:border-box;
background-clip:padding-box, border-box;
">

    <h1 style="
    font-size:36px;
    margin-bottom:25px;
    text-align:center;
    letter-spacing:2px;
    text-transform:uppercase;
    background:linear-gradient(145deg, #b22222, #cc3333, #ff4d4d, #ff6666, #cc3333, #8b0000);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    text-shadow:0 1px 2px rgba(0,0,0,0.7), 0 2px 4px rgba(0,0,0,0.5);
    ">
        Mustertext – Farbtestbereich
    </h1>

    <p style="font-size:16px; line-height:1.7; text-align:center; color:#4a0000;">
        Dies ist ein <strong style="color:#7a0000;">reiner Mustertext</strong>, der ausschließlich dazu dient,
        die <strong style="color:#7a0000;">Farbgebung</strong>, den <strong style="color:#7a0000;">Kontrast</strong> und die
        <strong style="color:#7a0000;">Gesamtwirkung</strong> innerhalb eines vollständigen HTML‑Codes zu testen.
        Dieser Text hat keinen inhaltlichen Zweck und dient nur als Beispiel für Layout, Design und Stil‑Experimente.
    </p>

    <p style="font-size:16px; line-height:1.7; text-align:center; color:#4a0000; margin-top:20px;">
        Hier kannst du ausprobieren, wie sich Farben, Hintergründe, Schriftgrößen, Abstände und Container‑Designs verhalten.
        Dieser Bereich ist rein privat, unverbindlich und dient nur zum Testen deiner zukünftigen Webseiten‑Ideen.
    </p>

</div>

<!-- ========================================================= -->
<!--   ERKLÄRUNG: WIE DU DIE FARBEN IN DIESEM CODE ÄNDERN KANNST -->
<!-- ========================================================= -->

<div style="
background:#ffecec;
padding:25px;
margin:40px auto;
max-width:900px;
border-radius:10px;
font-family:'Fira Sans', sans-serif;
border:2px solid #ffb3b3;
">

    <h2 style="font-size:22px; margin-bottom:15px; color:#e64545;">
        🎨 Kurze Erklärung: Wie du die Farben in diesem Code selbst ändern kannst
    </h2>

    <p style="font-size:16px; line-height:1.7; color:#660000;">
        In diesem HTML‑Code werden alle Farben direkt im Element selbst festgelegt. Das nennt man
        <strong style="color:#990000;">Inline‑CSS</strong>. Du kannst jede Farbe ändern, indem du einfach den Farbcode austauschst.
    </p>

    <p style="font-size:16px; line-height:1.7; color:#660000;">
        Die wichtigsten Stellen sind:<br><br>
        • <strong style="color:#990000;">background:</strong> Hintergrundfarbe<br>
        • <strong style="color:#990000;">color:</strong> Textfarbe<br>
        • <strong style="color:#990000;">border:</strong> Rahmenfarbe<br>
        • <strong style="color:#990000;">text-shadow:</strong> Schattenfarbe<br>
        • <strong style="color:#990000;">linear-gradient(...):</strong> Farbverläufe<br>
        • <strong style="color:#990000;">rgba(...):</strong> transparente Farben<br>
    </p>

    <p style="font-size:16px; line-height:1.7; color:#660000;">
        Beispiel: Wenn du die Hintergrundfarbe ändern willst, suchst du im Code nach:<br><br>
        <code style="background:#ffdddd; padding:4px 6px; border-radius:4px;">background:#f8e5e5;</code><br><br>
        und ersetzt sie durch eine andere Farbe, z. B.:<br><br>
        <code style="background:#ffdddd; padding:4px 6px; border-radius:4px;">background:#fce1e1;</code>
    </p>

    <p style="font-size:16px; line-height:1.7; color:#660000;">
        Farbverläufe kannst du ändern, indem du die einzelnen Farbcodes im
        <strong style="color:#990000;">linear-gradient()</strong> austauschst. Du kannst Farben hinzufügen,
        entfernen oder die Reihenfolge ändern.
    </p>

    <p style="font-size:16px; line-height:1.7; color:#660000;">
        Schattenfarben findest du in <strong style="color:#990000;">rgba()</strong>. Der letzte Wert bestimmt die Stärke
        der Transparenz (0.1 = sehr leicht, 1.0 = komplett deckend).
    </p>

    <p style="font-size:16px; line-height:1.7; color:#660000;">
        So kannst du jederzeit selbst bestimmen, wie dein Design aussehen soll.
    </p>

</div>


🔴 Dunkelrot / Dark Red
HEX:  #8B0000
RGBA: rgba(139, 0, 0, 1)

🔴 Feuerrot / Fire Red
HEX:  #B22222
RGBA: rgba(178, 34, 34, 1)

🔴 Ziegelrot / Brick Red
HEX:  #A52A2A
RGBA: rgba(165, 42, 42, 1)

🔴 Blutrot / Blood Red
HEX:  #7A0000
RGBA: rgba(122, 0, 0, 1)

🔴 Kirschrot / Cherry Red
HEX:  #CC3333
RGBA: rgba(204, 51, 51, 1)

🔴 Erdbeerrot / Strawberry Red
HEX:  #FF4D4D
RGBA: rgba(255, 77, 77, 1)

🔴 Himbeerrot / Raspberry Red
HEX:  #E64545
RGBA: rgba(230, 69, 69, 1)

🔴 Paprikarot / Pepper Red
HEX:  #FF6B6B
RGBA: rgba(255, 107, 107, 1)

🔴 Melonenrot / Watermelon Red
HEX:  #FF7F7F
RGBA: rgba(255, 127, 127, 1)

🔴 Rosenrot / Rose Red
HEX:  #CD5C5C
RGBA: rgba(205, 92, 92, 1)

🔴 Hellrot / Light Red
HEX:  #FFA3A3
RGBA: rgba(255, 163, 163, 1)

🔴 Pastellrot / Pastel Red
HEX:  #F8D0D0
RGBA: rgba(248, 208, 208, 1)

🔴 Sanftrot / Soft Red
HEX:  #FCE1E1
RGBA: rgba(252, 225, 225, 1)