#Colors

A nice and complete Flat UI Color Scheme

Flat UI Color Scheme

Turquoise

Emerald

Peter River

Amethyst

Wet Asphalt

Green Sea

Nephritis

Belize Hole

Wisteria

Midnight Blue

Sun Flower

Carrot

Alizarin

Clouds

Concrete

Orange

Pumpkin

Pome Granate

Silver

Asbestos

beCSS has a build-in Flat UI Color Scheme

This twenty color palette is a good tool to complement the brand palette.

Please note that classes for the Flat Color Scheme are only for background. If you want to apply to a text you can use the corresponding variable and apply it to the style sheet.

<!-- Classes for Background -->
be-bg-turquoise
be-bg-emerald
be-bg-peter-river
be-bg-amethyst
be-bg-wet-asphalt
be-bg-green-sea
be-bg-nephritis
be-bg-belize-hole
be-bg-wisteria
be-bg-midnight-blue
be-bg-sun-flower
be-bg-carrot
be-bg-alizarin
be-bg-clouds
be-bg-concrete
be-bg-orange
be-bg-pumpkin
be-bg-pome-granate 
be-bg-silver
be-bg-asbestos

<!-- Classes for Hover -->
be-hover-turquoise
be-hover-emerald
be-hover-peter-river
be-hover-amethyst
be-hover-wet-asphalt
be-hover-green-sea
be-hover-nephritis
be-hover-belize-hole
be-hover-wisteria
be-hover-midnight-blue
be-hover-sun-flower
be-hover-carrot
be-hover-alizarin
be-hover-clouds
be-hover-concrete
be-hover-orange
be-hover-pumpkin
be-hover-pome-granate 
be-hover-silver
be-hover-asbestos

<!-- Flat Colors as variable -->
--turquoise
--emerald
--peter-river
--amethyst
--wet-asphalt
--green-sea
--nephritis
--belize-hole
--wisteria
--midnight-blue
--sun-flower
--carrot
--alizarin
--clouds
--concrete
--orange
--pumpkin
--pome-granate 
--silver
--asbestos

Although the Flat Color Scheme does not have classes to apply color to texts, you can use the variables to do it directly in the html. See the Texts section for more details.

<!-- Using the Flat UI Scheme Color -->
<p class="be-text-color" style="--text-color: var(--pumpkin)">Dolor sit amet...</p>

Brand Color Scheme

The Brand Color Scheme is usually more than enough for designing a website. To the eight colors (not all of them necessary) black and white are added. The entire palette is available for both backgrounds and texts.

Brand Color

Dark Shades

Dark Accent

Light Shades

Light Accent

Dark Dark

This is your personal brand color palette

Plus Black and White

Black

White

Background

be-brand-color
be-dark-shades
be-dark-accent
be-light-shades
be-light-accent
be-dark-dark
be-black
be-white

Texts

be-text-brand-color
be-text-dark-shades
be-text-dark-accent
be-text-light-shades
be-text-light-accent
be-text-dark-dark
be-text-black
be-text-white

Hover

be-hover-brand-color
be-hover-dark-shades
be-hover-dark-accent
be-hover-light-shades
be-hover-light-accent
be-hover-dark-dark
be-hover-black
be-hover-white

Borders

be-bdr-brand-color
be-bdr-dark-shades
be-bdr-dark-accent
be-bdr-light-shades
be-bdr-light-accent
be-bdr-dark-dark
be-bdr-black
be-bdr-white