{"id":2751,"date":"2026-10-09T13:35:56","date_gmt":"2026-10-09T13:35:56","guid":{"rendered":"https:\/\/www.inform-software.design\/color-palette"},"modified":"2026-10-09T14:28:44","modified_gmt":"2026-10-09T14:28:44","slug":"color-palette","status":"publish","type":"page","link":"https:\/\/www.inform-software.design\/en-us\/color-palette","title":{"rendered":"Color Palette"},"content":{"rendered":"
\n
\n
\n
<\/span><\/div>\n<\/div>\n<\/div>\n\n
\n
\n

<\/h3>\n

The Color Palette of Our Visual Identity<\/span><\/h2>\n

INFORM\u2019s color palette is a central component of our visual identity. At its heart is INFORM Teal\u2014our brand color and the strongest color anchor of our visual identity. <\/span><\/p>\n

Together with Teal Blue, Black, and White, Teal forms the mandatory core palette of the INFORM Design OS. Application colors, transparency gradients, and other defined extensions complement the system where additional differentiation, dynamism, or functional requirements call for it. <\/span><\/p>\n

The use of color depends on the content, medium, and communication objective. As a result, the INFORM color palette combines a clear brand identity with the flexibility needed for a variety of applications. <\/span><\/p>\n

<\/span><\/p>\n

Teal leaves its mark. The application determines the intensity. <\/span><\/h1>\n

<\/h3>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n
\n
\n

INFORM Teal \u2013 Our Brand Color<\/h2>\n

Teal is INFORM\u2019s signature brand color and the strongest color anchor of our visual identity. It defines our brand image across both physical and digital media and ensures high brand recognition. <\/p>\n

A cool shade between green and blue, Teal combines precision and technological depth with a calm, modern look.<\/p>\n

 <\/p>\n

Teal defines INFORM's color identity.<\/strong><\/p>\n

<\/strong><\/p>\n

Application Requirements<\/strong><\/p>\n

    \n
  • Preferred color for brand-defining surfaces and design elements<\/li>\n
  • across media in physical and digital applications<\/li>\n
  • Together with Teal Blue, Black, and White, it forms the mandatory core palette<\/li>\n
  • Use defined color values consistently and accurately
    <\/strong><\/li>\n<\/ul>\n<\/div><\/div>\n<\/div>\n\n
    \n

    PETROL<\/strong><\/p>\n

    HEX #0090A7
    RGB 000 | 144 | 167
    CMYK 100 | 000 | 030 | 010
    Pantone 7711<\/p>\n

     <\/p>\n

    Character<\/strong>: Precise \u2022 calm \u2022 technical
    Function<\/strong>: Defining brand identity
    Usage<\/strong>: Backgrounds \u2022 Design elements <\/p>\n

     <\/p>\n

     <\/p>\n

     <\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n

    \n
    \n

    Core Colors \u2013 Our Color Foundation<\/h2>\n

    INFORM Teal, Teal Blue, Black, and White make up the mandatory core palette of the INFORM Design OS. It serves as the foundation for a consistent and recognizable design across all media and communication channels. <\/p>\n

     <\/p>\n

    Four core colors. A consistent visual identity. <\/strong> <\/p>\n

     <\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n

    \n
    \n

    PETROL
    Character<\/strong>: Precise \u2022 calm \u2022 technical
    Function<\/strong>: Defining the brand
    Usage<\/strong>: Surfaces \u2022 Backgrounds \u2022 Design elements<\/p>\n

    HEX #0090A7
    RGB 000 | 144 | 167
    CMYK 100 | 000 | 030 | 010
    Pantone 7711<\/p>\n<\/div><\/div>\n\n

    BLACK
    Character<\/strong>: neutral \u2022 high contrast
    Function<\/strong>: functional color
    Applications<\/strong>: typography \u2022 contrast \u2022 monochrome applications<\/p>\n

    HEX #000000
    RGB 0 \/ 0 \/ 0
    CMYK 0 \/ 0 \/ 0 \/ 100<\/p>\n<\/div><\/div>\n<\/div>\n\n

    \n

    BLAUPETROL
    Character<\/strong>: deep \u2022 calm \u2022 confident
    Function<\/strong>: Supporting core color
    Usage: Large areas <\/strong>\u2022 Backgrounds \u2022 Distinction<\/p>\n

    HEX #004559 RGB 000 | 069 | 089
    CMYK 100 | 000 | 015 | 070
    Pantone 303<\/p>\n<\/div><\/div>\n\n

    WHITE
    Character: neutral \u2022 open
    Function: functional color
    Use: backgrounds \u2022 typography \u2022 contrast<\/p>\n

    HEX #FFFFFF
    RGB 255 \/ 255 \/ 255
    CMYK 0 \/ 0 \/ 0 \/ 0<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n

    \n
    \n

    Application Requirements<\/strong><\/p>\n

      \n
    • Teal<\/strong> takes on the role of defining the brand<\/li>\n
    • Teal Blue<\/strong> complements the brand color and adds depth and differentiation<\/li>\n
    • Black and white<\/strong> serve as functional colors to provide contrast and clarity<\/li>\n
    • The use and weighting depend on the medium, content, and communication objective<\/li>\n
    • Use defined color values consistently and accurately<\/li>\n<\/ul>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n
      \n
      \n

      Application Colors \u2013 Functional Expansion<\/h2>\n

      For applications requiring a higher degree of differentiation and visual structure, the core palette is supplemented by Night Petrol, Light Petrol, and Limonene Green. Application colors do not replace the core colors but rather expand them in a targeted manner to meet specific functional requirements. <\/p>\n

       <\/p>\n

      Application colors support the content. The core colors define the brand. <\/strong><\/p>\n

      <\/strong><\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n

      \n
      \n

      NACHTPETROL
      Character<\/strong>: Deep \u2022 Reserved
      Function<\/strong>: Application Color
      Use<\/strong>: Charts \u2022 Infographics \u2022 Differentiation<\/p>\n

      HEX #003543
      RGB 000 | 053 | 067
      CMYK 100 | 064 | 048 | 052
      Pantone 5463 <\/span><\/p>\n<\/div><\/div>\n<\/div>\n\n

      \n

      LICHTPETROL
      Character<\/strong>: Light \u2022 Subtle
      Function<\/strong>: Application Color
      Use<\/strong>: Charts \u2022 Infographics \u2022 Differentiation<\/p>\n

      HEX #22BDD6
      RGB 034 | 189 | 214
      CMYK 068 | 000 | 016 | 000
      Pantone 310<\/p>\n<\/div><\/div>\n<\/div>\n\n

      \n

      LIME GREEN
      Character<\/strong>: Dynamic \u2022 Expressive
      Function<\/strong>: Application color
      Use<\/strong>: Charts \u2022 Infographics \u2022 Differentiation<\/p>\n

      HEX #95C11F
      RGB 149 | 193 | 031
      CMYK 050 | 000 | 100 | 000
      Pantone 382<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n

      \n
      \n

      Application Requirements<\/strong><\/p>\n

        \n
      • Night Petrol and Light Petrol<\/strong> for additional color gradations and differentiation<\/li>\n
      • Lime green<\/strong> for subtle accents and highlights<\/li>\n
      • Especially for charts, infographics, and tables<\/li>\n
      • Use based on content, function, and required differentiation<\/li>\n
      • Do not use as font colors<\/li>\n
      • No use of lime green as a standalone decorative color or over large areas<\/li>\n<\/ul>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n
        \n
        \n

        Transparency gradients \u2013 Color unfolds
        Skip to content<\/h2>\n

        Transparency gradients blend defined INFORM primary colors into transparency. They connect areas of color with images or backgrounds and create seamless transitions within the composition. <\/p>\n

         <\/p>\n

        The color remains distinct. Transparency expands its range of applications. <\/strong><\/p>\n

         <\/p>\n

        Application Requirements<\/strong><\/p>\n

          \n
        • Exclusively defined INFORM core colors<\/li>\n
        • Always transition from color to transparency<\/li>\n
        • Freely adjust the direction, length, and edge alignment to suit the format and content<\/li>\n
        • No free transitions between different core colors<\/li>\n
        • Use primary colors as solid color areas without altering them<\/li>\n<\/ul>\n<\/div><\/div>\n<\/div>\n\n
          \n
          <\/span><\/div>\n<\/div>\n<\/div>\n\n
          \n
          \n

          Dynamic Color Gradient \u2013 Creating Visual Worlds
          <\/h2>\n

          The dynamic color gradient combines lime green, dark teal, and teal, adding a dynamic, expressive dimension to the INFORM color palette. It is used in particular to bring visual worlds to life. <\/p>\n

           <\/p>\n

          The composition enhances the visual impact. The subject remains in focus. <\/strong><\/p>\n

          <\/strong><\/p>\n

          Application Requirements<\/strong><\/p>\n

            \n
          • The color sequence Lime Green \u2192 Dark Teal \u2192 Teal<\/strong> must be strictly maintained<\/li>\n
          • The path is behind the image<\/li>\n
          • Reduce the opacity of the image so that the gradient becomes visible<\/li>\n
          • Adjust the position, size, and orientation to suit the format, subject, and composition<\/li>\n
          • Do not compromise image quality or readability<\/li>\n
          • Do not replace lime green with other colors within the gradient<\/li>\n<\/ul>\n<\/div><\/div>\n<\/div>\n\n
            \n
            <\/span><\/div>\n\n

            Character<\/strong>: Dynamic \u2022 Expressive
            Function<\/strong>: Creation of visual worlds
            Application<\/strong>: Visual worlds \u2022 Eye-catching communication
            Color sequence<\/strong>: Lime green \u2192 Dark teal \u2192 Teal
            Variable<\/strong>: Position \u2022 Size \u2022 Orientation<\/p>\n

             <\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n

            \n
            \n

            Passepartout \u2013 Space for Content<\/h2>\n

            Passepartout serves a clearly defined purpose as a background color for charts and illustrations. Its light, warm-neutral shade creates a subtle contrast, visually delineates content, and highlights it without drawing attention to itself. <\/p>\n

             <\/p>\n

            A mat creates space and subtly highlights the content.<\/strong><\/p>\n

            <\/strong><\/p>\n

            Application Requirements<\/strong><\/p>\n

              \n
            • as a background for charts and illustrations<\/li>\n
            • creates a solid foundation for adaptive color palettes<\/li>\n
            • use them specifically to visually distinguish between different types of content<\/li>\n
            • Do not use as a general background or design color<\/li>\n
            • The specified color value is used as is<\/li>\n<\/ul>\n<\/div><\/div>\n<\/div>\n\n
              \n

              <\/strong><\/p>\n

              <\/strong><\/p>\n

              PASSEPARTOUT<\/strong><\/p>\n

               <\/p>\n

              HEX #c6c6c2
              RGB 198 | 198 | 194
              CMYK 025 | 019 | 022 | 002
              Pantone 7535<\/p>\n

               <\/p>\n

              Character<\/strong>: Warm-neutral \u2022 Calm
              Function<\/strong>: Presentation area
              Use<\/strong>: Background for charts \u2022 Illustrations<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_monsterinsights_skip_tracking":false,"footnotes":""},"class_list":["post-2751","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.inform-software.design\/en-us\/wp-json\/wp\/v2\/pages\/2751","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inform-software.design\/en-us\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.inform-software.design\/en-us\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.inform-software.design\/en-us\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inform-software.design\/en-us\/wp-json\/wp\/v2\/comments?post=2751"}],"version-history":[{"count":3,"href":"https:\/\/www.inform-software.design\/en-us\/wp-json\/wp\/v2\/pages\/2751\/revisions"}],"predecessor-version":[{"id":2972,"href":"https:\/\/www.inform-software.design\/en-us\/wp-json\/wp\/v2\/pages\/2751\/revisions\/2972"}],"wp:attachment":[{"href":"https:\/\/www.inform-software.design\/en-us\/wp-json\/wp\/v2\/media?parent=2751"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}