Please Note
The Color Designer is currently not fully supported on mobile devices. However, you can generate colors without the option to adjust the settings

bloc stripe

Discover the intuitive color generator for Blocsapp

Effortlessly create harmonious and professional color palettes without any technical expertise.

Button Example

Various Color Schemes

The Color Generator offers various color schemes - Complementary, Monochromatic, Analogous, Triadic, Split-Complementary, and Tetradic - to help you create harmonious, professional palettes.

Various design standards

The color generator supports a variety of design standards, including Material, Flat and Pastel. Customize colors with ease using user-friendly sliders for tint, shade and tone, ensuring the palette perfectly matches the design vision.

Flexible primary color selection

Select a primary color either through automatic generation or by manually choosing your preferred hue. Alternatively, lock in your selected colors to manually create a customized palette that aligns with your unique design preferences

Copy :root CSS variables

The generator produces :root CSS variables that can be easily copied and seamlessly integrated into your Blocsapp projects, ensuring optimal contrast for improved readability.

Just add the classes

and let the generator do the rest

The color generator is incredibly easy to use. Simply add the appropriate classes to the elements you want to be affected by the color generator. There are separate classes for background and text colors, making it simple to apply the generated color palette to the background and text of your design elements.

Primary Color 

.bg-cd-primary
.text-cd-primary

The primary color is the dominant color on the website, representing the brand or the main mood of the design. Consistently use the primary color in areas intended to catch users’ attention, such as:

  • Backgrounds Headers, footers, or large sections

  • Buttons To give them a strong visual presence

  • Main Titles (H1, H2) or important texts that need to attract attention

Read more

Secondary Color 

.bg-cd-primary
.text-cd-secondary

The secondary color complements the primary color and balances the overall palette. It highlights other areas without overwhelming the design, ideal for:

  • Links or Subtitles Elements that should be visible but not the main focus

  • Backgrounds for Smaller Sections Less prominent than primary areas

  • Graphic Elements To create visual variety

Read more

Accent Color 

.bg-cd-primary
.text-cd-accent

The accent color highlights specific elements that require extra attention without being too dominant. Examples include:

  • Call-to-Action Buttons

  • Alerts, Messages or Icons To draw attention to notifications or important information.

  • Borders To visually separate sections.

Read more

Dark background  Color 

.bg-cd-dark
.text-cd-dark

Dark colors are intended exclusively for use as background colors to add depth and contrast to your design. They can be utilized for:

  • Dark Backgrounds To create contrast against lighter colors.

  • Footers or Sidebars To make navigation areas less distracting.

  • Sections Requiring Emphasis To highlight specific areas of your design and direct attention without overwhelming other elements.

Read more

Light background  Color 

.bg-cd-dark
.text-cd-light

Light colors are intended exclusively for use as background colors to soften the design with lighter tonal areas. Light colors can be utilized for:

  • Background Areas Such as main content sections or header backgrounds.

  • Highlighting Large Content Areas Including news sections or article backgrounds.

  • Section Separation To visually divide sections without creating excessive contrast

Read more

Add even more classes

.contrast-cd-target
This class is applied to a parent element to ensure that the background color of elements inside it has the proper contrast with the text color. When this class is used on a parent element, the background color is automatically adjusted to ensure good readability.

.border-cd-color
This class is specifically used on buttons or other elements with borders to automatically adjust the border color, ensuring that it has sufficient contrast against the background. This makes the borders of the buttons clear and easy to see, regardless of the background color.

And more is to come

Easiest way to style your website

css
  1. Generate the color palette

  2. Copy the :root CSS

  3. Paste the copied CSS into the Additional CSS field

  4. VoilĂ ! The colors from the generated palette will automatically apply to your website’s elements based on the :root CSS variables.

Link
Link