Flat UI Color Scheme
beCSS has a build-in Flat UI Color Scheme
This twenty color palette is a good tool to complement the brand palette.
<!-- 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.
This is your personal brand color palette
Plus Black and White
be-brand-color
be-dark-shades
be-dark-accent
be-light-shades
be-light-accent
be-dark-dark
be-black
be-white
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
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
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