Brand Guideline Mai 2026
Dalton Gymnasium Alsdorf Logo Light

Farben

Primäre Farbpalette

Die konsistente Verwendung von Farben ist entscheidend für einen wirksamen Wiedererkennungswert der Marke.
Die Marke sollte immer in einer der Farben auf dieser Seite dargestellt werden, abgesehen von spezifischen Empfehlungen in diesem Leitfaden.

Andere/unautorisierten Farben sollen nicht verwendet werden.

Dalton Blau
HEX #343f64
RGB 52, 63, 100
CMYK 2, 93, 76, 0
Markergelb
HEX #fbba00
RGB 251, 186, 0
CMYK 52, 92, 71, 79
Aufgabenblattweiß
HEX #ffffff
RGB 255, 255, 255
CMYK 0, 0, 0, 0

Farbtöne

Die Verwendung der primären Farbpalette ohne Veränderung wird bevorzugt, aber manche Situationen erfordern die Verwendung von
Farbabstufungen, insbesondere im Internet.

Wenn ein Nutzer beispielsweise mit dem Mauszeiger über einen Button auf der Webseite fährt, kann eine Farbänderung helfen die Aktion sichtbar zu machen.

Light 20%
Light 40%
Light 60%
Light 80%
Original
Dark 80%
Dark 60%
Dark 40%
Dark 20%
Light 20%
Light 40%
Light 60%
Light 80%
Original
Dark 80%
Dark 60%
Dark 40%
Dark 20%

Farbverläufe

Farbverläufe erweitern die Markenfarben um dynamische Übergänge und schaffen visuelle Tiefe.
Sie sollten gezielt eingesetzt werden, um Inhalte hervorzuheben, ohne die Klarheit und Wiedererkennbarkeit der Marke zu beeinträchtigen.

DEMO Gradient
Winkel 45°
0% rgba(71, 195, 191, 1)
100% rgba(5, 36, 35, 1)
Winkel 45°
0% rgba(193, 159, 225, 1)
100% rgba(40, 6, 72, 1)
Nicht realisiert

Sekundäre Farbpalette

Die sekundäre Farbpalette ist so konzipiert, dass sie kreative Flexibilität bietet. Diese Farben sind komplementär zu den primären Farben und wurden ausgewählt, um Entwurfen Wärme und Energie zu verleihen.

Es ist nicht erforderlich, eine Farbe aus der sekundären Farbpalette zu verwenden.

HEX #cc0f13
RGB 204, 15, 19
CMYK 12, 100, 100, 3
HEX #ee7526
RGB 238, 117, 38
CMYK 0, 64, 90, 0
HEX #ffd602
RGB 255, 214, 2
CMYK 1, 14, 92, 0
HEX #5a9c3b
RGB 90, 156, 59
CMYK 70, 16, 96, 2
HEX #01549a
RGB 1, 84, 154
CMYK 96, 67, 8, 0
HEX #7b1c82
RGB 123, 28, 130
CMYK 64, 100, 1, 1
Nicht realisiert

Neutrale Farbpalette

Unsere Grautöne bilden die Grundlage unserer Farbpalette und können für eine Vielzahl von Berührungspunkten verwendet werden. Verwenden Sie sie zusammen mit unseren Primär- und Sekundärfarben.

Grey 050
HEX #F3F3F3
RGB 243, 243, 243
CMYK 0, 0, 0, 5
Grey 100
HEX #E7E7E8
RGB 231, 231, 232
CMYK 0, 0, 0, 9
Grey 150
HEX #DADBDC
RGB 218, 219, 220
CMYK 1, 0, 0, 14
Grey 200
HEX #CECFD0
RGB 206, 207, 208
CMYK 1, 0, 0, 18
Grey 250
HEX #C2C3C4
RGB 194, 195, 196
CMYK 1, 1, 0, 23
Grey 300
HEX #B6B6B9
RGB 182, 182, 185
CMYK 2, 2, 0, 27
Grey 350
HEX #A9AAAD
RGB 169, 170, 173
CMYK 2, 2, 0, 32
Grey 400
HEX #9D9EA1
RGB 157, 158, 161
CMYK 2, 2, 0, 37
Grey 450
HEX #919295
RGB 145, 146, 149
CMYK 3, 2, 0, 42
Grey 500
HEX #85868A
RGB 133, 134, 138
CMYK 4, 3, 0, 46
Grey 550
HEX #787A7E
RGB 120, 122, 126
CMYK 5, 3, 0, 51
Grey 600
HEX #6C6E72
RGB 108, 110, 114
CMYK 5, 4, 0, 55
Grey 650
HEX #606266
RGB 96, 98, 102
CMYK 6, 4, 0, 60
Grey 700
HEX #54565B
RGB 84, 86, 91
CMYK 8, 5, 0, 64
Grey 750
HEX #474A4F
RGB 71, 74, 79
CMYK 10, 6, 0, 69
Grey 800
HEX #3B3D43
RGB 59, 61, 67
CMYK 12, 9, 0, 74
Grey 850
HEX #2F3137
RGB 47, 49, 55
CMYK 15, 11, 0, 78
Grey 900
HEX #23252C
RGB 35, 37, 44
CMYK 20, 16, 0, 83
Grey 950
HEX #161920
RGB 22, 25, 32
CMYK 31, 22, 0, 87

Farbexport

Lade die Palette in einem der beiden Formate herunter, um sie direkt in dein Projekt einzubinden – theme.json für die WordPress-Farbeinstellungen oder shades.css für den vollständigen Satz an Hell- und Dunkelabstufungen, die auf der Seite verwendet werden.

theme.json

Farbpalette für WordPress-Themes

{
    "$schema": "https://schemas.wp.org/trunk/theme.json",
    "version": 3,
    "settings": {
        "color": {
            "palette": [
                {
                    "slug": "dalton-blau",
                    "color": "#343F64",
                    "name": "Dalton Blau"
                },
                {
                    "slug": "markergelb",
                    "color": "#FBBA00",
                    "name": "Markergelb"
                },
                {
                    "slug": "aufgabenblattweiss",
                    "color": "#FFFFFF",
                    "name": "Aufgabenblattweiß"
                },
                {
                    "slug": "secondary-0",
                    "color": "#CC0F13",
                    "name": "Secondary 1"
                },
                {
                    "slug": "secondary-1",
                    "color": "#EE7526",
                    "name": "Secondary 2"
                },
                {
                    "slug": "secondary-2",
                    "color": "#FFD602",
                    "name": "Secondary 3"
                },
                {
                    "slug": "secondary-3",
                    "color": "#5A9C3B",
                    "name": "Secondary 4"
                },
                {
                    "slug": "secondary-4",
                    "color": "#01549A",
                    "name": "Secondary 5"
                },
                {
                    "slug": "secondary-5",
                    "color": "#7B1C82",
                    "name": "Secondary 6"
                },
                {
                    "slug": "white",
                    "color": "#FFFFFF",
                    "name": "White"
                },
                {
                    "slug": "grey-050",
                    "color": "light-dark(#F3F3F3, #161920)",
                    "name": "Grey 050"
                },
                {
                    "slug": "grey-100",
                    "color": "light-dark(#E7E7E8, #23252C)",
                    "name": "Grey 100"
                },
                {
                    "slug": "grey-150",
                    "color": "light-dark(#DADBDC, #2F3137)",
                    "name": "Grey 150"
                },
                {
                    "slug": "grey-200",
                    "color": "light-dark(#CECFD0, #3B3D43)",
                    "name": "Grey 200"
                },
                {
                    "slug": "grey-250",
                    "color": "light-dark(#C2C3C4, #474A4F)",
                    "name": "Grey 250"
                },
                {
                    "slug": "grey-300",
                    "color": "light-dark(#B6B6B9, #54565B)",
                    "name": "Grey 300"
                },
                {
                    "slug": "grey-350",
                    "color": "light-dark(#A9AAAD, #606266)",
                    "name": "Grey 350"
                },
                {
                    "slug": "grey-400",
                    "color": "light-dark(#9D9EA1, #6C6E72)",
                    "name": "Grey 400"
                },
                {
                    "slug": "grey-450",
                    "color": "light-dark(#919295, #787A7E)",
                    "name": "Grey 450"
                },
                {
                    "slug": "grey-500",
                    "color": "#85868A",
                    "name": "Grey 500"
                },
                {
                    "slug": "grey-550",
                    "color": "light-dark(#787A7E, #919295)",
                    "name": "Grey 550"
                },
                {
                    "slug": "grey-600",
                    "color": "light-dark(#6C6E72, #9D9EA1)",
                    "name": "Grey 600"
                },
                {
                    "slug": "grey-650",
                    "color": "light-dark(#606266, #A9AAAD)",
                    "name": "Grey 650"
                },
                {
                    "slug": "grey-700",
                    "color": "light-dark(#54565B, #B6B6B9)",
                    "name": "Grey 700"
                },
                {
                    "slug": "grey-750",
                    "color": "light-dark(#474A4F, #C2C3C4)",
                    "name": "Grey 750"
                },
                {
                    "slug": "grey-800",
                    "color": "light-dark(#3B3D43, #CECFD0)",
                    "name": "Grey 800"
                },
                {
                    "slug": "grey-850",
                    "color": "light-dark(#2F3137, #DADBDC)",
                    "name": "Grey 850"
                },
                {
                    "slug": "grey-900",
                    "color": "light-dark(#23252C, #E7E7E8)",
                    "name": "Grey 900"
                },
                {
                    "slug": "grey-950",
                    "color": "light-dark(#161920, #F3F3F3)",
                    "name": "Grey 950"
                },
                {
                    "slug": "black",
                    "color": "#121212",
                    "name": "Black"
                }
            ],
            "gradients": [
                {
                    "slug": "demo-gradient",
                    "gradient": "linear-gradient(45deg, rgba(71, 195, 191, 1) 0%, rgba(5, 36, 35, 1) 100%)",
                    "name": "DEMO Gradient"
                },
                {
                    "slug": "gradient-1",
                    "gradient": "linear-gradient(45deg, rgba(193, 159, 225, 1) 0%, rgba(40, 6, 72, 1) 100%)",
                    "name": "Gradient 2"
                }
            ]
        }
    }
}
shades.css

CSS-Variablen für „Tint“ und „Shade“

:root {
  --color--dalton-blau--light--10: color-mix(in srgb, var(--wp--preset--color--dalton-blau) 10%, white);
  --color--dalton-blau--light--20: color-mix(in srgb, var(--wp--preset--color--dalton-blau) 20%, white);
  --color--dalton-blau--light--30: color-mix(in srgb, var(--wp--preset--color--dalton-blau) 30%, white);
  --color--dalton-blau--light--40: color-mix(in srgb, var(--wp--preset--color--dalton-blau) 40%, white);
  --color--dalton-blau--light--50: color-mix(in srgb, var(--wp--preset--color--dalton-blau) 50%, white);
  --color--dalton-blau--light--60: color-mix(in srgb, var(--wp--preset--color--dalton-blau) 60%, white);
  --color--dalton-blau--light--70: color-mix(in srgb, var(--wp--preset--color--dalton-blau) 70%, white);
  --color--dalton-blau--light--80: color-mix(in srgb, var(--wp--preset--color--dalton-blau) 80%, white);
  --color--dalton-blau--light--90: color-mix(in srgb, var(--wp--preset--color--dalton-blau) 90%, white);
  --color--dalton-blau--dark--10: color-mix(in srgb, var(--wp--preset--color--dalton-blau) 10%, black);
  --color--dalton-blau--dark--20: color-mix(in srgb, var(--wp--preset--color--dalton-blau) 20%, black);
  --color--dalton-blau--dark--30: color-mix(in srgb, var(--wp--preset--color--dalton-blau) 30%, black);
  --color--dalton-blau--dark--40: color-mix(in srgb, var(--wp--preset--color--dalton-blau) 40%, black);
  --color--dalton-blau--dark--50: color-mix(in srgb, var(--wp--preset--color--dalton-blau) 50%, black);
  --color--dalton-blau--dark--60: color-mix(in srgb, var(--wp--preset--color--dalton-blau) 60%, black);
  --color--dalton-blau--dark--70: color-mix(in srgb, var(--wp--preset--color--dalton-blau) 70%, black);
  --color--dalton-blau--dark--80: color-mix(in srgb, var(--wp--preset--color--dalton-blau) 80%, black);
  --color--dalton-blau--dark--90: color-mix(in srgb, var(--wp--preset--color--dalton-blau) 90%, black);
  --color--markergelb--light--10: color-mix(in srgb, var(--wp--preset--color--markergelb) 10%, white);
  --color--markergelb--light--20: color-mix(in srgb, var(--wp--preset--color--markergelb) 20%, white);
  --color--markergelb--light--30: color-mix(in srgb, var(--wp--preset--color--markergelb) 30%, white);
  --color--markergelb--light--40: color-mix(in srgb, var(--wp--preset--color--markergelb) 40%, white);
  --color--markergelb--light--50: color-mix(in srgb, var(--wp--preset--color--markergelb) 50%, white);
  --color--markergelb--light--60: color-mix(in srgb, var(--wp--preset--color--markergelb) 60%, white);
  --color--markergelb--light--70: color-mix(in srgb, var(--wp--preset--color--markergelb) 70%, white);
  --color--markergelb--light--80: color-mix(in srgb, var(--wp--preset--color--markergelb) 80%, white);
  --color--markergelb--light--90: color-mix(in srgb, var(--wp--preset--color--markergelb) 90%, white);
  --color--markergelb--dark--10: color-mix(in srgb, var(--wp--preset--color--markergelb) 10%, black);
  --color--markergelb--dark--20: color-mix(in srgb, var(--wp--preset--color--markergelb) 20%, black);
  --color--markergelb--dark--30: color-mix(in srgb, var(--wp--preset--color--markergelb) 30%, black);
  --color--markergelb--dark--40: color-mix(in srgb, var(--wp--preset--color--markergelb) 40%, black);
  --color--markergelb--dark--50: color-mix(in srgb, var(--wp--preset--color--markergelb) 50%, black);
  --color--markergelb--dark--60: color-mix(in srgb, var(--wp--preset--color--markergelb) 60%, black);
  --color--markergelb--dark--70: color-mix(in srgb, var(--wp--preset--color--markergelb) 70%, black);
  --color--markergelb--dark--80: color-mix(in srgb, var(--wp--preset--color--markergelb) 80%, black);
  --color--markergelb--dark--90: color-mix(in srgb, var(--wp--preset--color--markergelb) 90%, black);
}
Anmeldung erforderlich