Fork me on GitHub

Styleguide: Color Palettes

pgAdmin uses standard sets of colors for consistency and style. We are also committed to complying with AA standard contrast ratios (AAA for the high contrast theme). To do this, choose primary, secondary, and tertiary colors that support usability by ensuring sufficient color contrast between elements so that people with low vision can see and use the interface.

pgAdmin uses the Bootstrap framework for responsive layout and has customised it using CSS based on specific needs.

Primary Colors

These are main colors of tool. Used for header, selections, primary buttons etc.

primary
#326690
primary-dark
#295C85
primary-light
#D6EFFC

Secondary Colors

Alert colors

success
#43A047
success-light
#ddf1de
warning
#EEA236
warning-light
#FCE5C5
danger
#E53935
danger-light
#F39999
danger-lighter
#faecec

Severity Status Colors

explain-sev-2
#FFEE88
explain-sev-3
#EE8800
explain-sev-4
#880000

Schema Diff Colors.

diff-row
#FFF9C4
source-row
#FFEBEE
target-row
#FBE3BF

Query Editor Colors.

number
#996644
string
#AA1111
variabe
#0055AA
builtin
#3300AA
comment
#AA5500
bracket
#999977
activeline
#50B0F0
activeline-light
#EDF9FF
keyword
#990088
foldmarker
#0000FF

Tertiary Colors

Used for text, background, lines, borders, icons.

fg
#222222
ternary
#5B6D7C
gray-dark
#848EA0
gray
#BAC1CD
border-color
#DDE0E6
gray-light
#EBEEF3
gra-lighter
#F3F5F9

Primary Colors

These are main colors of tool. Used for header, selections, primary buttons etc.

primary
#234D6E
primary-dark
#15354F
primary-light
#536270

Secondary Colors

Alert colors

success
#1A522B
success-light
#5A7863
warning
#EEA236
warning-light
#B18D5A
danger
#DA6758
danger-light
#914649

Severity Status Colors

explain-sev-2
#DED17E
explain-sev-3
#C2812B
explain-sev-4
#880000

Schema Diff Colors.

diff-row
#807A48
source-row
#402025
target-row
#6B5438

Query Editor Colors.

number
#7FCC5C
string
#E4E487
activeline
#323E43
keyword
#DB7C74
fg
#7DC9F1
editor-operator
#D6AAAA
foldmarker
#0000FF

Tertiary Colors

Used for text, background, lines, borders, icons.

gray-dark
#212121
gray
#2E2E2E
gray-light
#303030
gra-lighter
#424242
border-color
#4A4A4A
base-color
#616161
text-muted
#6B6B6B
fg
#D4D4D4

Primary Colors

These are main colors of tool. Used for header, selections, primary buttons etc.

primary
#234D6E
primary-light
#536270

Secondary Colors

Alert colors

success
#1A522B
warning
#EEA236
danger
#DA6758

Severity Status Colors

explain-sev-2
#DED17E
explain-sev-3
#C2812B
explain-sev-4
#880000

Schema Diff Colors.

diff-row
#807A48
source-row
#402025
target-row
#6B5438

Query Editor Colors.

number
#7FCC5C
string
#E4E487
variabe
#7DC9F1
builtin
#B394FC
comment
#FFAD65
bracket
#D6AAAA
activeline
#063057
keyword
#F8845F
foldmarker
#FFFFFF

Tertiary Colors

Used for text, background, lines, borders, icons.

gray-dark
#010B15
gray
#1F2932
gray-light
#2D3A48
gra-lighter
#8B9CAD
border-color
#A6B7C8
base-color
#C9D0D7
white
#FFFFFF