Custom Colors

Who can do this: Owners, Admins, and Editors can customize project colors. See Roles and Permissions for details.

Define your exact brand colors for consistent identity across your project.

Choosing Your Colors

Select up to 4 custom colors using the color picker in the design panel. These colors become available for use throughout your project.

How you apply each color is up to you. Specify in your prompt how you want your colors used:

“Use my first color for buttons and CTAs, the second for section backgrounds, the third for headings, and the fourth for accents.”

“Apply my brand blue to all interactive elements and my brand gray for text.”

The more specific you are, the more consistent your results.

Setting Colors

Via chat:

“Set my primary color to #3B82F6 and secondary to #10B981”

Via brand kit panel:
Click any color swatch in the design panel and use the color picker.

From uploads:
Upload your logo or brand assets and ask:

“Extract the colors from my logo for the brand kit”

See Attach Files for Context for more on uploads.

Color Formats

Sticklight accepts:

• Hex: #3B82F6
• RGB: rgb(59, 130, 246)
• HSL: hsl(217, 91%, 60%)
• Named colors: blue, coral, navy

Hex codes are most precise for brand matching.

Accessibility Considerations

Good color choices ensure everyone can use your site:

• Text contrast – 4.5:1 minimum ratio for body text
• Large text – 3:1 minimum for headings 18px+
• Interactive elements – Buttons and links should be clearly visible

Sticklight helps maintain accessible contrast, but verify with your specific color combinations.

Applying Colors Consistently

Once you’ve set your colors, guide Sticklight on where to use them:

• Be specific – “Use the teal for all buttons” works better than “make it colorful”
• Reference by position or description – “my first color” or “the dark blue”
• Layer your requests – Set colors first, then refine individual elements

For precise control over individual elements, use Visual Editing.