Stilguiden VGR

Colors 

<style>
    .colors__heading {
        margin: 24px 16px;
        margin-top: 24px;
        margin-left: 16px;
    }

    .colors {
        display: block;
        margin: 8px 16px 24px;
        border-top: solid 1px #000;
    }

    .colors__items {
        display: flex;
        flex-wrap: wrap;
    }

    .colors__color-card {
        background-color: #fff;
        margin-right: 24px;
        margin-bottom: 24px;
        box-shadow: 0 0px 4px rgba(0, 0, 0, 0.15);
        border-radius: 2px;
        height: auto;
    }

    .colors__color-display {
        height: 130px;
        min-width: 300px;
        border-top-left-radius: 2px;
        border-top-right-radius: 2px;
    }

    .colors__color-info-wrapper {
        margin-top: 16px;
        margin-bottom: 16px;
    }

    .colors__color-info.colors__color-info--large {
        font-size: 18px;
    }

    .colors__color-info {
        margin-top: 0;
        margin-bottom: 4px;
        font-size: 14px;
        padding-left: 16px;
        padding-right: 16px;
    }

    @media (max-width: 480px) {
        .colors__items {
            flex-direction: column;
        }
        .colors__color__display {
            width: 100%;
        }
    }
</style>

<h1 class="colors__heading">Colors</h1>

<div class="colors">
    <h2>VGR Decor Colors</h2>
    <div class="colors__items">

        <div class="colors__color-card">
            <div class="colors__color-display" style="background-color:rgba(242, 169, 0, 1)"></div>
            <div class="colors__color-info-wrapper">
                <p class="colors__color-info colors__color-info--large"><strong>$color-yellow</strong></p>

                <p class="colors__color-info"><strong>HEX:</strong> #f2a900</p>

                <p class="colors__color-info"><strong>RGBA:</strong> rgba(242, 169, 0, 1)</p>

            </div>
        </div>

        <div class="colors__color-card">
            <div class="colors__color-display" style="background-color:rgba(157, 34, 53, 1)"></div>
            <div class="colors__color-info-wrapper">
                <p class="colors__color-info colors__color-info--large"><strong>$color-red</strong></p>

                <p class="colors__color-info"><strong>HEX:</strong> #9d2235</p>

                <p class="colors__color-info"><strong>RGBA:</strong> rgba(157, 34, 53, 1)</p>

            </div>
        </div>

        <div class="colors__color-card">
            <div class="colors__color-display" style="background-color:rgba(74, 119, 60, 1)"></div>
            <div class="colors__color-info-wrapper">
                <p class="colors__color-info colors__color-info--large"><strong>$color-green</strong></p>

                <p class="colors__color-info"><strong>HEX:</strong> #4a773c</p>

                <p class="colors__color-info"><strong>RGBA:</strong> rgba(74, 119, 60, 1)</p>

            </div>
        </div>

        <div class="colors__color-card">
            <div class="colors__color-display" style="background-color:rgba(0, 98, 152, 1)"></div>
            <div class="colors__color-info-wrapper">
                <p class="colors__color-info colors__color-info--large"><strong>$color-blue</strong></p>

                <p class="colors__color-info"><strong>HEX:</strong> #006298</p>

                <p class="colors__color-info"><strong>RGBA:</strong> rgba(0, 98, 152, 1)</p>

            </div>
        </div>

        <div class="colors__color-card">
            <div class="colors__color-display" style="background-color:rgba(158, 162, 162, 1)"></div>
            <div class="colors__color-info-wrapper">
                <p class="colors__color-info colors__color-info--large"><strong>$color-gray</strong></p>

                <p class="colors__color-info"><strong>HEX:</strong> #9ea2a2</p>

                <p class="colors__color-info"><strong>RGBA:</strong> rgba(158, 162, 162, 1)</p>

            </div>
        </div>

    </div>
</div>

<div class="colors">
    <h2>VGR Decor Colors lighter tone</h2>
    <div class="colors__items">

        <div class="colors__color-card">
            <div class="colors__color-display" style="background-color:rgba(246, 195, 76, 1)"></div>
            <div class="colors__color-info-wrapper">
                <p class="colors__color-info colors__color-info--large"><strong>$color-yellow-lighter</strong></p>

                <p class="colors__color-info"><strong>HEX:</strong> #f6c34c</p>

                <p class="colors__color-info"><strong>RGBA:</strong> rgba(246, 195, 76, 1)</p>

            </div>
        </div>

        <div class="colors__color-card">
            <div class="colors__color-display" style="background-color:rgba(186, 100, 113, 1)"></div>
            <div class="colors__color-info-wrapper">
                <p class="colors__color-info colors__color-info--large"><strong>$color-red-lighter</strong></p>

                <p class="colors__color-info"><strong>HEX:</strong> #ba6471</p>

                <p class="colors__color-info"><strong>RGBA:</strong> rgba(186, 100, 113, 1)</p>

            </div>
        </div>

        <div class="colors__color-card">
            <div class="colors__color-display" style="background-color:rgba(128, 160, 118, 1)"></div>
            <div class="colors__color-info-wrapper">
                <p class="colors__color-info colors__color-info--large"><strong>$color-green-lighter</strong></p>

                <p class="colors__color-info"><strong>HEX:</strong> #80a076</p>

                <p class="colors__color-info"><strong>RGBA:</strong> rgba(128, 160, 118, 1)</p>

            </div>
        </div>

        <div class="colors__color-card">
            <div class="colors__color-display" style="background-color:rgba(76, 145, 183, 1)"></div>
            <div class="colors__color-info-wrapper">
                <p class="colors__color-info colors__color-info--large"><strong>$color-blue-lighter</strong></p>

                <p class="colors__color-info"><strong>HEX:</strong> #4c91b7</p>

                <p class="colors__color-info"><strong>RGBA:</strong> rgba(76, 145, 183, 1)</p>

            </div>
        </div>

        <div class="colors__color-card">
            <div class="colors__color-display" style="background-color:rgba(187, 190, 190, 1)"></div>
            <div class="colors__color-info-wrapper">
                <p class="colors__color-info colors__color-info--large"><strong>$color-gray-lighter</strong></p>

                <p class="colors__color-info"><strong>HEX:</strong> #bbbebe</p>

                <p class="colors__color-info"><strong>RGBA:</strong> rgba(187, 190, 190, 1)</p>

            </div>
        </div>

    </div>
</div>

<div class="colors">
    <h2>VGR Complementary Colors</h2>
    <div class="colors__items">

        <div class="colors__color-card">
            <div class="colors__color-display" style="background-color:rgba(113, 178, 201, 1)"></div>
            <div class="colors__color-info-wrapper">
                <p class="colors__color-info colors__color-info--large"><strong>$color-complementary-blue</strong></p>

                <p class="colors__color-info"><strong>HEX:</strong> #71b2c9</p>

                <p class="colors__color-info"><strong>RGBA:</strong> rgba(113, 178, 201, 1)</p>

            </div>
        </div>

        <div class="colors__color-card">
            <div class="colors__color-display" style="background-color:rgba(168, 173, 0, 1)"></div>
            <div class="colors__color-info-wrapper">
                <p class="colors__color-info colors__color-info--large"><strong>$color-complementary-lime</strong></p>

                <p class="colors__color-info"><strong>HEX:</strong> #a8ad00</p>

                <p class="colors__color-info"><strong>RGBA:</strong> rgba(168, 173, 0, 1)</p>

            </div>
        </div>

        <div class="colors__color-card">
            <div class="colors__color-display" style="background-color:rgba(0, 135, 85, 1)"></div>
            <div class="colors__color-info-wrapper">
                <p class="colors__color-info colors__color-info--large"><strong>$color-complementary-green</strong></p>

                <p class="colors__color-info"><strong>HEX:</strong> #008755</p>

                <p class="colors__color-info"><strong>RGBA:</strong> rgba(0, 135, 85, 1)</p>

            </div>
        </div>

        <div class="colors__color-card">
            <div class="colors__color-display" style="background-color:rgba(198, 170, 117, 1)"></div>
            <div class="colors__color-info-wrapper">
                <p class="colors__color-info colors__color-info--large"><strong>$color-complementary-beige</strong></p>

                <p class="colors__color-info"><strong>HEX:</strong> #c6aa75</p>

                <p class="colors__color-info"><strong>RGBA:</strong> rgba(198, 170, 117, 1)</p>

            </div>
        </div>

        <div class="colors__color-card">
            <div class="colors__color-display" style="background-color:rgba(200, 16, 46, 1)"></div>
            <div class="colors__color-info-wrapper">
                <p class="colors__color-info colors__color-info--large"><strong>$color-complementary-red</strong></p>

                <p class="colors__color-info"><strong>HEX:</strong> #c8102e</p>

                <p class="colors__color-info"><strong>RGBA:</strong> rgba(200, 16, 46, 1)</p>

            </div>
        </div>

        <div class="colors__color-card">
            <div class="colors__color-display" style="background-color:rgba(88, 44, 131, 1)"></div>
            <div class="colors__color-info-wrapper">
                <p class="colors__color-info colors__color-info--large"><strong>$color-complementary-purple</strong></p>

                <p class="colors__color-info"><strong>HEX:</strong> #582c83</p>

                <p class="colors__color-info"><strong>RGBA:</strong> rgba(88, 44, 131, 1)</p>

            </div>
        </div>

        <div class="colors__color-card">
            <div class="colors__color-display" style="background-color:rgba(175, 22, 133, 1)"></div>
            <div class="colors__color-info-wrapper">
                <p class="colors__color-info colors__color-info--large"><strong>$color-complementary-pink</strong></p>

                <p class="colors__color-info"><strong>HEX:</strong> #af1685</p>

                <p class="colors__color-info"><strong>RGBA:</strong> rgba(175, 22, 133, 1)</p>

            </div>
        </div>

        <div class="colors__color-card">
            <div class="colors__color-display" style="background-color:rgba(216, 96, 24, 1)"></div>
            <div class="colors__color-info-wrapper">
                <p class="colors__color-info colors__color-info--large"><strong>$color-complementary-orange</strong></p>

                <p class="colors__color-info"><strong>HEX:</strong> #d86018</p>

                <p class="colors__color-info"><strong>RGBA:</strong> rgba(216, 96, 24, 1)</p>

            </div>
        </div>

    </div>
</div>
 
<style>

.colors__heading {
  margin: 24px 16px;
  margin-top: 24px;
  margin-left: 16px;
}

.colors {
 display: block;
 margin: 8px 16px 24px;
 border-top: solid 1px #000;
}

.colors__items{
  display: flex;
  flex-wrap: wrap;
}

.colors__color-card {
  background-color: #fff;
  margin-right: 24px;
  margin-bottom: 24px;
  box-shadow: 0 0px 4px rgba(0,0,0,0.15);
  border-radius: 2px;
  height: auto;
}

.colors__color-display {
  height: 130px;
  min-width: 300px;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
}

.colors__color-info-wrapper {
  margin-top: 16px;
  margin-bottom: 16px;
}

.colors__color-info.colors__color-info--large {
  font-size: 18px;
}

.colors__color-info {
  margin-top: 0;
  margin-bottom: 4px;
  font-size: 14px;
  padding-left: 16px;
  padding-right: 16px;
}

@media (max-width: 480px){
  .colors__items{
    flex-direction: column;
  }
  .colors__color__display{
    width: 100%;
  }
}

</style>

<h1 class="colors__heading">Colors</h1>
{% for sectionName, section in Colors %}
<div class="colors">
  <h2>{{ sectionName }}</h2>
  <div class="colors__items">
    {% for color in section %}
    <div class="colors__color-card">
      <div class="colors__color-display" style="background-color:{{ color.values.rgba }}"></div>
      <div class="colors__color-info-wrapper">
        <p class="colors__color-info colors__color-info--large"><strong>{{ color.name }}</strong></p>
        {% for type, value in color.values %}
          <p class="colors__color-info"><strong>{{ type|upper }}:</strong> {{ value|lower }}</p>
        {% endfor %}
      </div>
    </div>
    {% endfor %}
  </div>
</div>
{% endfor %}
 
{
  "Colors": {
    "VGR Decor Colors": [
      {
        "name": "$color-yellow",
        "type": "color",
        "section": "Colors > VGR Decor Colors",
        "description": "Decor yellow",
        "deprecated": null,
        "values": {
          "hex": "#F2A900",
          "rgba": "rgba(242, 169, 0, 1)"
        }
      },
      {
        "name": "$color-red",
        "type": "color",
        "section": "Colors > VGR Decor Colors",
        "description": "Decor red",
        "deprecated": null,
        "values": {
          "hex": "#9D2235",
          "rgba": "rgba(157, 34, 53, 1)"
        }
      },
      {
        "name": "$color-green",
        "type": "color",
        "section": "Colors > VGR Decor Colors",
        "description": "Decor green",
        "deprecated": null,
        "values": {
          "hex": "#4A773C",
          "rgba": "rgba(74, 119, 60, 1)"
        }
      },
      {
        "name": "$color-blue",
        "type": "color",
        "section": "Colors > VGR Decor Colors",
        "description": "Decor blue",
        "deprecated": null,
        "values": {
          "hex": "#006298",
          "rgba": "rgba(0, 98, 152, 1)"
        }
      },
      {
        "name": "$color-gray",
        "type": "color",
        "section": "Colors > VGR Decor Colors",
        "description": "Decor gray",
        "deprecated": null,
        "values": {
          "hex": "#9EA2A2",
          "rgba": "rgba(158, 162, 162, 1)"
        }
      }
    ],
    "VGR Decor Colors lighter tone": [
      {
        "name": "$color-yellow-lighter",
        "type": "color",
        "section": "Colors > VGR Decor Colors lighter tone",
        "description": "Decor yellow lighter",
        "deprecated": null,
        "values": {
          "hex": "#F6C34C",
          "rgba": "rgba(246, 195, 76, 1)"
        }
      },
      {
        "name": "$color-red-lighter",
        "type": "color",
        "section": "Colors > VGR Decor Colors lighter tone",
        "description": "Decor red lighter",
        "deprecated": null,
        "values": {
          "hex": "#BA6471",
          "rgba": "rgba(186, 100, 113, 1)"
        }
      },
      {
        "name": "$color-green-lighter",
        "type": "color",
        "section": "Colors > VGR Decor Colors lighter tone",
        "description": "Decor green lighter",
        "deprecated": null,
        "values": {
          "hex": "#80A076",
          "rgba": "rgba(128, 160, 118, 1)"
        }
      },
      {
        "name": "$color-blue-lighter",
        "type": "color",
        "section": "Colors > VGR Decor Colors lighter tone",
        "description": "Decor blue lighter",
        "deprecated": null,
        "values": {
          "hex": "#4C91B7",
          "rgba": "rgba(76, 145, 183, 1)"
        }
      },
      {
        "name": "$color-gray-lighter",
        "type": "color",
        "section": "Colors > VGR Decor Colors lighter tone",
        "description": "Decor gray lighter",
        "deprecated": null,
        "values": {
          "hex": "#BBBEBE",
          "rgba": "rgba(187, 190, 190, 1)"
        }
      }
    ],
    "VGR Complementary Colors": [
      {
        "name": "$color-complementary-blue",
        "type": "color",
        "section": "Colors > VGR Complementary Colors",
        "description": "Complementary Blue",
        "deprecated": null,
        "values": {
          "hex": "#71B2C9",
          "rgba": "rgba(113, 178, 201, 1)"
        }
      },
      {
        "name": "$color-complementary-lime",
        "type": "color",
        "section": "Colors > VGR Complementary Colors",
        "description": "Complementary lime",
        "deprecated": null,
        "values": {
          "hex": "#A8AD00",
          "rgba": "rgba(168, 173, 0, 1)"
        }
      },
      {
        "name": "$color-complementary-green",
        "type": "color",
        "section": "Colors > VGR Complementary Colors",
        "description": "Complementary green",
        "deprecated": null,
        "values": {
          "hex": "#008755",
          "rgba": "rgba(0, 135, 85, 1)"
        }
      },
      {
        "name": "$color-complementary-beige",
        "type": "color",
        "section": "Colors > VGR Complementary Colors",
        "description": "Complementary beige",
        "deprecated": null,
        "values": {
          "hex": "#C6AA75",
          "rgba": "rgba(198, 170, 117, 1)"
        }
      },
      {
        "name": "$color-complementary-red",
        "type": "color",
        "section": "Colors > VGR Complementary Colors",
        "description": "Complementary red",
        "deprecated": null,
        "values": {
          "hex": "#C8102E",
          "rgba": "rgba(200, 16, 46, 1)"
        }
      },
      {
        "name": "$color-complementary-purple",
        "type": "color",
        "section": "Colors > VGR Complementary Colors",
        "description": "Complementary purple",
        "deprecated": null,
        "values": {
          "hex": "#582C83",
          "rgba": "rgba(88, 44, 131, 1)"
        }
      },
      {
        "name": "$color-complementary-pink",
        "type": "color",
        "section": "Colors > VGR Complementary Colors",
        "description": "Complementary pink",
        "deprecated": null,
        "values": {
          "hex": "#AF1685",
          "rgba": "rgba(175, 22, 133, 1)"
        }
      },
      {
        "name": "$color-complementary-orange",
        "type": "color",
        "section": "Colors > VGR Complementary Colors",
        "description": "Complementary orange",
        "deprecated": null,
        "values": {
          "hex": "#D86018",
          "rgba": "rgba(216, 96, 24, 1)"
        }
      }
    ]
  }
}

VGR Visuell Profil

Text från VGR Visuell Profil där även mer info finns att hämta kring användande av VGRs färgpalett.

Vår gemensamma färgpalett

Västra Götalandsregionens visuella profil innehåller 13 färger som är utvalda för att fungera sinsemellan. Användningsområden kan till exempel vara diagram, ramar, rubriker och färgplattor. Här hittar du färgkoder för digitala medier och skärm.