Color Palette

The Balean theme has a range of colors that can be used on your website

Core Palette

Name Hex Usage
Primary #002557 var(--bui-primary-color-1) Buttons, headings, etc
Primary #fff var(--bui-primary-color-3) Background
Surface #FBD872ff var(--bui-primary-color-2) Cards, panels
Text Primary #111 var(--bui-dark) Main body text
Text Secondary #00B5E2 var(--bui-accent-color-1) Hints, sub-headings, secondary content
Accent #FF585D var(--bui-accent-color-2) Highlights, states

Guidelines

  • Ensure 4.5:1 contrast ratio minimum for text.
  • Use accent color sparingly for emphasis only.
  • Apply primary color to call-to-action elements.

Current color scheme

NOTE Colors and logos are currently under construction.

Primary colors
var(--bui-primary-color-1)

Pantone 2757C - Dark blue
web: #002557 | rgb(0, 37, 87) | cmyk(100%, 95%, 4%, 42%)

 var(--bui-primary-color-2)

Pantone 2740C - Octopus Yellow
web: #FBD872 | rgb(251, 216, 114) | cmyk(0%, 8%, 86%, 0%)

 var(--bui-primary-color-3)

White
web: #ffffff | rgb(255, 255, 255) | cmyk(0%, 0%, 0%, 0%)

  
         
         
         
Secondary colors
var(--bui-accent-color-1)

Pantone 3545C - Whale blue
web: #00B5E2 | rgb(0, 181, 226) | cmyk(72%, 0%, 10%, 0%)

 var(--bui-accent-color-2)

Pantone 1787C - Coral
web: #FF585D | rgb(255, 88, 93) | cmyk(0%, 82%, 53%, 0%)

  
         
         
         
Other colors
var(--bui-white)

White
web: #ffffff | rgb(255, 255, 255) | cmyk(0%, 0%, 0%, 0%)

var(--bui-light-gray)

Light gray
web: #eaecef | rgb(234, 236, 239) | cmyk(2.09%, 1.26%, 0%, 6.27%)

var(--bui-gray)

Gray
web: #767676| rgb(118, 118, 118) | cmyk(0%, 0%, 0%, 53.73%)

 var(--bui-dark)

Dark
web: #111111 | rgb(17, 17, 17) | cmyk(0%, 0%, 0%, 93.33%)

Gradient with css: linear-gradient(to right, var(--bui-accent-color-1) 0%, var(--bui-accent-color-2) 50%, var(--bui-primary-color-2) 100%