Establish a color palette

Establish a color palette

Norsk

A color palette refers to the full range of colors that are associated with the brand. It is a good idea to establish a color palette where the colors are specified and are given specific names.

Colors in CSS are defined with color values either by color name, RGB values or hexadecimal color values. There is a set of standard colors that can be recalled simply by names such as blue, yellow, red, etc.

RGB - stands for (Red, Green, Blue). Each parameter defines the intensity of the color using a numeric value between 0 and 255. For example, rgb(0,0,255) is rendered as blue, because the blue parameter is set to its highest value (255) and the others are set to 0. RGB is supported by all websites.

Hexadecimal color values are specified with: #RRGGBB. RR (red), GG (green), and BB (blue) are hexadecimal values between 00 and FF that specify the intensity of the color. For example, #0000FF appears as blue, because the blue component is set to its highest value (FF) and the others are set to 00. You can use uppercase or lowercase letters to enter hexadecimal values.

Instead of referring to the colors with the RGB color value or the hexadecimal value, we can rename the colors and create our own color palette.

We use the selector called :root {} to define global CSS variables. We then get a section in the CSS code to define color names as global variables. These can be used and recalled throughout the CSS code.

The global values are defined like this: --Blue:#202F3E and referenced in the code like this: var--(Blue)

The CSS function var() can be used to set the value of a custom property (sometimes called a "CSS variable").

You can use color values to define properties for e.g.: text, headings, paragraphs, header, footer, background, etc.

Here are some examples:

/*** 1.1 Color palette ***/ /*** Here you can define your own color names as global values ***/ :root { /* Colors */ --Blue: #202F3E; --Dark-blue: #04294D; --Red: #E24523; --Black: #00000; --Green: #23B97C; } /*Headlines*/ h1, h2 { font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif; color: var(--Blue) } /* examples on properties that can use color name as value*/ color: var(--Dark-Blue); background-color: var(--Dark-Blue); border-color: var(--Dark-Blue);