> ## Documentation Index
> Fetch the complete documentation index at: https://docs.zonely.gen.tr/llms.txt
> Use this file to discover all available pages before exploring further.

# Colors

> Prepare default appearance, light and dark tones, color palette and status colors.

Page Creative **Colors** open the part. Select the default view and main color of the site. The system adapts the color you choose to open and dark-looking items; **Pallet** and **Important Colors** You can also edit settings according to your requirement.

[![Default ton, Bright main color, Dark main color, Detailed pallet](https://mintcdn.com/zonely-a8cd49e7/N_QMnvmTBQuFR-Ic/images/panel/page-builder-guide-20261025/05-renkler-en.png?fit=max\&auto=format\&n=N_QMnvmTBQuFR-Ic\&q=85\&s=02965713c7931c23279547d4eb7f6cb8)](https://docs.zonely.gen.tr/images/panel/page-builder-guide-20261025/05-renkler-en.png)

> [card] 1. Default ton
>
> Select the Bright or Dark for the first view of the visitor.

> [card] 2. Bright main color
>
> Select the main highlight color of the open view.

> [card] 3. Dark main color
>
> Customize the color of the highlight of the dark look you like.

> [card] 4. Detailed pallet
>
> Pallet and Important Colors open surfaces and status colors.

## Select default view

**Default Tone** from list **Bright** or **Dark** Select. This selection determines the initial view of your site.

**Bright Tone** Select your main color from the area. The color you choose also adapts to the dark appearance and adapts to the site. If you want **Dark Tone** You can determine a different color of highlight for dark appearance from the area. Use color selective or color code.

## Detailed pallet — optional

If you want to customize more detailed **Pallet → Layout** open the way. Top **Luminous / Dark** Select the look you want to edit from selection.

[![Layout appearance, Color family, Gray tones](https://mintcdn.com/zonely-a8cd49e7/N_QMnvmTBQuFR-Ic/images/panel/page-builder-guide-20261025/06-palet-en.png?fit=max\&auto=format\&n=N_QMnvmTBQuFR-Ic\&q=85\&s=ad936a28949aa751bb68d99c8f887fa0)](https://docs.zonely.gen.tr/images/panel/page-builder-guide-20261025/06-palet-en.png)

> [card] 1. Edited view
>
> Switch between the light and the Dark; two pallets are kept separately.

> [card] 2. Color family
>
> Change the code of each color from its own area.

> [card] 3. Grey tones
>
> Gray scale is useful to adjust different surface and text levels.

Pallet; Blue, nail, purple, pink, red, orange, yellow, green, turquoise and glass color families contain gray tones. Click on the color field and change the corresponding code.

**Gray 10–Gri 90** prepare the fields to separate surface, edge and font levels from each other. Leave a difference between light and dark levels instead of giving the same color to all grey fields. Then check the other appearance and his palette.

## Important colors — optional

**Important Colors** change the areas is not mandatory. When you choose your main color, the system adapts the light and dark appearance. If you want to customize status messages, page floor or text color as well as **Important Colors → Edit** open the window and select the corresponding view.

[![Ton selection, Condition colors, Body floor](https://mintcdn.com/zonely-a8cd49e7/VcGJjK7LclDv4BqR/images/panel/page-builder-guide-20261025/07-onemli-renkler-en.png?fit=max\&auto=format\&n=VcGJjK7LclDv4BqR\&q=85\&s=6315fdbf3126c6eb9daee12901fb5cf3)](https://docs.zonely.gen.tr/images/panel/page-builder-guide-20261025/07-onemli-renkler-en.png)

> [card] 1. Ton selection
>
> Edit the status colors separately for light and dark appearance.

> [card] 2. Condition colors
>
> Keep successful, Information, Alert and Hazard messages distinguished.

> [card] 3. Body floor
>
> Check the Body Text colors together with the Body Background.

* **Secondary:** The auxiliary highlight color.
* **Successful / Information / Warning / Danger:** The color that tells the type of process result or message. Use the tons that are easily distinguished from each other.
* **Body Background:** The page determines the basic floor.
* **Body Text:** Determines the color of the basic text; check it with the floor.

## Preview and save

Close windows and see a button, a long paragraph and information message. Check out whether articles are lost in the open view, description and edges are selected in dark appearance. **Save All** complete with.

If you use background picture, evaluate colors together with visual. Visual settings [Background](https://docs.zonely.gen.tr/en/guides/page-builder/background.md) in the section.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.