Style Guide

Colors

Below are the colors for pgadmin4. To use, copy and paste the hex codes into the CSS.

The current app may have more colors than what is included here. When a color is encountered in the app that is not documented here, default to replacing that color with one that is documented here.

Each color listed on this page can be used for Background, Font, and Border. Pre-pend each class name with .bg- or .font- or .border- to use as background or border.

Example:
To use a background color use the class:
bg-color-yellow
To use a border color use the class:
border-color-yellow
To use a font color use the class:
font-color-yellow

Primary blue

This color should be used to call attention to the main part of the app. Use sparingly.

primary-blue
$primary-blue
#2c76b4

Grays

For text, avoid using black or #000 to lower the contrast between the background and text.

gray-1
$color-gray-1
#f9f9f9
gray-2
$color-gray-2
#e8e8e8
gray-3
$color-gray-3
#cccccc
gray-4
$color-gray-4
#888888
gray-5
$color-gray-5
#555555
gray-6
$color-gray-6
#333333

Others

These colors should be used to highlight hover options in dropdown menus and catalog browser or to tell the user when something is right or wrong.

blue-1
$color-blue-1
#e7f2ff
blue-2
$color-blue-2
#84acdd
red-1
$color-red-1
#f2dede
red-2
$color-red-2
#de8585
red-3
$color-red-3
#d0021b
green-1
$color-green-1
#dff0d7
green-2
$color-green-2
#a2c189
green-3
$color-green-3
#3a773a