Managing Colors in Konfiwear
Colors are the foundation of garment customization. Your customers pick colors per zone — This guide covers creating color swatches, organizing them into palettes, configuring color zones, and tuning customizer settings.
Prerequisites
⚠️ Important: You need admin or owner access to your Konfiwear account.
Navigating Colors
Go to Assets → Colors from the sidebar. The Colors section has its own sub-navigation sidebar with four areas:
Sub-Section | Purpose |
Colors | Main swatch list — create, edit, search, filter, and delete individual colors |
Palettes | Group colors into named presets (e.g., "Home Kit", "Corporate") |
Sort | Drag-and-drop grid to reorder the display sequence |
Settings | Customizer feature toggles and color zone configuration |
Caption: The Colors section with the vertical sidebar and the main color swatch list.
Creating a Color Swatch
1. Click Add Color
On the Colors list page, click the Add Color button. The color form dialog opens.
2. Fill in the color details
Field | Description | Required |
Name | Display label shown to your team and customers (e.g., "Navy Blue", "Arctic White") | Yes |
Hex | The hex color value — this is the source of truth for the customizer (e.g., | Yes |
CMYK | Four-field input (C, M, Y, K). Auto-derived from the hex value — you can override manually for print accuracy. | No |
Pantone | Searchable dropdown with the closest Pantone match auto-suggested from a 907-entry dataset. Override freely. | No |
Enabled | Whether the color is visible in the customizer | Yes |
The dialog includes a live preview swatch at the top that updates on every keystroke, showing the exact color with auto-contrasting text overlay.
Caption: The color form with a live swatch preview, hex input with visual picker, auto-derived CMYK, and Pantone closest-match suggestion.
3. Save the color
Click Create. The new swatch appears in the color list.
💡 Tip: Hex is the source of truth — it's what the customizer renders. Pantone and CMYK are enrichment fields for your production team. The admin form auto-derives both, but you can override them for print-specific accuracy.
Editing and Deleting Colors
Edit — Click any color row to open the edit dialog. All fields are editable.
Delete — Use the row's action menu to delete a color. Deletion is permanent.
⚠️ Important: Each hex value must be unique within your account. You cannot create two colors with the same hex code.
Color Palettes
Palettes group colors into named presets. Customers can browse palettes in the customizer to quickly apply a coordinated color scheme.
Creating a palette
Navigate to Colors → Palettes in the sidebar
Click Add Palette
Enter a name (e.g., "Home Kit", "Corporate Branding") and optional description
Save the palette
Assigning colors to a palette
Open a palette by clicking its card
Use the color assigner to add or remove colors from the palette
Colors are displayed in the order you assign them
Caption: Color palettes with assigned swatches displayed as chips on each card.
Sorting Colors
Navigate to Colors → Sort to open a drag-and-drop grid. Grab any swatch and move it to set the display order customers see in the customizer.
The sort order affects all color lists in the customizer — the swatch grid, search results, and palette displays.
Color Settings
Navigate to Colors → Settings to configure two things: customizer feature toggles and color zones.
Feature Toggles
Toggle | Default | What It Controls |
Show Colors List | On | Whether the color swatch grid appears in the customizer |
Gradient Feature | Off | Whether customers can apply color gradients to zones |
Search Colors | On | Whether customers can search your color swatches by name |
Color Palettes | On | Whether preset palettes are shown in the customizer |
Hex Picker | On | Whether the custom hex input and visual picker appear in the customizer |
CMYK Display | Off | Whether CMYK values are shown as a readout in the customizer's hex picker |
Pantone Display | Off | Whether the closest Pantone match is shown in the customizer's hex picker |
Changes are saved with optimistic UI — the toggle applies immediately.
Color Zones
Color zones are the bridge between your design SVGs and the customizer. Each zone maps to an element ID in the design file and defines which part of the garment customers can color.
Zone Field | Description |
Zone Key | The canonical ID matching an SVG element ID (e.g., |
Aliases | Alternative IDs that resolve to the same zone (e.g., |
Label | Human-readable name shown to customers (e.g., "Body Color", "Sleeve Color") |
Default Color | The hex value applied before the customer picks a color |
Is 3D | Whether this zone targets a 3D mesh part (e.g., collar in the GLB model) instead of an SVG fill |
Allowed Colors | Restrict which colors can be picked for this zone. Empty = all colors. Non-empty = only the selected colors. |
⚠️ Important: Zone keys must match the element IDs in your design SVGs exactly. If a zone key doesn't correspond to an element in the SVG, it won't appear in the customizer. Work with your design team to ensure consistent naming.
Caption: The color zones configuration table with zone keys, labels, default colors, and per-zone color restrictions.
How Colors Work in the Customizer
When a customer opens the customizer:
The color zones defined in Settings determine which areas of the garment are colorable
Each zone shows the enabled colors from your color list (or the restricted subset if per-zone limits are set)
Customers pick a color per zone — the design SVG fill updates in real time on the 2D canvas
For zones marked as 3D, the color is applied to the matching mesh material in the GLB model
If the hex picker is enabled, customers can enter a custom hex value with live CMYK and Pantone readouts
Tips & Best Practices
Define color zones before enabling the customizer — without zones, customers can't change garment colors
Use per-zone restrictions for areas with production constraints (e.g., a bib stripe that can only be black or white)
Add Pantone values for every production-critical color — your print team will thank you
Create palettes for key use cases — "Home Kit", "Away Kit", "Training" give customers quick starting points
Keep the sort order intentional — place your most popular colors first