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
The Color Generator offers various color schemes - Complementary, Monochromatic, Analogous, Triadic, Split-Complementary, and Tetradic - to help you create harmonious, professional palettes.
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.
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
The generator produces :root CSS variables that can be easily copied and seamlessly integrated into your Blocsapp projects, ensuring optimal contrast for improved readability.
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.
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
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
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.
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.
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
.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
Generate the color palette
Copy the :root CSS
Paste the copied CSS into the Additional CSS field
Voilà ! The colors from the generated palette will automatically apply to your website’s elements based on the :root CSS variables.