Onepage allows you to customize the design of your projects with color palettes and color gradients.
Select color palette
Step 1: Open Settings
Go to the page editor and open Design → Colors. Here you can either create your own color palette or choose from pre-designed palettes so that your corporate design is automatically reflected in all designs.
Step 2: Select your color palette
You have two options here:
Either create your own color palette by clicking on “+ Add color” and adding your desired colors either via the color palette or using hex code:
Or you can choose a ready-made color palette, which you can adjust at any time afterwards:
In general, you can set colors for light, primary, secondary, and dark for your website. It is important that you save the changes at the end so that they are applied.
If you want to create your own color palette but are unsure which colors harmonize well, we recommend tools such as Coolors or ColorHunt.
📌 Please note: Font and color settings are managed centrally within a project. If you change the color palette, it will automatically be applied to all pages of your website.
Meaning of colors in the color palette
The color palette determines how colors are used in your project and which elements they affect.
Light: This color is mainly used as a background for containers and sections and forms the basis for a clear and calm page layout.
Primary: The central accent color of your website. It is mainly used for buttons, call-to-actions, and highlighted elements to draw the attention of visitors.
Secondary: A complementary accent color that is used for bullet points, column backgrounds, and other design elements, among other things, to visually break up the design.
Dark: This color is primarily used as the font color for the website and forms. It can also be used as an overlay for title images to increase contrast and improve readability.
Gradient background
In Onepage, you can add color gradients to entire sections, individual containers within a section, or CTA buttons. Below, we'll show you how to access the settings, explain the three types of color gradients: linear, radial, and mesh, and how you can save your favorite combinations as presets.
Apply a gradient to section background
Move the mouse pointer over the desired section. Click on the brush icon in the control panel at the top right. In the panel that opens, switch to the third option, "Gradient".
Apply a gradient to a specific container
Move the mouse pointer over the desired container until the control panel appears. Click on the brush icon, open the “Background” section in the pop-up window, and select the fourth option, "Gradient".
Apply a gradient to a button
You can also assign a gradient background to a button. To do this, click on the button, open the style settings via the brush icon, select "Background" and click on the fourth option, "Gradient".
Apply a gradient to text
To add a color gradient to a text element or heading, hover your mouse pointer over the desired element. Click on the three-dot button to the left of the element, select "Style" and open "Text Color". Then select the fourth option, "Gradient".
Gradient Types & Controls
Before you start, you can first select the base color under "Background".
In Onepage, you can choose between three gradient types: linear, radial, and mesh.
The linear gradient allows you to set color points and adjust the angle of the gradient. With a simple toggle, you can also reverse the direction of the gradient.
Radial gradients allow you to add multiple color points that originate from a center point. The horizontal position of the center point can be freely adjusted, and it is also possible to reverse the position.
Mesh gradients offer the greatest creative freedom: you can place multiple color dots anywhere in the area and precisely adjust the X and Y position of each dot. The color palette can also be randomized, either using only the predefined project colors or generated completely at random.
Adding and removing color stops
Click anywhere in the gradient settings to add a new color stop. Then click on the color stop to edit the color.
To remove a color point, click on the burger button below the gradient settings. A list of all color points will open, where you can delete or add color points.
Saving & reusing presets
After you have created your color gradient, click on "Add Color" to save the preset. Your new preset will appear in the preset list and can be quickly reused in any section or container.
💡Do you have any feedback about this article? Please let us know through our live chat or at support@onepage.io, so we may keep it up to date. Thank you! 🙂