Something wonderful is gonna happen!
Intro Root Texts Colors Layout Containers

#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