Brand Guideline August 2026
EXPLETO GmbH 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.

Expleto Techblue
HEX #73bcf7
RGB 115, 188, 247
CMYK 54, 14, 0, 0
Expleto Darkblue
HEX #121421
RGB 18, 20, 33
CMYK 96, 86, 53, 77
Expleto Supportwhite
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(226, 41, 53, 1)
100% rgba(55, 8, 8, 1)
Winkel 45°
0% rgba(221, 51, 51, 1)
100% rgba(234, 0, 168, 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.

EXPLETO Companypink
HEX #e61870
RGB 230, 24, 112
CMYK 0, 96, 21, 0
EXPLETO Servicecyan
HEX #5abec0
RGB 90, 190, 192
CMYK 62, 0, 29, 0
EXPLETO Solutionviolet
HEX #9252f7
RGB 146, 82, 247
CMYK 70, 72, 0, 0

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 #F3F3F4
RGB 243, 243, 244
CMYK 0, 0, 0, 4
Grey 100
HEX #E7E8E9
RGB 231, 232, 233
CMYK 1, 0, 0, 9
Grey 150
HEX #DBDCDE
RGB 219, 220, 222
CMYK 1, 1, 0, 13
Grey 200
HEX #D0D0D3
RGB 208, 208, 211
CMYK 1, 1, 0, 17
Grey 250
HEX #C4C4C8
RGB 196, 196, 200
CMYK 2, 2, 0, 22
Grey 300
HEX #B8B9BC
RGB 184, 185, 188
CMYK 2, 2, 0, 26
Grey 350
HEX #ACADB1
RGB 172, 173, 177
CMYK 3, 2, 0, 31
Grey 400
HEX #A0A1A6
RGB 160, 161, 166
CMYK 4, 3, 0, 35
Grey 450
HEX #94959B
RGB 148, 149, 155
CMYK 5, 4, 0, 39
Grey 500
HEX #898A90
RGB 137, 138, 144
CMYK 5, 4, 0, 44
Grey 550
HEX #7D7E85
RGB 125, 126, 133
CMYK 6, 5, 0, 48
Grey 600
HEX #71727A
RGB 113, 114, 122
CMYK 7, 7, 0, 52
Grey 650
HEX #65666F
RGB 101, 102, 111
CMYK 9, 8, 0, 56
Grey 700
HEX #595B64
RGB 89, 91, 100
CMYK 11, 9, 0, 61
Grey 750
HEX #4D4F59
RGB 77, 79, 89
CMYK 13, 11, 0, 65
Grey 800
HEX #41434D
RGB 65, 67, 77
CMYK 16, 13, 0, 70
Grey 850
HEX #363742
RGB 54, 55, 66
CMYK 18, 17, 0, 74
Grey 900
HEX #2A2C37
RGB 42, 44, 55
CMYK 24, 20, 0, 78
Grey 950
HEX #1E202C
RGB 30, 32, 44
CMYK 32, 27, 0, 83

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": "expleto-techblue",
                    "color": "#73BCF7",
                    "name": "Expleto Techblue"
                },
                {
                    "slug": "expleto-darkblue",
                    "color": "#121421",
                    "name": "Expleto Darkblue"
                },
                {
                    "slug": "expleto-supportwhite",
                    "color": "#FFFFFF",
                    "name": "Expleto Supportwhite"
                },
                {
                    "slug": "expleto-companypink",
                    "color": "#E61870",
                    "name": "EXPLETO Companypink"
                },
                {
                    "slug": "expleto-servicecyan",
                    "color": "#5ABEC0",
                    "name": "EXPLETO Servicecyan"
                },
                {
                    "slug": "expleto-solutionviolet",
                    "color": "#9252F7",
                    "name": "EXPLETO Solutionviolet"
                },
                {
                    "slug": "white",
                    "color": "#FFFFFF",
                    "name": "White"
                },
                {
                    "slug": "grey-050",
                    "color": "light-dark(#F3F3F4, #1E202C)",
                    "name": "Grey 050"
                },
                {
                    "slug": "grey-100",
                    "color": "light-dark(#E7E8E9, #2A2C37)",
                    "name": "Grey 100"
                },
                {
                    "slug": "grey-150",
                    "color": "light-dark(#DBDCDE, #363742)",
                    "name": "Grey 150"
                },
                {
                    "slug": "grey-200",
                    "color": "light-dark(#D0D0D3, #41434D)",
                    "name": "Grey 200"
                },
                {
                    "slug": "grey-250",
                    "color": "light-dark(#C4C4C8, #4D4F59)",
                    "name": "Grey 250"
                },
                {
                    "slug": "grey-300",
                    "color": "light-dark(#B8B9BC, #595B64)",
                    "name": "Grey 300"
                },
                {
                    "slug": "grey-350",
                    "color": "light-dark(#ACADB1, #65666F)",
                    "name": "Grey 350"
                },
                {
                    "slug": "grey-400",
                    "color": "light-dark(#A0A1A6, #71727A)",
                    "name": "Grey 400"
                },
                {
                    "slug": "grey-450",
                    "color": "light-dark(#94959B, #7D7E85)",
                    "name": "Grey 450"
                },
                {
                    "slug": "grey-500",
                    "color": "#898A90",
                    "name": "Grey 500"
                },
                {
                    "slug": "grey-550",
                    "color": "light-dark(#7D7E85, #94959B)",
                    "name": "Grey 550"
                },
                {
                    "slug": "grey-600",
                    "color": "light-dark(#71727A, #A0A1A6)",
                    "name": "Grey 600"
                },
                {
                    "slug": "grey-650",
                    "color": "light-dark(#65666F, #ACADB1)",
                    "name": "Grey 650"
                },
                {
                    "slug": "grey-700",
                    "color": "light-dark(#595B64, #B8B9BC)",
                    "name": "Grey 700"
                },
                {
                    "slug": "grey-750",
                    "color": "light-dark(#4D4F59, #C4C4C8)",
                    "name": "Grey 750"
                },
                {
                    "slug": "grey-800",
                    "color": "light-dark(#41434D, #D0D0D3)",
                    "name": "Grey 800"
                },
                {
                    "slug": "grey-850",
                    "color": "light-dark(#363742, #DBDCDE)",
                    "name": "Grey 850"
                },
                {
                    "slug": "grey-900",
                    "color": "light-dark(#2A2C37, #E7E8E9)",
                    "name": "Grey 900"
                },
                {
                    "slug": "grey-950",
                    "color": "light-dark(#1E202C, #F3F3F4)",
                    "name": "Grey 950"
                },
                {
                    "slug": "black",
                    "color": "#121212",
                    "name": "Black"
                }
            ],
            "gradients": [
                {
                    "slug": "demo-gradient",
                    "gradient": "linear-gradient(45deg, rgba(226, 41, 53, 1) 0%, rgba(55, 8, 8, 1) 100%)",
                    "name": "DEMO Gradient"
                },
                {
                    "slug": "gradient-1",
                    "gradient": "linear-gradient(45deg, rgba(221, 51, 51, 1) 0%, rgba(234, 0, 168, 1) 100%)",
                    "name": "Gradient 2"
                }
            ]
        }
    }
}
shades.css

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

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